Editing CSS on the twenty eleven theme

• 

  kerrymurrayphotography · Member · Jan 10, 2012 at 5:56 pm

  • Copy link

  Hi designsimply

  Thanks so much, and sorry about not starting a new thread, I will do that next time.

  So I’ve put the code in and it takes away the Title but doesn’t actually show the image… when you hover the mouse over the area it shows as a link so there is something there, but you can’t see what it is… any ideas what I’ve done wrong?

  Thanks again!

• 

  designsimply · Member · Jan 10, 2012 at 6:34 pm

  • Copy link

  It’s because of a mistake in my code. :)

  Instead of this:

  url(http://piteiraphotography.files.wordpress.com/2011/12/piteira200x300.jpg?w=150&h=100) no-repeat;

  Use this:

  background: url(http://piteiraphotography.files.wordpress.com/2011/12/piteira200x300.jpg?w=150&h=100) no-repeat;

• 

  kerrymurrayphotography · Member · Jan 10, 2012 at 6:45 pm

  • Copy link

  Fabulous! Thank you! And then if I wanted to change the image dimensions I would just adjust the height and width accordingly?

  Thanks so much, it looks great!

• 

  designsimply · Member · Jan 10, 2012 at 6:46 pm

  • Copy link

  Yay! :)

  Exactly right about adjusting the height and width. You’d want to adjust the query string (this part “?w=150&h=100”) as well as the separate height and width settings.

• 

  kerrymurrayphotography · Member · Jan 10, 2012 at 6:50 pm

  • Copy link

  Ok, so I’ve made the logo a bit bigger, but now would I be able to reduce the amount of white space above the logo, maybe bring the search bar down a bit, to the same level as the logo, and have less white above?

  Thank you so much for your help!

• 

  designsimply · Member · Jan 10, 2012 at 7:28 pm

  • Copy link

  On http://piteiraphotography.com/ right now, the search bar and the logo are actually lined up, however it looks like they aren’t because there’s extra white space in the logo itself. You should create an update a logo without the extra white space and use that in your CSS.

  Use this to see what I mean about the white space in the image:

  #site-title a {
  border: 1px solid red;
  }

  Use this to adjust where on the page the site title and search form appear:

  #site-title {
  padding-top: 2em;
  }
  #branding #searchform {
  top: 2em;
  }

• 

  kerrymurrayphotography · Member · Jan 10, 2012 at 8:05 pm

  • Copy link

  You are a star, designsimply I could kiss you, thanks so much for all your help! And I promise I will start a new thread for any new questions… ;)

  Yay, I’m so happy! xxx

• 

  designsimply · Member · Jan 10, 2012 at 8:07 pm

  • Copy link

  Cheers! :)