Jump to content


Photo
- - - - -

Header Background

header background

Best Answer James B , 28 March 2013 - 12:14 AM

Hi there, to remove the padding from a section you'll need to follow Danny's guide above to find the area the padding is coming from and the correct css path like you did with - #site .section-branding .content then you can remove the padding using {padding:0;}

 

If you're using firebug to locate and edit your css you'll notice when you hover over the html in the web inspector the appropriate area in the preview window above is highlighted. If you see a dark thick blue line or yellow line that relates to padding/margins. So then you know then you've found the correct area in the html that the padding is applied to.

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 allanlove

allanlove

    Advanced Member

  • Members

  • 70 posts
  • LocationBanbury, UK
  • Framework Version:DMS Developer
  • Country: Country Flag

Posted 27 March 2013 - 12:14 PM

I have set the page background on my site to white and the actual background of the site is black. The problem i have is that the white goes all the way up behind the header to the very top of the browser window. Can you please help me get it to stop at the top of the page content? Do i need to use some custom CSS? If so, what is it please?



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 March 2013 - 12:17 PM

Hi Allan,

 

I apologise but I am not quite sure what you're referring to, would it be possible for you to create an image, displaying the layout you wish to achieve please. Once we have this, we will be able to assist you further.



#3 allanlove

allanlove

    Advanced Member

  • Members

  • 70 posts
  • LocationBanbury, UK
  • Framework Version:DMS Developer
  • Country: Country Flag

Posted 27 March 2013 - 12:24 PM

Hi, please have a look at

Please Login or Register to see this Hidden Content

I want the white background to stop at the top of the boxes so the header image is on the actual site background. Hope that makes sense!



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 March 2013 - 12:41 PM

In order to achieve this layout, you will will need to use custom CSS. Unfortunately, we are unable to provide you the custom CSS needed to achieve your layout.

 

 

I recommend using Firebug or your browsers built-in web dev tools and inspect the sections content div to find the correct code.

 

For assistance visit our custom CSS documentation - 

Please Login or Register to see this Hidden Content

 

All sections follow the same HTML structure, below is just an example.

 

 

Now you will need to use your sections .content class. So you CSS would look something like this:

 

 

So for example, let's say you're using the Branding section and wish to have a white background in the content area of your Branding section. The CSS would look like this:

 

Please Login or Register to see this Hidden Content

 

 

 



#5 allanlove

allanlove

    Advanced Member

  • Members

  • 70 posts
  • LocationBanbury, UK
  • Framework Version:DMS Developer
  • Country: Country Flag

Posted 27 March 2013 - 02:12 PM

Ok, so i have managed to sort that bit with

 

#site .section-branding .content {background: rgba(255, 255, 255, .0);
}

 

Now there is too much padding in the branding section, i can't work out the CSS to change it, could you please help me with this one?



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 28 March 2013 - 12:14 AM   Best Answer

Hi there, to remove the padding from a section you'll need to follow Danny's guide above to find the area the padding is coming from and the correct css path like you did with - #site .section-branding .content then you can remove the padding using {padding:0;}

 

If you're using firebug to locate and edit your css you'll notice when you hover over the html in the web inspector the appropriate area in the preview window above is highlighted. If you see a dark thick blue line or yellow line that relates to padding/margins. So then you know then you've found the correct area in the html that the padding is applied to.



#7 allanlove

allanlove

    Advanced Member

  • Members

  • 70 posts
  • LocationBanbury, UK
  • Framework Version:DMS Developer
  • Country: Country Flag

Posted 28 March 2013 - 09:34 AM

James, Danny

 

Thanks for all your help guys, I now have the header looking just right and I have learnt some stuff too!



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 March 2013 - 10:44 AM

No problem, happy to help.







Also tagged with one or more of these keywords: header, background