Make slider smaller

Community Forums Forums Design Tips and Tricks Make slider smaller

This topic is: not resolved

Tagged: 

This topic contains 11 replies, has 2 voices, and was last updated by  SoZo 1 year, 8 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #478

    apt513
    Participant
    Post count: 3

    http://209.212.251.31/~demblub/

    I adjusted the size in the slider settings, but it doesn’t seem to coincide with a similar change on the website. I made it as small as 400×400 but it will not reduce the width any.

    What line in css controls the width of the home featured area?

    #480

    SoZo
    Moderator
    Post count: 1573

    That width is set by the .wrap rule on line 170.  If you want to effect only the home-featured div you would need to add a new rule using .home-featured.

    I recommend installing the Firebug add on for Firefox or using Chrome’s Firebug Lite which will enable you to right click on any element to inspect it and determine the associated style rules or the selectors required to create new style rules.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #482

    apt513
    Participant
    Post count: 3

    I have firebug.

    I just inspected the element that is the home featured / slider (again) and nowhere does it say line 170 wrap. Maybe i missed something.

    This is what i get under style;

    .flexslider .slides img {

        display: block;
        max-width: 100%;

    }

    a img {

        border: medium none;

    }

    img {

        height: auto;
        max-width: 100%;

    }

    .outreach-blue .author-box a, .outreach-blue .author-box a:visited, .outreach-blue .menu-secondary li a:active, .outreach-blue .menu-secondary li a:hover, .outreach-blue .menu-secondary li:hover a, .outreach-blue .menu-secondary .current_page_item a, .outreach-blue .menu-secondary .current-cat a, .outreach-blue .menu-secondary .current-menu-item a, .outreach-blue .sidebar a, .outreach-blue .sidebar a:hover, .outreach-blue .sidebar a:visited, .outreach-blue .widget-area h4, .outreach-blue .widget-area h4 a, .outreach-blue #footer-widgets a, .outreach-blue #footer-widgets a:visited, .outreach-blue.outreach #genesis-responsive-slider a, .outreach-blue.outreach #genesis-responsive-slider a:visited, .outreach-blue #header .menu li a:active, .outreach-blue #header .menu li a:hover, .outreach-blue #header .menu li:hover a, .outreach-blue #header .menu .current_page_item a, .outreach-blue #header .menu .current-cat a, .outreach-blue #header .menu .current-menu-item a, .outreach-blue #sub-footer a, .outreach-blue #sub-footer a:visited, .outreach-blue #sub-footer h4, .outreach-blue #sub-footer .latest-tweets ul li.last a, .outreach-blue #sub-footer .latest-tweets ul li.last a:visited {

        color: #407AB4;

    }

    .outreach #genesis-responsive-slider a, .outreach #genesis-responsive-slider a:visited {

        color: #6AB446;

    }

    .outreach-blue a, .outreach-blue a:visited {

        color: #37689B;

    }

    a, a:visited {

        color: #589B37;

    }

    .slides, .flex-control-nav, .flex-direction-nav {

        list-style: none outside none;

    }

    body, h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6, p, select, textarea {

        color: #333333;
        font-family: ‘Lato’,sans-serif;
        font-size: 16px;
        line-height: 1.5;

    }

    body:not([id]) {

        cursor: auto !important;

    }

    Which is why i wanted to know where was it in css. Is there another section of firebug i should be looking at?

    I just want to make the slider section smaller since adjusting it in the slider properties doesn’t work.

    Since adjusting the size in the slider properties doesnt actually work, what it its purpose?

    #499

    SoZo
    Moderator
    Post count: 1573

    In Firebug you need to go up the cascade of divs until you find the one that is setting the width.

    Adjusting the slider dimensions does not effect the styles applied to the container of the sidebar to which you add the slider.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #577

    apt513
    Participant
    Post count: 3

    I see <div id=”content-sidebar-wrap”>

    The width is set to 100%. If i set it to 60% the side is correct but it isn’t centered. It also only looks correct at a few screen sizes. There are sizes where a big white bar appears on the right.

    #582

    SoZo
    Moderator
    Post count: 1573

    #content-sidebar-wrap has a left float so it’s not going to center. You either need to add a new rule or edit the .wrap rule on line 170.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #638

    apt513
    Participant
    Post count: 3

    Edit the rule how?

    If i make it less, it affects more then the featured section.

    What new rule do i add to home-featured to make only that section smaller and centered?

     

     

    #640

    SoZo
    Moderator
    Post count: 1573

    You can use Firebug to determine the selector for your new rule then add the width you want to that rule.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #641

    apt513
    Participant
    Post count: 3

    The selector?

    #642

    SoZo
    Moderator
    Post count: 1573

    Yes. Refer to this for a run down on CSS syntax.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #644

    apt513
    Participant
    Post count: 3

    I have no idea how to figure out which selector I need to choose, firebug or not. (let alone create a rule to do what I want to do)

    The left side is mostly div id and the right side is mostly css.

    How do you use firebug to find out which selector you need?

    #646

    SoZo
    Moderator
    Post count: 1573

    There are a ton of Firebug tutorials available but basically all you need to do is run up the cascade of divs that you see over on the left and just use the name of the div in your selector as you normally would to create a more specific rule. What you see appearing over on the right in the CSS pane are the style rules associated  with or effecting the div that you have highlighted on the left.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.