- This topic has 11 replies, 2 voices, and was last updated 10 years, 4 months ago by
.
-
Posts
-
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 400x400 but it will not reduce the width any.
What line in css controls the width of the home featured area?
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
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?
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
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.
#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
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?
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
Yes. Refer to this for a run down on CSS syntax.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
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?
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
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.