Archived

This topic is now archived and is closed to further replies.

  • 0

Highlight Banner Spacing

Question

Posted · Report post

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

8 answers to this question

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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