How to upload a logo into the chateau theme header?

• 

  asotocolon · Member · Apr 17, 2012 at 11:02 pm

  • Copy link
  • Add topic to favorites

  I need help inserting my logo to the header… I’ve read and seen many tutorials but I still don’t get it. I also don’t know anything about codes.

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

• 

  designsimply · Member · Apr 19, 2012 at 8:15 pm

  • Copy link

  Here is an example showing how to add a logo image to the left of the site title in the Chateau theme. You may be able to adjust the values here to get it working how you’d like:

  #main-title #site-title a {
  	background: url(http://s.wordpress.org/about/images/logo-blue/blue-s.png) no-repeat;
  	padding-left: 60px;
  	min-height: 50px;
  	padding-top: 5px
  }

  I used a WordPress logo as an example image. You should change out that image URL with an image you have uploaded to your media library and adjust the other numbers until you like how it looks.

• 

  asotocolon · Member · Apr 19, 2012 at 8:21 pm

  • Copy link

  I’m supposed to put this in the custom CSS stylesheet right? If so, I did it and replaced the url and it doesn’t show on my page :(

• 

  designsimply · Member · Apr 19, 2012 at 8:23 pm

  • Copy link

  You would want to put it in the Appearance → Custom Design → CSS page of a WordPress.com blog.

• 

  designsimply · Member · Apr 19, 2012 at 8:24 pm

  • Copy link

  The image you added is really big at 2550 x 3330 pixels:
  http://adrianasoto.files.wordpress.com/2012/04/le-bori-chef-sombra-1.png

  That’s why you’re not seeing it.

• 

  designsimply · Member · Apr 19, 2012 at 8:25 pm

  • Copy link

  If you make that images smaller by adding a query string, it becomes pretty hard to read:
  http://adrianasoto.files.wordpress.com/2012/04/le-bori-chef-sombra-1.png?h=50

  Do you have an image that is around 50 x 50 pixels that will work?

• 

  asotocolon · Member · Apr 19, 2012 at 8:33 pm

  • Copy link

  Yeah.. I resized it but it is too small! I guess I won’t have a logo, thanks a lot! You were very helpful!

• 

  designsimply · Member · Apr 19, 2012 at 8:34 pm

  • Copy link

  Cheers :)

• 

  asotocolon · Member · Apr 19, 2012 at 8:57 pm

  • Copy link

  I actually have another question. I want the sidebar, the posts, the header image, the about, home, and search to have a see-through white background. How can I do this?

• 

  designsimply · Member · Apr 19, 2012 at 11:01 pm

  • Copy link

  Give this a try:

  #page-inner {
  	background: #fff;
  	zoom: 1;
  	filter: alpha(opacity=90);
  	opacity: 0.9;
  }

• 

  asotocolon · Member · Apr 20, 2012 at 12:13 am

  • Copy link

  wow… this was great!! thank you so much!!! :)

• 

  asotocolon · Member · Apr 20, 2012 at 12:19 am

  • Copy link

  I’m having only one problem… the post images and header image are also a bit transparent…

• 

  designsimply · Member · Apr 21, 2012 at 12:01 pm

  • Copy link

  I thought that was how you wanted it. :)

  Earlier you said you wanted the header image included. If you want only the background itself to be partially transparent, you can do that with an RGBA color rule like this:

  #page-inner {
  	background: rgba(255,255,255,0.5);
  }

  Note that RGBA color transparency will not work in older versions of Internet Explorer, see http://caniuse.com/css3-colors

  However, your body background is currently light gray and the transparency for a white background over the top of a gray body color is really just a lighter gray and you can make the inner page lighter gray with a plain background color rule like this:

  #page-inner {
  	background: #fcfcfc;
  }

  If you wanted to add transparency back for some selected items, you can use the opacity rule. Here is an example showing how to make the search box in the header slightly transparent using the opacity rule:

  #search {
  	zoom: 1;
  	filter:alpha(opacity=90);
  	opacity:.9;
  }

  You can add other selectors in addition to “#search” if you’d like.