Jump to content
Sign in to follow this  
sisyphus

Padding/margins on Highlight

Recommended Posts

sisyphus
http://precisionwnc.com I'm having trouble with spacing around a highlight section. I've used Firebug to deduce the margins and padding to get the highlight to bleed to the edges but there's a tiny white margin at the bottom that doesn't seem to have a style associated with it that I can't figure out for the life of me. Additionally, there's a space at the top of the highlight that I can't figure out how to remove. When I fill in the Highlight header text and subtext, it appears in that section with a white background. Without it, the field is still there but empty and reveals the black page background. I suppose I could factor a header text in there and have done with it but a) that's not part of the design and B) I'd like to get a better sense of control over layouts in Pagelines. By the way, the highlight that's there now (the big gray box) is NOT part of the final design, just a placeholder for the image. Here's my custom CSS: #branding .content-pad {padding: 0;} #footer {background-color: #060606;} #highlight .content-pad .highlight-area {padding: 0;} .highlight-area {padding: 0;} .content-pad {padding: 0;} .hentry-pad {padding: 0;} Thanks, Sisyphus (I just keep pushing these rocks!)

Share this post


Link to post
Share on other sites
Jenny
[code]#highlight .hl-image-bottom { margin: 3em 0 0; }[/code] ^^^ Not affecting your site at the moment, but you'll want to fix this if you're trying to remove extra space. It's getting the background color from the content, that's why you're seeing white. The whole page has a margin at the bottom, it seems like. Not sure where it's coming from (I don't see anything), but you can fix it by adding this to your CSS: [code]#page { margin-bottom: -7px; }[/code] This will be site-wide however. If you find it is messing up other pages, then you can make it apply to your home page only with: [code].page-id-16 #page { margin-bottom: -7px; }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
sisyphus
Thanks Simple Mama! I managed to figure out the margin above the highlight by digging in even deeper with Chrome's inspection tool and was coming back to exclude that part from the question when I discovered your page margin suggestion. Worked beautifully. I was tweaking the CSS while you were looking and had already removed that bit of code. Can I ask one small stylistic question? If I put the page id in and enclose all of the above custom CSS in curly brackets, will it restrict everything to that page? Or, is there another way to accomplish that? Obviously, there are some things I'd like to apply sitewide but some that I will not so I'll sort that out but I just want to know the CSS protocol for limiting code changes to a single page. Thanks again!

Share this post


Link to post
Share on other sites
Rob
Hi, as Simple_mama pointed out, to apply CSS to a single page, you don't wrap it all in a great big area inside curly brackets. Instead, you do it like this: [code].page-id-16 #page { margin-bottom: -7px; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
sisyphus
Well, I appreciate your input but my question was what if I, in fact, DO want to wrap it all in a great big area inside curly brackets? That is, I want lots of elements inside said brackets, but not all of them? To be more precise, can you suggest to me the preferred method for sequestering a dozen or so css rules to a single page?

Share this post


Link to post
Share on other sites
sisyphus
BTW, for the benefit of all who have come here searching for answers to a similar question (because it makes me CRAZY to search for answers only to find someone who says, "Hey, I found it" but doesn't post it) here's the CSS I've used on the site as regards the highlight section: Admittedly, it's crude. It's cut and paste, trial and error. Hopefully, someone will improve it and it'll be here for us all: #highlight .content-pad .highlight-area {padding: 0;} .highlight-area {padding: 0;} .content-pad {padding: 0;} .hentry-pad {padding: 0;} .hl-image-top { margin-top: 0px; }

Share this post


Link to post
Share on other sites
sisyphus
OH, and of course this part, added by Simple Mama: #page { margin-bottom: -7px; }

Share this post


Link to post
Share on other sites
Jenny
If the elements are different, then you'll need to do separate declarations, such as: [code].page-id-16 #highlight .hl-image-bottom { margin: 3em 0 0; } .page-id-16 #page { margin-bottom: -7px; }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
sisyphus
Thanks again, Simple Mama! I appreciate your patience and assistance as I bludgeon my way through CSS... If you'll indulge me one more question; I know that "the professional way" to customize a theme is to use a child. Is there some sort of benchmark for how much is too much custom code in Pagelines>Settings>Custom? Is there a drawback to customizing this way, other than it not being considered professional?

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  

×