13 replies to this topic

[tradewindowspreston]

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 

Please Login or Register to see this Hidden Content

) 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

[catrina]

Can you please post a link to your site?

[tradewindowspreston]

Sorry its here 

Please Login or Register to see this Hidden Content

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

[James B]

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

Please Login or Register to see this Hidden Content

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.

 

 

Please Login or Register to see this Hidden Content

[tradewindowspreston]

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

[tradewindowspreston]

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

Regards,

Grant

[tradewindowspreston]

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

[tradewindowspreston]

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.

[Rob]

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.

[tradewindowspreston]

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

[Rob]

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!

[tradewindowspreston]

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 

[Rob]

Grant,

 

The best way to close that gap is with CSS.  You can find the code using

Please Login or Register to see this Hidden Content

, 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.

Please Login or Register to see this Hidden Content

will help you learn more about CSS and understand which changes can be made. This one will help you learn more about

Please Login or Register to see this Hidden Content

.

 

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

[tradewindowspreston]

Rob,

Thanks for your input and time marked as solved.

Regards,

Grant