WordPress.org

Ready to get started?Download WordPress

Forums

Bushwick
[resolved] different headers for every page (12 posts)

  1. grachov
    Member
    Posted 5 months ago #

    Hello!

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

  2. 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.

  3. 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

  4. davidboelee
    Member
    Posted 4 months ago #

    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

  5. davidboelee
    Member
    Posted 4 months ago #

    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);
    }
  6. 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") }

  7. davidboelee
    Member
    Posted 4 months ago #

    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

  8. Andrew
    Forum Moderator
    Posted 4 months ago #

  9. davidboelee
    Member
    Posted 4 months ago #

    post deleted. asked a question too early... ;)

  10. schlgr
    Member
    Posted 1 month ago #

    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?

  11. 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.

  12. schlgr
    Member
    Posted 1 month ago #

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

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.