CSS customization – widen theme template

• 

  atragnitz · Member · Dec 12, 2012 at 4:45 pm

  • Copy link
  • Add topic to favorites

  I am using MistyLook theme and I am trying to widen the entire template using CSS code. Anybody already have the code to do this so that I can copy and paste into my CSS editor? Sorry I am very new to this.

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

• 

  zandyring · Staff · Dec 13, 2012 at 2:29 pm

  • Copy link

  Hi there,

  It looks like you’ve changed your theme. The theme that you’ve picked is a standard 960px wide (very common for web sites) – do you still want to alter this?

  Cheers!

• 

  atragnitz · Member · Dec 13, 2012 at 2:37 pm

  • Copy link

  Hi thanks for getting back to me. Yes I did change my theme to one that will let me put a header image in the upper left hand corner. (Suburbia) The only problem now is that I am trying to resize this header image so it will allow my entire logo to fit. Can i do this through CSS or do I have to resize my logo somehow?

• 

  zandyring · Staff · Dec 13, 2012 at 3:42 pm

  • Copy link

  Hi there,

  For this theme, you will want to upload an image that is exactly 155px by 155px. What I would do if I didn’t want to crop before uploading is go over to the media library and upload the image there first. Then I would go to Dashboard > Appearance > Header and click to use an image from the media gallery, and then crop at that time.

  If that sounds like it’s a bit complex, feel free to upload the image to your media gallery and let me know and I can help you with the next steps :)

• 

  atragnitz · Member · Dec 13, 2012 at 3:49 pm

  • Copy link

  I have tried this but I guess my logo is to big because when I try to use this logo from my media gallery as the header image it asks me to crop it again and the crop space will only allow me to fit half of my logo. If you look at my page right now you will see how it is cropped.

  I was thinking If I could just widen the header image area using CSS then maybe it would work. Let me know what you think.

  Thanks!

• 

  zandyring · Staff · Dec 13, 2012 at 7:00 pm

  • Copy link

  You can, after a fashion.

  First, find out what size your image is (width). Then you’ll add that to this CSS:

  #header-image {
  width: 200px;
  }

  (You’ll want to change “200” to whatever your width actually is).

  Here’s the caveat, though – this will layer on TOP of anything it covers – not push it aside. But, if you want to use it instead of your title, you can certainly do that.

  You can hide your site title like this:

  #site-title {
  display: none;
  }

  Finally, you’ll want to upload a non-cropped version of your logo to use!

  Does all that make sense?