Need CSS help with Stretch Theme

Community Forums Forums General Discussion Need CSS help with Stretch Theme

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  SoZo 1 year, 8 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #12922

    harriet
    Participant
    Post count: 3

    I’m using the Stretch theme and want to place a logo on all pages.  The stretch header area is too small for my logo, so I want to do it on the body of each page.  Apart from the home page.

    Is there a css trick that will allow me to display an image on the content part of the page for All pages EXCEPT the home page?
    This is my website:

    http://www.thechelseacarclub.co.uk

    You will see on the home page, the logo is on there twice and I want to keep the big one for the home page only (ie remove the logo top right for the home page only)

    I’ve had a go at this and managed to get .home overide working on the home page, but not sure what to put to get the other pages to work.
    As below, .page doesnt work, removing .page puts everything back again inc home page cause it overrides the .home statement.

    What I need to know is what to put instead of ‘.page #content {‘ below.

    This is the standard stretch css code for the home page, and does what I want it to do.
    .home #content {
    background-color: rgba(0, 0, 0, 0.8);
    float: left;
    overflow: hidden;
    padding: 6% 8%;
    }

    Here I’m trying to put the logo on all the other pages except the Home page. Any ideas?
    /*the line below is what I’m trying to fix*/
    .page #content {
    background: url(/wp-content/uploads/2013/01/CCCLogo-blackborder70pc.png) no-repeat right top;
    background-color: rgba(0, 0, 0, 0.8);
    float: left;
    overflow: hidden;
    padding: 6% 8%;
    }

    #12928

    SoZo
    Moderator
    Post count: 1573

    Just use #content instead of .page #content and then put the ,home #content rule after the default #content rule


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #12975

    harriet
    Participant
    Post count: 3

    I’ve tried that too and it doesnt work, that is on right now in the css file and you can see the logo is still on the homepage.

    Any other ideas?

    #12976

    SoZo
    Moderator
    Post count: 1573

    Did you remove the background through .home #content, I.e. .home #content { background: none;


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #12978

    harriet
    Participant
    Post count: 3

    Genius – thankyou :-)

    #12979

    harriet
    Participant
    Post count: 3

    Apart from… it doesnt work on Chrome. IE and Firefox work fine.

    Is there a fix for Chrome?

    This is what I now have.

    #content {
    background: url(/wp-content/uploads/2013/01/CCCLogo-blackborder70pcv2.png) no-repeat right 10px top 10px;
    background-color: rgba(0, 0, 0, 0.8);
    float: left;
    overflow: hidden;
    padding: 6% 8%;
    }

    .home #content {
    background: none;
    background-color: rgba(0, 0, 0, 0.8);
    float: left;
    overflow: hidden;
    padding: 6% 8%;
    }

    #12990

    SoZo
    Moderator
    Post count: 1573

    I can’t think of any reason you wouldn’t see it in Chrome but the only place I am seeing an image is the home page and that one is inserted into the content not coming from the background.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

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

You must be logged in to reply to this topic.