• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Different logo for Specific pages

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Different logo for Specific pages

This topic is: not resolved

Tagged: change, Logo

  • This topic has 4 replies, 4 voices, and was last updated 7 years, 8 months ago by Gandt.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 7, 2015 at 10:38 am #158681
    Jack
    Member

    Hi, I am trying to get the logos to load with a specific page. I want separate logos for the "Innovation", "Technology" & "Engineering" pages.

    I tried to just change the url for the image for the specific pages but this doesn't seem to be working.

    .page-id-8591 .header-image .site-header .title-area {
      background-image: url("http://sievecreative-dev.co.uk/redbourn/wp-content/uploads/2015/07/Redbourn-Innovation.png");
    }

    I'm clueless at PHP but was reading that it could be done that way and thats why I've come to you lovely people for some help and suggestions.

    Any help is greatly Appreciated.
    Many Thanks,
    Jack.

    http://sievecreative-dev.co.uk/redbourn/
    July 7, 2015 at 12:01 pm #158691
    Christoph
    Member

    Hi Jack,

    did you try this plugin?
    https://wordpress.org/plugins/genesis-custom-headers/


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    July 8, 2015 at 5:11 am #158765
    Jack
    Member

    Hi Christopher,

    Looking through the plugin i cant find a setting that would allow me to change the logo.
    If you could give me any guidance on how i could do that it would be a lot of help.

    Many Thanks,
    Jack.

    July 8, 2015 at 1:29 pm #158826
    Brad Dalton
    Participant

    You could try the WP Display Header plugin.


    Tutorials for StudioPress Themes.

    July 9, 2015 at 12:53 pm #158930
    Gandt
    Member

    Jack, if by logo you mean the one you currently have set to 'REDBOURN' on the top left of your screen, then the answer is simple. You want a different logo for each of your three pages:

    INNOVATION
    TECHNOLOGY
    ENGINEERING

    So, we must start by making sure each of these pages is loading a different class for the body or page. I prefer using body.
    This would mean the <body> element would thus look like:

    <body class="innovation">
    <body class="technology">
    <body class="engineering">

    To achieve this, if you don't already know how, go to your wp-admin dashboard, go to each of the individual pages in question (innovation, technology and engineering) and specify the custom class there:

    step by step guide to adding a custom class to a body element for a particular page

    Now that each of your pages has that specific class allocated in the body element, we can now target them independently via css without making a mess.

    You are currently using:

    .header-image .site-header .title-area {
      background-image: url("http://sievecreative-dev.co.uk/redbourn/wp-content/uploads/2015/07/Redbourn.png");
      background-position: center center;
      background-repeat: no-repeat;
      height: 60px;
      width: 222px;

    So you can add to this already existing css declaration with similar copies, like this:

    body.innovation .header-image .site-header .title-area {
    /* different background declaration tareting different image goes here */
    }
    body.technology .header-image .site-header .title-area {
    /* different background declaration tareting different image goes here */
    }
    body.engineering .header-image .site-header .title-area {
    /* different background declaration tareting different image goes here */
    }

    Hope this helps

    G

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble