Support » Theme: Bushwick » different headers for every page

  • Resolved grachov

    (@grachov)


    Hello!

    How can I set different images of the header for every page?
    (not in random way)
    Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    The header is generated through CSS:

    .site-header {
        background: url("http://wp-themes.com/wp-content/themes/bushwick/img/default-header.jpg") no-repeat scroll center center / cover rgba(51, 71, 61, 0.05);
    }

    You could try overriding that on a per-page basis by adding some CSS for each page, like this, for example:

    .page-id-2 .site-header {
    background-image: url("http://yoursite/path/to/image/your-header.jpg");
    }

    Grab the page’s unique ID by viewing the body tag on the page source in a browser, or get it by looking at the URL in your browser’s address bar when editing the page in the dashboard.

    Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Of course, you’ll need to replace the image path with the real path to your image, this one is just for demo purposes:

    http://yoursite/path/to/image/your-header.jpg

    Hi,

    Thanks for this promising tip. However… I followed exactly your instructions and added this code to my custom css section:

    .page-id-393 .site-header {
    background-image: url("http://www.pyromancer.nl/wordpress/wp-content/gallery/headers/header_circleshow.jpg");
    }

    Something is happening after adding the code: now there is no header image at all anymore. When I remove the custom CSS, the general header image reappears.

    Checked imgage size is 1600 x 900 and I set the file permissions to 644.

    Can you give me a hint of what I am doing wrong?

    Cheers,

    David

    Couldn’t help digging a little bit further and I found the problem: the url should not be between “…” in the custom CSS to make this work. Also, the line needs a few extra arguments to work. Now it works. The code looks like:

    .page-id-393 .site-header {
    background: url(http://www.pyromancer.nl/wordpress/wp-content/gallery/headers/header_circleshow.jpg) no-repeat scroll center center / cover rgba(51, 71, 61, 0.05);
    }
    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    I’m not sure why your original CSS was not working, but I’m glad you got it fixed up.

    I just wanted to clarify these points in case anyone comes across this thread in the future:

    Also, the line needs a few extra arguments to work.

    background-image only takes a URL.

    background does take other optional arguments.

    Quote marks around the URL are fine, as you can see in the W3C specification:

    http://www.w3.org/TR/CSS21/syndata.html#uri

    The functional notation used to designate URIs in property values is “url()”, as in:

    body { background: url(“http://www.example.com/pinkish.png”) }

    Thanks for your reply, good to have this extra information, even though it works now.

    Makes me wonder: is there some documentation about objects like background-image and background? It would be great to have a list, to use while playing around with custom CSS. I searched for it, but couldn’t find it.

    Thanks,

    David

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    post deleted. asked a question too early… 😉

    hello, I can’t find … in my css?

    .site-header {
    background: url(“http://wp-themes.com/wp-content/themes/bushwick/img/default-header.jpg”) no-repeat scroll center center / cover rgba(51, 71, 61, 0.05);
    }

    instead I have:

    .site-header {
    background: rgba(51, 71, 61, 0.05);
    min-height: 100%;
    }

    .site-branding,
    .single .entry-header {
    bottom: 3.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 5%;
    max-width: 90%;
    padding: 1.5em;
    position: absolute;
    }

    .site-main,
    .single .entry-header {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 1.5em;
    width: 90%;
    }

    body:not(.archive):not(.search) .hentry:first-of-type + .entry-preview,
    .archive .entry-preview:first-of-type,
    .search .entry-preview:first-of-type {
    border-top: 1px solid rgba(51, 71, 61, 0.1);
    margin-top: 3em;
    padding-top: 3em;
    }

    where/how do I define specific header-images for specific pages?

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    where/how do I define specific header-images for specific pages?

    Featured images on pages (as opposed to just posts) is available in the newest release of Bushwick (1.2), which can be downloaded from here: http://wordpress.org/themes/download/bushwick.1.2.zip

    It’ll also be available through the in-dashboard auto-updater soon.

    Once you’ve updated the version, just click the “featured image” link on each page to upload a unique image for the header on that page.

    If you have any other questions, would you start a new thread? Thanks.

    cool! it works! 1000 thx! very well done! cheers

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘different headers for every page’ is closed to new replies.