Jump to content
Sign in to follow this  
dalemccready

adding balance to the feature boxes

Recommended Posts

dalemccready

HI I'm having a bit of trouble using Firebug to find the correct div to adjust the feature boxes on my homepage. I want to put a Custom code in but it seems to not work for me. I don't know all the rules, as to whether one custom code is messing up another or how specific the divs can be. I basically want to close the gaps horizontally on this page: http://www.nzcine.com Between the thumb-nailed excerpts. I get this with my inspector on Firebug: element.style { padding-left: 36px; padding-right: 0; } .fixed_width #boxes .dcol-pad { padding: 10px; } Even better would of course being able to take the excerpts and thumbnails that are feeding my news page and divert some of them here like these boxes so that they update dynamically

Share this post


Link to post
Share on other sites
Kate

@Dale You're trying to reduce the space between the image and the text, correct? If so, try this:

.fboxgraphic{padding-right:8px !important;}

Share this post


Link to post
Share on other sites
dalemccready

Thanks, but it's more the padding between the text on the left columns and the thumbnail on the right. Alternately I'd use a recent posts widget instead, but in another columned widget container, or is it possible to create columns in the full width one somehow? Thanks for your time.

Share this post


Link to post
Share on other sites
bryan-hadaway

Looks like you've got it cleaned up really nice, still needing help? Thanks, Bryan

Share this post


Link to post
Share on other sites
dalemccready

well to be honest I'm still terrible at knowing exactly what div info to use to tell the Custom CSS box what to do. I use Firebug and there seem to be a plethora of choices to call out the particular section. Some work, some don't and I never quite know how to format that. #boxes .thingamy {etc:more;} Got any tips for that? Does the hash always denounce a certain thing? Oh I should just got read a book on CSS really shouldn't I? Dale

Share this post


Link to post
Share on other sites
bryan-hadaway

Quick CSS breakdown; `#` means ID - so you'll see `id="whatever"` in the HTML which is `#whatever` in CSS `.` means Class - so you'll see `class="whatever"` in the HTML which is `.whatever` in CSS CSS is about specificity and precedence; `#header #nav_row ul li a{color:#000}` will take precedence over: `#nav_row ul li a{color:#000}` because it is more specific. Sometimes if you run into a strange conflict: `#nav_row ul li a{color:#000 !important}` would give it precedence even over: `#header #nav_row ul li a{color:#000}` But, the !important deceleration should only be used as a last resort. Quick and easy CSS reference and learning here: http://www.w3schools.com/css/ Thanks, Bryan

Share this post


Link to post
Share on other sites
phxreguy

"But, the !important deceleration should only be used as a last resort." Bryan, can you explain why? As a CSS noob, I often find the only way I can get my custom CSS to "override" the default is by using the !important declaration.

Share this post


Link to post
Share on other sites
catrina

Hm, I can't explain why the !important declaration should only be used as a last resort, but have you tried adding the CSS code to the base.css file in the Platform Base theme (the child theme)?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
phxreguy

Catrina - yes, I'm adding to the Base child theme (well, I assume I am. I'm adding CSS in the "Custom Code" area in the PageLine Pro settings area). I can see via firebug that those changes are there, but they are crossed out (when viewed in Firebug) and the original CSS remains intact and active.

Share this post


Link to post
Share on other sites
dalemccready

Hey Bryan thanks so much. I'm going to have that on my stickies, that made everything make a lot more sense. Cheers!

Share this post


Link to post
Share on other sites
cmunns

Jay, You wouldn't use !important, because if you forget that at one point you added that somewhere you will be pulling your hair out trying to change that element using the natural hierarchy of CSS, because it won't work. With the !important tag scattered throughout it just gets really messy adding things and editing them. You would use it primarily when you need to override inline styles which in FireBug look like this element.style {} but avoid when possible.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×