Custom site header vis CSS for Oxygen Theme

  • Unknown's avatar
    palazzig · Member ·

    I am currently trying to create an alternative version of the blog style for a few selected pages via CSS. (The site is ‘white’ for most posts, but I’d like to be able to swap to a ‘dark’ look for a few posts)

    I have managed to change the background, font and link colors without problems so far using:

    .postid-1148 #page {
    background-color: #000000;
    color: #DDD
    }
    .postid-1148 .entry-title {
    color:#DDD
    }

    .postid-1148 .widgettitle {
    color:#DDD}

    .postid-1148 .widget ul li a {
    color:#DDD;
    }

    I have tried to find the class that would allow me to insert an url:(URL) to swap the header image file unsuccessfully.

    Anyone?

    Also, I have tried to change the Primary and Secondary Menus colors for a single post:

    .postid-1148 .menu-secondary, {
    background:#000;
    color:#FFF;

    but it seems the .postid does not seem to stick and the changes affect all posts and pages. Not as important for what I am trying to do, but I’d be interested in understanding why it skips the .postid.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, are you talking about the W(A/O)ndering Filmmaking header at the top of this post: http://waondering.com/2015/04/11/visual-style-cinematographers-on-cinematography-part-1/ ?

  • Unknown's avatar
    palazzig · Member ·

    Yes. Right now, I have found a work-around using a single logo that works with both themes. I am still curious if the file could be change using CSS.

    Re: the menus I have found a way for the .postid to work using:
    .menu-secondary li a

    To be honest, I have no idea what the “li a” stand for, but trial and error made it work.

  • Unknown's avatar
    thesacredpath · Member ·

    It is possible to have different header images on different page. I would need a link to the other image you wish to use and then where you want to use it to work out the CSS. Sometimes these get a bit tricky, but from looking at things, it looks like I can get it done

  • Unknown's avatar
    palazzig · Member ·

    Yes! It works. I had not realised that my new image was hidden behind the old header (assigned in the ‘customize’ menu).

    – I replaced the ‘old’ image in the customize menu with a transparent file of the same size, to create the extra space for the ‘new banner’.

    – I added the headers via CSS for all posts.

    .custom-header {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(‘FILE.URL’) no-repeat;
    width: 940px;
    height: 120px;
    }

    then change the URL on the ‘alternative posts’ using the above with a .postid

    The more I learn, the more I see the possibilities.

    Thank you looking into it. Much appreciated.

  • Unknown's avatar
    palazzig · Member ·

    It works fine for the Desktop version, but the image does not resize for the mobile versions.

    The two images I am trying to use are:
    https://giorgiopalazzi.files.wordpress.com/2015/03/waondering-banner2.jpg

    and

    I’m trying to place them in the same location the “Customise – Header Image” interface allows me to place my header. I suspect that is not .custom-header { background:} as it seems to place behind the Header.

    I’m trying a few more options, but some assistance would be appreciated.

  • Unknown's avatar
    thesacredpath · Member ·

    Since the colors of the text in the images are the same, what I would suggest is to redo those images and save them as PNG images with transparency (no background) and in that way, you upload and set one header image and because there is no background color on the image, it takes on the background image of whatever is behind it.

    Will that work for you? If so, you don’t have to worry about any CSS to accomplish it.

  • The topic ‘Custom site header vis CSS for Oxygen Theme’ is closed to new replies.