Different Site Logo – Site Home & Blog

• 

  bradleygro · Member · Apr 24, 2018 at 5:06 am

  • Copy link
  • Add topic to favorites

  Hello!

  I am using the Pique theme for my wordpress website and would like to have a different version of my logo for my main website and for my blog. I would like to main site to stay the white logo and have a color version on the blog (which has a white header).

  Is this possible through CSS?

  https://teachmefrancais.com
  https://teachmefrancais.com/blog/

  Thank you!

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

• 

  baldfreud · Member · Apr 24, 2018 at 7:56 am

  • Copy link

  Hi,

  In order to change the color of the logo, you would have to do that using different software like Adobe Illustrator and have the logo saved in a vector format. You cannot change the color of the logo itself using CSS. CSS is a markup language and it controls the appearance of elements (written in HTML) of your website. A logo is a separate file thus it’s color cannot be changed using Cascading Style Sheets, what could be changed is how the logo appears on your site, meaning it’s position and size.

• 

  baldfreud · Member · Apr 24, 2018 at 8:07 am

  • Copy link

  As an alternative, you can change the color of the header for your blog. If you have access to the CSS panel, which is available on the Premium and Business plans on WordPress.com, you can paste the following code into the panel.

  #masthead {
      background-color: #2d2a26 !important;
  }

  The color value next to ‘#’ can be changed to any color you like, by searching for the right hex code here: http://www.color-hex.com/

  Hope this answers your question :-).

• 

  thesacredpath · Member · May 1, 2018 at 8:04 pm

  • Copy link

  @bradleygro, we can do this with CSS. To change the logo on the blog page and leave the logo as is on the home page and other pages, add the following CSS. I grabbed what looks like the logo you were wanting to use from your Media Library. If that is not the one you wanted to use, just replace the URL between the quote marks with the URL of the image you wish to use.

  .blog .site-branding .site-logo {
    visibility: hidden;
  }
  .blog .site-branding .site-logo-link {
    background: url('https://teachmefrancais833842605.files.wordpress.com/2018/05/thumbprint-color.png') no-repeat scroll center top / contain;
  }