Prose – Add Thin Border Line to top of pages

Community Forums Forums Design Tips and Tricks Prose – Add Thin Border Line to top of pages

This topic is: resolved

This topic contains 10 replies, has 3 voices, and was last updated by  nubloggie 1 year, 3 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #48623

    nubloggie
    Participant
    Post count: 28

    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!

    • This topic was modified 1 year, 3 months ago by  nubloggie.
    • This topic was modified 1 year, 3 months ago by  nubloggie.
    http://www.livingaha.com
    #48630

    dev
    Participant
    Post count: 457

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

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

    http://www.NewMediaWebsiteDesign.com

    #48631

    nubloggie
    Participant
    Post count: 28

    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!

    • This reply was modified 1 year, 3 months ago by  nubloggie.
    • This reply was modified 1 year, 3 months ago by  nubloggie.
    #48656

    dev
    Participant
    Post count: 457

    This worked for me using Google Inspect Element.

    [css]
    #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;
    }
    [/css]

    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

    #48659

    nubloggie
    Participant
    Post count: 28

    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.

    #48663

    dev
    Participant
    Post count: 457

    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.

    #50757

    nubloggie
    Participant
    Post count: 28

    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.

    #50782

    eamonmoriarty
    Participant
    Post count: 231

    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

    • This reply was modified 1 year, 3 months ago by  eamonmoriarty.
    • This reply was modified 1 year, 3 months ago by  eamonmoriarty.
    • This reply was modified 1 year, 3 months ago by  eamonmoriarty.
    • This reply was modified 1 year, 3 months ago by  eamonmoriarty.
    #50787

    nubloggie
    Participant
    Post count: 28

    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' );
    #50797

    eamonmoriarty
    Participant
    Post count: 231

    Try adding

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

    to your style.css


    Eamon Moriarty
    EM Dzine

    • This reply was modified 1 year, 3 months ago by  eamonmoriarty.
    • This reply was modified 1 year, 3 months ago by  eamonmoriarty.
    #51124

    nubloggie
    Participant
    Post count: 28

    that worked!
    Thanks a ton!!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.