Jump to content
Sign in to follow this  
nelsons

Highlight Banner Spacing

Recommended Posts

nelsons    0
nelsons

I would like to change the spacing of the highlight banner between the Nav and the banner itself. I have found the following CSS that appears to work : #highlight .highlight-splash { margin-bottom:0; margin-left:0; margin-right:0; margin-top:3em; If I change the margin-top to -2em I get the exact sizing I would like, however I can seem to get it to work in the custom CSS box. Any help ?

Share this post


Link to post
Share on other sites
catrina    103
catrina

Hello, Since you have that code already, you can use it to replace the #highlight .highlight-splash code that is already in one of the CSS files. Open the pro.css file (inside the pro folder) and look for this code:

#highlight .highlight-splash{margin: 3em 0 0 0;}

. Replace it with the code you figured out and save the file.


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
nelsons    0
nelsons

Hi Catrina I now need to change the following top padding to 0px : #highlight .content-pad .highlight-area { padding-top:40px; } However, firebug reports that this is in the pro.css file at line 422, I have looked at this file and line 422 says : #highlight { text-align: center; } #highlight .content-pad .highlight-area{padding: 40px 8px;} #highlight .copy-pad .highlight-area{padding: 20px 15px;} Can you tell me where to change the top padding for the highlight box ?? Thanks S

Share this post


Link to post
Share on other sites
bryan-hadaway    3
bryan-hadaway

Yeah, the line #'s can be off for multiple reasons. Just do a Cmnd+F or Ctrl+F for what you're looking for in the CSS files. Thanks, Bryan

Share this post


Link to post
Share on other sites
nelsons    0
nelsons

Hi Bryan. It's not there in the pro.css hence my question the only code in there that pertains to .content-pad .highlight-area is shown above.. Is there somewhere else the padding-top values may be ?

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

What version of Platform are you using? CSS hierarchy was slightly off with previous versions which made the custom css box not work as it should. You can fix it by being more specific ` body #highlight .highlight-splash { margin-bottom:0; margin-left:0; margin-right:0; margin-top:3em; } ` e.g. like the addition of 'body' in the code above

Share this post


Link to post
Share on other sites
nelsons    0
nelsons

Hi I assume I am using the latest version as I only downloaded it less than 4 days ago. So am I safe to add this code as is to the pro.css file in place of the existing code for the highlight bar ? Thanks S

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

Never assume that you are safe :) Product iterations can happen rapidly. Yes you can do that, but again i would end up copying that into the Base theme so you always have it.

Share this post


Link to post
Share on other sites
nelsons    0
nelsons

Superb... I replaced it and changed the pixel values to em values whatever they are.. it's fixed.

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  

×