-2

OK, this should be a simple question if you know the answer: I'm trying to "hack" the Twenty Eleven Wordpress theme and I'm wondering why a simple img I inserted before the "header-img" doesn't behave like the main header image.

Who or what is doing possible that responsive or fluid layout? Javascript? CSS? Where!!!

Why the header image scales down when you manually resize the browser window to be 400px wide?

Where should I hook or hardcode my "improvements" in this theme? Not only inserting my website's logotype, but also taking it into account when the user is browsing from a mobile device, etc. (ie, scaling, resizing, repositioning, etc.). Where are that functions located?

AstroCB
  • 12,337
  • 20
  • 57
  • 73
julifos
  • 142
  • 1
  • 2
  • 10

1 Answers1

1

Twenty Eleven has a header option, so you don't have to hack the theme, just go to Appearance > Header (or something like it), and change your image there.

Responsive images are usually done by putting max-width: 100% in the css.

I recommend you get Firebug for Firefox, or in Chrome, just right click, and choose Inspect Element. This will help you see what CSS is affecting elements.

Another think you may want to look into is child-themes, especially with themes that may be upgraded in the future (since if you upgrade the theme, your changes will be lost): http://codex.wordpress.org/Child_Themes

coopersita
  • 5,011
  • 3
  • 27
  • 48
  • Thanks! I'm not interested in "customizing" a theme, but creating a new one taking Twenty Eleven as a base, so just changing the header image is not an option. I must remove stuff and add new things... But I'd like to take advantage of existing features if possible. I'll take a look to the max-width:100% thingie! – julifos Sep 30 '12 at 00:20
  • Nopes, "max-width" not related. Comparing custom against factory css doesn't seem to throw extra info. Seems like some js is doing the business (subscribed to the "resize" event). Further investigations will follow.... – julifos Oct 01 '12 at 01:13
  • 1
    It's simpler than what I thought. I took a look, and it has #branding img { height: auto; margin-bottom: -7px; width: 100%; } The width:100% makes the image resize to the width of the parent. – coopersita Oct 01 '12 at 16:50
  • Nice, seems like width:100% mixed with height:auto did the trick, thanks! – julifos Oct 02 '12 at 20:11