Nedd CSS help changing logo from white to black in pages

• 

  simonava · Member · Nov 28, 2017 at 8:30 pm

  • Copy link
  • Add topic to favorites

  My Logo (letter S) is white on my home page as the background is grey but in my normal pages the background is white so it disappears and people can’t click on it to go back to ‘home’. So how can I set it up that in every other page other than my home page it switches to a black logo? Please help. New to CSS so not sure about it. thank you

  http://www.simonava.com is the page

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

• 

  avydun · Staff · Nov 28, 2017 at 8:34 pm

  • Copy link

  CSS cannot modify how an image looks.

  Your best shot would be changing your WordPress.com site’s background which you can do as mentioned on this guide. https://en.support.wordpress.com/themes/custom-backgrounds/

  Or, you can get a designer to change your logo text’s outline from white to black, and upload it here.

  I hope this helps clarify things. Feel free to get back if you have questions related to WordPress.com account and WordPress.com sites and I will be keen on helping you through it!

• 

  simonava · Member · Nov 28, 2017 at 8:38 pm

  • Copy link

  Thanks @strikebuys. I know it’s not able to change the color, but I saw on another wordpress website where the logo on home page is white and then it appears black in all other pages. I thought if I can upload both white and black logos I can use some code to do it that way. I might consider changing it to black but I wanted to keep it white as my menu and other titles are white on home page. Thanks anyways, I appreciate your help.

• 

  aprendiendoconmarx · Member · Nov 29, 2017 at 1:34 am

  • Copy link

  Hola…necesito ayuda para poder cambiar el color de la letra de las plantillas de wordpress….gracias

• 

  aprendiendoconmarx · Member · Nov 29, 2017 at 1:35 am

  • Copy link

  Hola…necesito ayuda para poder cambiar el color de la letra de las plantillas de wordpress….gracias

• 

  avydun · Staff · Nov 29, 2017 at 1:47 am

  • Copy link

  Can you share that WordPress site’s link, please? I will have a look and help further, simonava.

• 

  avydun · Staff · Nov 29, 2017 at 1:48 am

  • Copy link

  aprendiendoconmarx, please refrain from posting on other people’s threads.

  You can create your own thread for your questions. If you are posting in English, use this to create a new thread: https://en.forums.wordpress.com/

  If you are posting in non-English languages, you can use this page to create a thread: https://en.forums.wordpress.com/topic/forums-in-other-languages-not-english?replies=1

  Thanks.

• 

  simonava · Member · Nov 29, 2017 at 4:24 pm

  • Copy link

  @strikebuys my website is http://www.simonava.com

  I’ve changed it to black for the moment being but I would love to have it white on my home page.

  The reason I need it visible is because that’s realistically my ‘back to main page’ button as I’ve no button there. See what you think, I’ve made it black now.

• 

  thesacredpath · Member · Nov 30, 2017 at 9:35 pm

  • Copy link

  Hi @simonava, since you have changed the logo to black, what we can do is hide that logo image and insert the white one as a background element on the home page. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. I grabbed the URL of a white logo from your media library.

  .home .site-branding img {
    visibility: hidden;
  }
  .home .site-branding {
    background: url('https://bloggingsim.files.wordpress.com/2017/11/cropped-s2.png') no-repeat scroll center bottom / contain;
  }

• 

  simonava · Member · Dec 1, 2017 at 11:39 pm

  • Copy link

  that’s absolutely ideal, thanks so much @thesacredpath. Problem definitely solved!!
  Last question you might be able to help me with is I’m not sure what size I should have it in (the logo – S) so it sits neatly in the corner if I have it in compact mode, I feel like it’s oversized now and takes over … Or if I had it in normal mode so that it doesn’t go over the menu in desktop….

  again thanks a lot for getting back to me!

• 

  thesacredpath · Member · Dec 4, 2017 at 9:36 pm

  • Copy link

  Change the center bottom to center 20px in this CSS rule for the background declaration and the “contain to auto 120px so it looks like this and see what you think.

  .home .site-branding {
      background: url('https://bloggingsim.files.wordpress.com/2017/12/letter-s-simona.png') no-repeat scroll center 20px / auto 120px;
  }

  And then add this as well for the other pages (not home).

  @media screen and (max-width: 1190px) {
    header.site-header .custom-logo, header.site-header .retina-logo {
      max-width: 100px;
    }
  }