Prose – Add Thin Border Line to top of pages

[nubloggie]

I've managed to add a "top border" to my site with some trial-and-error css i figured out and added to my Custom CSS (I'm a CSS noob, btw...)

body {
		
border-top:10px solid #6799CE;
	
}

My question is - how do i get it to appear on all PAGES across my entire site? It's part of the site's color branding, but currently, it only seems to show up on POSTS, and not on PAGES...

Thanks in advance!

http://www.livingaha.com

[dev]

You'd want to put the CSS code in the #header, not the body... like:

#header {
border-top-color: #00F;
border-top-width: 5px;
border-top-style: solid;
}

http://www.NewMediaWebsiteDesign.com

[nubloggie]

thanks for taking the time to reply dev.

Unfourtunately it didn't work.... as you can see at https://www.dropbox.com/sh/bj7cb0ggzvvg2mi/ZH2ef5NsWq , the border is now only as wide as the header, and there's a space of white at the top.

Looks like if i go this route, I'll have to move the #header above the body/wrap, but that's a whole other level of hooks and css to make it responsive, which both elude me...

any ideas?
thanks again!

[dev]

This worked for me using Google Inspect Element.

#header {
background: url(http://livingaha.com/wp-content/uploads/2013/05/LivingAha-uncover-greatness31.jpg) no-repeat;
border-top-color: #00F;
border-top-width: 5px;
border-top-style: solid;
}

You have minify turned on. Suggest you turn it off if you want people to be able to see your CSS and help you.
http://jlongino.com/genesis-and-prose-updating-design-settings/

http://www.NewMediaWebsiteDesign.com

[nubloggie]

I still come up with the same thing..... strange.

my origional #body CSS looks the way i want it - i just need it to display on PAGES, and not just posts. Is there a POSTS stylsheet i could add the same code to?

Anyhow, i turned minify off, thanks for the tip.

Appreciate your help. Thanks.

[dev]

Well, all I see is a minified CSS in Chrome Inspect, so there is not much I can do to help.

When I paste the above code into Inspect Elements "header" area, it get a nice blue header line. Try it yourself.

I don't know the prose theme so maybe it uses different constructs than other SP offerings.

Maybe someone else who knows this theme can be of help.

[nubloggie]

Dev, thanks, but when I paste the above code in, i get a blue line at the top of my header image, but below my nav pane...

I'm looking for the same, full-length blue line that appears across the entire screen Here: http://www.livingaha.com
to appear also the same way here as well: http://livingaha.com/why-living-aha/

Any thoughts?: I beleive the minify css is off now....
thanks again.

[eamonmoriarty]

In style.css you have this:

.page {
border: none;
}

If you change it to:

.page
{
border-top:10px solid #6799CE;
}

I think that will work.

I'm not sure if adding it to your custom.css will work or not.

---

Eamon Moriarty
EM Dzine

[nubloggie]

Thanks eamonmoriarty it did work...sort of (I just added it to the style.css btw)

One strange issue i am having though - if you go now to
http://livingaha.com/why-living-aha/
you can see that it also added a top border above the page title. When i remove the CSS code you gave me, both the top Border and the short one above the page title dissapper, and when i add the CSS code, both Borders show up...

Any thoughts? could it have to do with the fact that i moved the nav menu above the wrap?

thanks for your help.

<?php
/** Do not remove this line. Edit functions below. */
/** Move primary nav menu */
remove_action( 'genesis_before_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav' );

[eamonmoriarty]

Try adding

#content .page 
{
border-top: 0px;
}

to your style.css

---

Eamon Moriarty
EM Dzine

[nubloggie]

that worked!
Thanks a ton!!

[Author]

Posts