Jump to content
Sign in to follow this  
tradewindowspreston

Header section colour

Recommended Posts

tradewindowspreston    0
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 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
tradewindowspreston    0
tradewindowspreston

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
James B    436
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 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;}
 

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
tradewindowspreston    0
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

Share this post


Link to post
Share on other sites
tradewindowspreston    0
tradewindowspreston

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
tradewindowspreston    0
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

Share this post


Link to post
Share on other sites
tradewindowspreston    0
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.

Share this post


Link to post
Share on other sites
Rob    547
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tradewindowspreston    0
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

Share this post


Link to post
Share on other sites
Rob    547
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!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tradewindowspreston    0
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  :D

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tradewindowspreston    0
tradewindowspreston

Rob,

Thanks for your input and time marked as solved.

Regards,

Grant

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
    • JP
      By JP+
      Hello,
      How can you set the translations with platform5, the parts that are not in pages or posts? Texts and images…
    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
×