Archived

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

  • 0

Header section colour


Question

Posted · Report post

Hi All,

Need some help - I am trying to apply a separate colour for the top section of a site i am working on. It needs to show white in top bar and stopping half way between navbar (like this site here http://www.energy-source.co.uk) and have my primary colour underneath covering everything else.

My first thought was to apply a background image and set it using % so it lowers in line with nav bar but i then found a article that stated using the Site Background Image (Optional)  as a 10 x 10 colour square tiled horizontally which i tried but couldn't get to work.

Any Help will be appreciated.

 

Regards,

Grant

Share this post


Link to post
Share on other sites

13 answers to this question

Posted · Report post

Hi,

 

The website you cited as an example uses a very simple, easy technique that you may apply, too.

 

They're using a plain, two color (black and white) graphic image and tiling it horizontally, set at 0 vertical height and 50 horizontal, with horizontal tiling.

 

View the example, and right click over the white space at the top (on the side) and select "View Background Image" (in Firefox). 

 

Make a similar image, or save that one, and change the colors (if desired) to your choices.  Then, go to Dashboard > PageLines > Site Options > Color Control.

 

Upload the image as your background image.  Change the settings, as described above. Save the settings.  If the rest of your site should be black in color (or any other shade, then make sure that color is set as the page or body background color. Your background image will then blend into the rest of the page color nicely, neatly and seamlessly.

Share this post


Link to post
Share on other sites

Posted · Report post

Grant,

 

Since the image should be repeated, minimizing speed and resources, don't make the image too big.  The image used on your example site is relatively small in dimensions and in file size. If you let the dark color of the image blend into the rest of the page or body background color, you don't need to make it 1200x800px. You could make it 100px wide and 400px high.

 

Looking forward to your report of how this works for you!

Share this post


Link to post
Share on other sites

Posted · Report post

Rob,

Ok - updates applied and works brilliant thankyou, i set the image size the same as there's at 100 wide x 500 high and had a guess at where the colour change started on the image.

Set the image as stated by you and all is good (not sure i am happy about colour i just matched off logo) incidentally i set the image to scroll in the last setting on the page and this seems to work ok.

 

One last thing or i dont no if i should start a new post, there is a gap between my feuture set and the nav bar do you know if there is a easy way to close this gap (so i cant see the colour between them ?) i you cant help with this no problem.

 

Thanks again  :D

Share this post


Link to post
Share on other sites

Posted · Report post

Grant,

 

The best way to close that gap is with CSS.  You can find the code using Firebug for Firefox, or Chrome's Inspection Tool.

 

You'll find there's some components like margin or padding.  These may be adjusted easily, provided you know what you're doing. This link will help you learn more about CSS and understand which changes can be made. This one will help you learn more about applying CSS changes.

 

I'm glad my suggestion worked and your site is developing very nicely! Well done.

Share this post


Link to post
Share on other sites

Posted · Report post

Rob,

Thanks for your input and time marked as solved.

Regards,

Grant

Share this post


Link to post
Share on other sites

Posted · Report post

Can you please post a link to your site?

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry its here http://www.tradewindowspreston.com/ i have only just started it so its a bit bland at the mo but wanted to get basics right before i put all content on. I am out for a 1 hour so if i don't reply back straight away i will when i return.

Regards,

Grant

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

The easiest way to achieve this affect would be to color the header area of your site using css. With css you can be a lot more specific and color independent sections within the site as well as adjusting their padding/margins and position.

 

If you've not used css before please check out http://support.pagelines.me/docs/customization/custom-css/ which gives you an overview of the process and the various tools we suggest you use to find the correct selectors.

 

An example of color the header section is below, all custom css code can be pasted into Pagelines>site options>custom code (the value below is for black, you can edit the color value to any you like.

 

 

#header {background: #00000;}
 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Thanks James B will try later and post back here my results.

Are you saying i can just paste the code #header {background: #00000;} into relevant pagelines section and that will work ?

I do have some custom code already in to display the phone number, but i am no coder so any help appreciated.

Thanks,

Grant

Share this post


Link to post
Share on other sites

Posted · Report post

Also should the code go into the CSS/LESS box or Header Scripts box ?

Regards,

Grant

Share this post


Link to post
Share on other sites

Posted · Report post

OK,

I tried the code (in the CSS/LESS) and it fills black in the header section, so probably i need to possible fill the Body section with my primary colour ? and leave the header as is also how do i align so it sits central to the navbar like the example page i showed.

Any help with the code will be appreciated as stated before i am no coder and have already had a look at the relevant docs.

Regards,

Grant

Share this post


Link to post
Share on other sites

Posted · Report post

OK,

I tried the code (in the CSS/LESS) and it fills black in the header section, so probably i need to possible fill the Body section with my primary colour ? and leave the header as is also how do i align so it sits central to the navbar like the example page i showed.

Any help with the code will be appreciated as stated before i am no coder and have already had a look at the relevant docs.

Regards,

Grant

I have since tried adding #body {background-color: #00000;} to the CSS/LESS file but with no joy.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

The website you cited as an example uses a very simple, easy technique that you may apply, too.

 

They're using a plain, two color (black and white) graphic image and tiling it horizontally, set at 0 vertical height and 50 horizontal, with horizontal tiling.

 

View the example, and right click over the white space at the top (on the side) and select "View Background Image" (in Firefox). 

 

Make a similar image, or save that one, and change the colors (if desired) to your choices.  Then, go to Dashboard > PageLines > Site Options > Color Control.

 

Upload the image as your background image.  Change the settings, as described above. Save the settings.  If the rest of your site should be black in color (or any other shade, then make sure that color is set as the page or body background color. Your background image will then blend into the rest of the page color nicely, neatly and seamlessly.

Thanks Rob,

I will create a two tone image (what pixel size do i need to make it eg 1200 x 800 or is that irrelevant) my initial thoughts was to do the colour with an image (see my first post) but i think i got side tracked looking around the forums.

thank you very much for your input i will try later and come back to this post to let you know how i get on.

Regards,

Grant

Share this post


Link to post
Share on other sites