Jump to content


Photo
- - - - -

How to change colour of header colum

header colour

Best Answer Danny , 13 September 2013 - 07:29 AM

Hi.

 

If you use the following code, your branding area will look like this:

 

 
#branding .content {
background-color: #33342E;
}
 
http://d.pr/i/hqj8
 
If you use this code instead, your branding area will look like this:
 
 

#branding .texture {
background-color: #33342E;
}

 
http://d.pr/i/NWKK
Go to the full post


  • Please log in to reply
10 replies to this topic

#1 laughingmom

laughingmom

    Newbie

  • Members
  • Pip
  • 8 posts
  • Country: Country Flag

Posted 06 September 2013 - 04:49 AM

Hello,

 

I LOVE your template. Absolutly everything I wanted to do with my new site I have acheived in just under an hour. The only item I can't figure out is how to change the header area (the area where my site title image name is) to match the footer colour. (I have enclosed my private in the works site url with my account as requested). You'll see my title image sits on the body background colour (cream colour). I want it to sit on a slate gray colour like the footer. I tried the settings in the tool you provide - but the only way I could get the colour behind the header title to change was to change the whole page.

 

For example, I want my header image to site on a backgorund colour similar to my current page: laughingmom.com.

 

How do I change the colour of the header (the colour behing my title image)?

 

Thank you.

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 September 2013 - 06:08 AM

Hi,

 

If you look at your site header in Chrome, you'll find the header edit icon on the left side.  When you edit that section, you'll see a field where the color can be changed by CSS. 

 

Check these instruction http://docs.pageline...on-area-styling



#3 laughingmom

laughingmom

    Newbie

  • Members
  • Pip
  • 8 posts
  • Country: Country Flag

Posted 07 September 2013 - 04:37 AM

I'm sorry, your answer sounds so easy, but I am not seeing it. I have gone to my site in CHROME but there is no edit option. If I go to the WP admin then it is just the same settings as before. What am I missing?



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 September 2013 - 09:07 PM

Okay, this isn't as difficult as one might think.

 

See the image below for guidance.

 

Click on the little pencil icon shown. When you do, the editing tools for the Header section will appear below the DMS toolbar.

 

Add a new, unique class for your header.  In this case, we'll call it my-header1.

Attached File  9-7-2013 4-59-43 PM.jpg   324.14KB   1 downloads

 

Next, we're going to add the color using CSS in Custom Code. 

You'll add something like this:

.my-header1 {

    background-color: #C00000;

}

 

Please note the color I selected (dark red) is for demonstration purposes only.  You should change it to the color you wish.

 

Since the columns are transparent by default, the background color of the header will show through them.



#5 laughingmom

laughingmom

    Newbie

  • Members
  • Pip
  • 8 posts
  • Country: Country Flag

Posted 13 September 2013 - 03:56 AM

Thank you. As I have Page Lines and not DMS I had to fiddle a bit as the image you provided is not an option I have. But you pointed me in the right direction with the code. Thank you.



#6 Danny

Danny

    Is Awesome!

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

Posted 13 September 2013 - 07:29 AM   Best Answer

Hi.

 

If you use the following code, your branding area will look like this:

 

 
#branding .content {
background-color: #33342E;
}
 
 
If you use this code instead, your branding area will look like this:
 
 

#branding .texture {
background-color: #33342E;
}

 


#7 laughingmom

laughingmom

    Newbie

  • Members
  • Pip
  • 8 posts
  • Country: Country Flag

Posted 13 September 2013 - 08:07 PM

Perfect. Thank you so much.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 September 2013 - 11:02 PM

Glad to hear Danny's code helped.  Your topic was posted under PageLines DMS.  You did not mention using PageLines Framework or PlatformPro. Apologies for my confusion.



#9 DanatTLFN

DanatTLFN

    Advanced Member

  • Members

  • 30 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 18 January 2014 - 02:33 AM

I hope that is OK to tailgate onto this conversation but what is the code for the footer section?

I am looking to change the color of just the footer area.

 

http://thelocalfilmnetwork.com/



#10 Danny

Danny

    Is Awesome!

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

Posted 19 January 2014 - 09:03 AM

@DanatTLFN

There is no content in your footer area so you can't add any background to it. The security button is outside of your footer, if you want a background color added to that button you will need to target the buttons class and add your own styling.

 

As this button isn't part of the PageLines product we can't provide support.



#11 DanatTLFN

DanatTLFN

    Advanced Member

  • Members

  • 30 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 07 March 2014 - 12:17 AM

@mention

 

Thank you for getting back to me!

 

I some how through the magic of blind clicking managed to achieve a black footer, so no worries. I think it was just a case of tweaking a few of the settings in the pallette section. 

 

Thanks again for the help, anyway.







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