Full-width header image in Imbalance 2

91 thoughts on “Full-width header image in Imbalance 2”

1. 

   This is great! I managed to get this far, but maybe you know, ’cause
   I couldn’t figure it out: how to make child pages?
   And even though most of the widgets must go into the footer, this theme is still tempting…

   Posted by Tess | January 20, 2012, 17:02
2. 

   Child pages? If you mean dropdowns, you’re asking for too much! Not possible without javascript.

   Posted by Panos | January 20, 2012, 18:49
3. 

   Just went with imbalance 2 (from Structure) because of the ability to modify the header to full width.
   http://berkshireonstage.com/

   The instructions were clear, easy to follow, so thanks to Panos for making this mosaic template more flexible than originally designed.

   And lets see if it increases the number of page views. The format offers a lot of posts to choose from.

   Posted by Larry Murray | January 21, 2012, 07:50
4. 

   “Because of the ability to modify the header to full width”? Very flattering, but I wouldn’t change a theme just because of that! The decisive factor is the other thing you mentioned: the format of the main page. It’s a veritable showcase page, and you can even see four posts before scrolling down. Structure looks more stylish, but the single featured post takes up too much space. Possible drawback in Imbalance: the lack of a sidebar.

   You need to correct the margin for the “Theatre” link. You have omitted the 14px, so there’s less space around that tab.

   And what about my red words of caution? I’m a Mac user, so I cannot check if all this shows up ok in Explorer. Have you?

   Posted by Panos | January 21, 2012, 09:10
5. 

   Thank you, Panos!! Would it be at all possible to have a background color for the header tabs and blog title? My header pic is so multicolored that none of the hex choices stand out legibly. Or maybe at least I could add a white strip somehow to the bottom of my header image before uploading it. More important that the tabs are visible than the title, actually.
   I really like the way my mirror blog’s home page looks now with Imbalance and the wide header image.(It’s private, I still have the Bueno theme on my public blog–same header image) Unfortunately there are other reasons that I might end up sticking with Bueno though, so don’t go to a lot of trouble to figure out an answer to my question…

   Posted by ingridcc | January 21, 2012, 11:30
6. 

   Sure it’s possible. Just tell me how exactly you’d like it to be: opaque or semi-transparent? with a border around it or not? One strip behind all the page tabs together or a separate strip for each tab?

   Posted by Panos | January 21, 2012, 16:04
7. 

   And I must repeat the question I asked Larry above: “What about my red words of caution?” Have you checked this in Explorer?

   Posted by Panos | January 21, 2012, 16:05
8. 

   Ok. I figured it out:
   http://tesstopics.wordpress.com/
   You can copy the code from a custom menu widget and when you paste it into a text widget:

   it works!!!

   Surprise?

   Posted by Tess | January 21, 2012, 19:03
9. 

   But I’ll wait to change themes: the only people I know who might use IE are work colleagues…

   Posted by Tess | January 21, 2012, 19:08
10. 

    Fixed the missing “14px” code, and have not been able to check it out yet in IE, will do so Monday. Have sent email to friends asking for observations and comments. Also found a couple of other glitches and resolved. I’m a 72 year old mac guy flying solo on this. Appreciate your help.

    The full width headline was indeed my deciding factor, but there is also this: more posts fit into less space on the imbalance 2 home page. And featured pics can be horizontal, vertical or square ups. My hunch is that there will be more page views as a result, and am watching the stats.

    Because almost all the themes use the date of posting to organize, it is difficult for me to juggle the many entries so that when an event has passed it can be archived. I do use the reading setting to cut off old stories, but that means I use stickies for still to come events, or re-date articles.

    With most templates, compromises are inevitable. Besides checking out IE there is also appearance on wireless devices (iPhones and iPads.) I do periodically check them, too, and what it is encouraging me to do is to write shorter, and embed jpgs and videos more.

    Posted by Larry Murray | January 21, 2012, 21:47
11. 

    @Tess:
    Biiig surprise! I was convinced you’d need the (javascript) onMouseover command. Didn’t occur to me that the CSS classes would be enough. Now I’ve got to figure out if and how I can make the submenu vertical instead of horizontal. Will probably need a heap of code. I’ll probably try it tomorrow, but won’t post anything before I hear from Larry or Ingrid or you about Explorer.

    @Larry: That was my point too – more posts into less space. As for wireless devices, I’m afraid I’ve got no experience at all.

    Posted by Panos | January 21, 2012, 22:42
12. 

    YES! ♪ ♪ ♥ ♥ (but hold-off on the fanfare until we know about IE)

    I thought of it because of my “idiot savant “mode: I was remembering something where “class” worked in the old tess expressed self-portrait, and emily dickinson daze…
    oh:
    Happy Days : “in the old style…”)

    Now I’ve got to figure out if and how I can make the submenu vertical instead of horizontal.

    hmmm. The menu is vertical: parent and child pages appear one above the other, but grandchild pages are horizontal flyouts.

    I didn’t fool with it much (until we know about IE) but was thinking that one could include several different (short vertical) menu widgets below the header. and still have space on the far right widget area for a search widget. and perhaps a subscribe widget.

    Are you seeing something different or am I mis-reading you? Safari puts the bullets to the far left (the code is essentially an unordered list) while Firefox makes a normal looking unordered list.

    Posted by Tess | January 22, 2012, 00:54
13. 

    Rats: you can take out the video: I only meant it as an off-topic aside sort of comment. to refer to ” in the old style”
    :-(

    Posted by Tess | January 22, 2012, 01:19
14. 

    No, I wasn’t seeing something different and you weren’t misreading me. It’s just that I thought I’ll take advantage of the code for the top menu, not the sidebar menu: no bullets, no visible child pages.

    Posted by Panos | January 22, 2012, 01:30
15. 

    I just checked my mirror blog in IE, at first sight your wide header pic and titles, tabs look perfect/ just the same as in mozilla/firefox, but then I noticed that a teeny tiny slice of the original header–that square shaped header image on the left of the page–is visible above the new banner header. Also the very top of my first vertically-stacked page tabs: the top bar of the capital T and the top of the lower case t and l in “Tutorials” show above the new header picture.
    Other than that it seems to work fine in IE–I don’t think it would bother me if a few people see it that way.

    Re the background strips for the tabs etc. Yay! I think slightly transparent would look cool, and I think a single strip for the tabs would be best, esp if I add a lot of tabs. Haven’t followed yet what you and Tess are cooking up about child pages…one of my tabs had several child pages… I could make them full-fledged tabs up top if necessary.

    Posted by ingridcc | January 22, 2012, 01:31
16. 

    sorry, posting again just so I can hit “follow comments”

    Posted by ingridcc | January 22, 2012, 01:33
17. 

    Thanks! Can you take a screenshot? I’m not sure I understand the part about the capital T etc. As for the original header image, you’re not supposed to load one.

    Posted by Panos | January 22, 2012, 01:37
18. 

    @panos,
    Sorry, I wish you were not on a different continent!
    What I have in that link is just what you originally posted except I subbed the code for a custom tabs. I think we are having a language problem?
    Or top menu is not what I’m thinking about impelmenting: a menu below the abs. postition header, there is still room on the far right 4th column for a couple of important widgets like “search” and “subscribe”
    Would screenshots help? or google chat? or what???
    even so, we don’t know what this looks like in IE. Nor do we know on mobile themes…

    Posted by Tess | January 22, 2012, 01:48
19. 

    You’re talking about an artificial top menu with subpages and I’m talking about an artificial top menu with subpages. But you used the sourcecode of a sidebar custom menu: I’ll use the sourcecode of a header custom menu. To be continued tomorrow!

    Posted by Panos | January 22, 2012, 02:05
20. 

    Oh! I didn’t think of taking down my original header image, of course, what a dunce.
    I’ll go and try to figure out the screenshot, might not get to it right away, have to rush out pretty soon.

    Posted by ingridcc | January 22, 2012, 02:31
21. 

    Ok, I deleted my original header image and took a screenshot–that was easier than I thought it would be. I uploaded it to flikr:
    http://www.flickr.com/photos/7374816@N02/6739131547/in/photostream

    The top of the letters are barely visible just to the left of center above the header pic.
    The upper/ first menu tab is: Tutorials. The top of the T, t, i, and l are peeking out a bit.

    Posted by ingridcc | January 22, 2012, 02:53
22. 

    a) Just as with the original header image, you need to remove the original page tabs as well: you missed my “preliminary step” b.

    b) You didn’t have to upload the screenshot to Flickr: you could have uploaded it to your blog via Media > Add New; then you simply copy the file URL and paste it here.

    c) Here’s a screenshot of your header with transparent strips:
    
    I don’t like it at all (and I hope you don’t either), so I’m not giving you the code!

    Posted by Panos | January 22, 2012, 11:46
23. 

    Preliminary step b! How could I miss that! Thanks for the tip on sharing photos, would never have occurred to me.
    I agree, my header looks like someone put strips of medical tape over it. Maybe if the strips of tape were transparent grey or black ? Or what would you suggest?
    At least now the words are legible, without the medical tape I couldn’t see most of them at all.

    Posted by ingridcc | January 22, 2012, 19:32
24. 

    Very apt description!
    Transparent grey or black or whatever won’t make it any different. I also tried one big strip with everything centered, but it’s not much better: just one huge bandaid instead of three narrow ones… Truth is your image doesn’t lend itself to having text in front of it, and it’s no coincidence that many themes have the blog title and the top menu outside the image area. I would suggest you try my solution B.

    Posted by Panos | January 22, 2012, 21:24
25. 

    @Tess: Worked it out (I think). You can give it a try if you like:
    http://textsnip.com/b11d9b

    Posted by Panos | January 22, 2012, 21:32
26. 

    Panos, if you mean solution B on the link you gave Tess, does that solution have the menu tabs below and no title in the header?
    2nd question: Under solution B, what if two of my tabs have no child pages and are not likely to get them?
    If I don’t have anything to fill in where it says “code 3 here repeatededly”, do I just leave that line out?
    If so is there any dangling code I then need to get out as well?
    Only one of my pages has child pages (a lot of them.)

    Posted by ingridcc | January 22, 2012, 23:28
27. 

    No no, I meant solution B in my post (blog title incorporated in the image, page tabs below image). The other comment says “@Tess”! After Tess checks the ways I elaborated on her discovery, I might add them to my post.

    Posted by Panos | January 23, 2012, 00:58
28. 

    @Panos,

    It’s up, but there is a bit of trouble with the second child page overlapping the first one (under main tab “Practice”).

    Also, maybe it’s operator error, but when I first saved the text widget, the code got stripped: just a bunch of divs left.
    I copied and pasted the same code again (from TextEdit), and the editor added quotation marks to every
    class = “” menu-item“” <>a href=”link/“” >name
    This was too strange, so I tried it again, and it’s what you see now.

    It looks good, but I must have some mistake in my code that I just can’t see…

    Posted by Tess | January 23, 2012, 02:10
29. 

    Oops, sorry! Although you did call the one in the post “Code B”, not Solution B. I’ll try that without incorporating a blog title–or, just make a tab for “Blog title home”. I definitely like the idea of having the menu tabs under the header.
    Reading over the first few comments again, I agree with Larry Murray that this nicer header is what might tip me over into Imbalance–its front page showcase is great but I really want to hit’em in the eye with my big fat header. There are topic-specific reasons why that header is important to my blog. Without it, the fun patchwork front page wasn’t quite enough. To me you have rescued this theme!

    Posted by ingridcc | January 23, 2012, 02:19
30. 

    @T:
    The stripping out is Textsnip’s fault: It added spaces after every closing bracket and I don’t know what else. The overlapping is my fault: I forgot one important detail. Try this:
    https://wpbtips.files.wordpress.com/2012/01/imbalancedropdowns.docx

    @I:
    How about tabs below image and blog title above image?
    Rescued the theme? Maybe; but maybe Explorer has a different opinion…

    Posted by Panos | January 23, 2012, 03:03
31. 

    @Panos
    Blog title above would be great! Do tabs below and title above squeeze the header/ make it shorter? Doesn’t matter, I would go for that either way.
    So IE still may have problems with it? I thought it looked fine…I mean, your header looked fine. The theme itself didn’t fit well in my screen in IE, it was too wide for my screen by an inch or so, which was annoying, but I assumed that was a problem IE had with the theme or wordpress as a whole, not your header…

    Posted by ingridcc | January 23, 2012, 03:31
32. 

    Image can be as high as you like it. (I would keep it short, to leave more space for the posts). How high do you want it to be?

    Posted by Panos | January 23, 2012, 03:39
33. 

    It’s fine the way you had it to begin with, or trimmed a tad but no more than a eighth of the height. You had it at 200 pixels before, would it be better if I trimmed down to 175 pixels?

    Posted by ingridcc | January 23, 2012, 04:09
34. 

    So… For you, the new Code C in my post!

    PS Forgot to ask: Which version of IE are you using?

    Posted by Panos | January 23, 2012, 12:06
35. 

    Look-y here:
    You can use the class=menu to add pictures to your menu! You can use it in a post—I could use it to show readers a picture of an unusual ingredient, or to make a silly joke about Mikey’s office…
    http://tesstopics.wordpress.com/2012/01/23/class-menu/

    Posted by Tess | January 23, 2012, 15:59
36. 

    Yeah, you have unlocked a treasure!
    The only drawback is that those classes aren’t named the same in all themes.

    Did my Word doc work ok?

    Posted by Panos | January 23, 2012, 16:59
37. 

    Yes, I’m guessing that the classes would have different names, but it’s an interesting discovery.

    Thank you for the Word Doc: very easy to read and to do the cut/paste procedure. I’ll have to play at transforming my real blog a little at a time (work takes up so much time).

    What do you think of the brown chopsticks?

    Posted by Tess | January 23, 2012, 17:30
38. 

    Just “interesting”? It changes the reply to whether we can make something show up upon hover – the kid will be furious!

    Chopsticks pic: gorgeous hashi, nice pic, would be better if the shadowy part at the top was missing, personally I don’t like brown.

    Posted by Panos | January 23, 2012, 18:15
39. 

    @Panos
    I use Firefox in general, just happen to still have IE also. It says Internet Explorer 9 (and something like update version 9.0.4?) All kinds of things seemed weird on the blog when I tried it with IE. –maybe I have something wrong in my settings, since I never use IE. Your header seemed fine, but a lot of other stuff was terrrible, mostly things not fitting into the screen.

    Posted by ingridcc | January 23, 2012, 19:08
40. 

    Yay! Thanks for my code c! rushing off to work, will try it out later!

    Posted by ingridcc | January 23, 2012, 19:10
41. 

    Well, interesting until we see it in IE, and on other themes: how many ways CSS could describe “class=menu.”

    But ok, I’ll say “The Thrill is (not) Gone”
    (though I s’pect only WP obsessives would describe this as exciting: husband was not impressed…)
    No, that’s not true: I can think of lots of reasons this would be a treat for WP bloggers.

    Thank you for the opinion.
    The hashi are from Tokyo Fish Market in Berkley CA (gift from husband)—its mate is black with orange lines.
    My beautiful red chopsticks went through the dishwasher and are now a pale memory.
    I do like the brown chopsticks. The shadow was supposed to be a place for the blog title. But you’re right: as it is, it’s not an easy design to read and too much drab color brown. A robin’s egg blue or a gold background—at any rate something simpler, clearer, more graphic. Thanks.

    Posted by Tess | January 23, 2012, 19:30
42. 

    @I:
    I’m anxious about IE because as a Mac user I cannot check it myself. IE9 is the least stupid version, but many users use IE7 or 8 (and some still use IE6, which is obsolete as obsolete can be).

    @T:
    Then I’m obsessive!
    And my favorite color is dark red.

    Posted by Panos | January 24, 2012, 04:51
43. 

    Hi Panos, I got the header up. First problem was that there were 3 instances of each of my menu tabs. one was below the header, stretched horizontally in the color I had picked. The other two were in the 2nd and 3rd columns of the original Imbalance themes header area, vertically stacked and in a black font. Like twins standing next to each other 2 identical columns of tabs

    I tried deselecting my saved menu from one of the two pull-downs in the theme location module. That got rid of one of the two sets of vertical menu tabs but not the other.

    heres a screenshot:
    [Link removed – P.]

    I’m thinking maybe it really is necessary to cover the original header area with the new header pic–so not have a title above the header picture? Let the picture go to the top of the screen?

    Posted by ingridcc | January 24, 2012, 14:50
44. 

    No, you just forgot my preliminary step 2 again!

    Once you correct this, tell me if you’re satisfied with the rest. For this version I increased the font size and the letter spacing of the blog title, to make it more prominent: but we can change these (as well as the font, although I’m not sure a different font would fit).

    Posted by Panos | January 24, 2012, 15:38
45. 

    Panos I SWEAR I didn’t forget step 2!!! I must have done it wrong…

    I admit that I truly didn’t see what you called the “cross” at first (I would call it a plus-sign) and in my first attempt I used the first option to install a menu. Then I DID see the “cross”, so I made a menu there and deleted the first one. Very carefully, I thought. In both menus the pages were all the same, so hard for me to tell the difference between them. Other than they had different names.

    OH, that means I did delete the first one because the only menu listed now is named “loop braiding info” which is what I named the second menu (i’m 99.9% sure…cant remember what the first name was but it was shorter)
    Given that I screwed up at first, what should I have done differently???
    –Ingrid

    Posted by ingridcc | January 24, 2012, 20:26
46. 

    @Tess
    Tokyo Fish Mkt is amazing! and the nicest people…

    Posted by ingridcc | January 24, 2012, 20:31
47. 

    Ok I tried again, went to the plus sign, added a new menu, same pages as my previous one except that I named the home page a different name so I could see which menu was which. (The home page is a custom link).

    Result was screenshot #2. I had forgotten to change the name of my homepage from loop braiding home to lo0pylou home in the widget:
    [Link removed – P.]

    After changing the pagename in the widget the result is screenshot #3:
    [Link removed – P.]

    The anomalous color of the Home tab at the top of the page in both shots is probably the color of my custom Imbalance theme but also might be the first HEX choice I tried before switching to burgundy. The two colors were very close. But I don’t see that hex code in my widget anywhere, it’s all changed to this burgundy, something like #8000 or 80000.

    BTW none of the apparent upper menu tabs are functional links, even the teal one for “home”. Only the lower horizontal menu tabs are functional links.

    (Sorry to be making so much work for you!)

    Posted by ingridcc | January 24, 2012, 21:14
48. 

    a) Plus sign: you’re right, that’s more apt – I changed cross to plus sign in the post.

    b) You misunderstood: my ps2 says click to add a menu, give it a name, click Save Menu – it doesn’t say add pages! You create and save a menu without adding anything to it, because the whole point is to remove the regular top menu.

    Posted by Panos | January 24, 2012, 21:43
49. 

    @Panos

    Finally got to see my Imbalance 2 themed site on a PC with Windows 7 and saw some minor variations. Peeking from behind the header were a few letters of the site name which I went back and removed. The library computer I used did initially cut off an inch or two of the fourth column, but it was easy enough to fix by going to full screen or grabbing the resizing tab on the lower right corner. It is not uncommon even with Safari, Firefox.

    The viewing “panels” that reverse the type as you run the mouse over the posts seemed to work sporadically with IE; the left column was reliable, the other three sometimes or not at all.

    My opinion is that these are small enough quirks so I am letting things stand. Also, switching from Structure, I lost the automatic “read more” that was appended to the end of each posts snippet on the home page. So I have redone the copy of the latest posts to include this. Some may think that when the type reverses, it is ready to click, but the text is not clickable, just the picture and the headline. I am also stating that people should click the image to make it idiot proof.

    Another blogger (older) noted that there was so many items on the page and it was all in small type so he didn’t know where to look first. That is what prompted me to add what I am calling “superheadings” to the photos using photoshop. With the 1, 2 or 3 word super headline and customizing the snippet as I prepare a story the end result is something that I think will get more readers. Time will tell.

    I have also changed the original colors some to complete the custom look. http://berkshireonstage.com

    Larry

    Posted by Larry Murray | January 24, 2012, 22:27
50. 

    All –

    I meant to say it is not uncommon for a few websites to expand beyond the screen regardless of which browser you use, not just IE. I think most people know how to adjust things.

    L

    Posted by Larry Murray | January 24, 2012, 22:30
51. 

    Doh! I assumed since I was clicking “add menu” I would then add a menu! Maybe you should add that info in for dunces like me? something like
    “Do not add any pages or links to this “menu”, you are creating a blank menu area, not a real menu.”
    Thank you for steering me through this, it looks so good now! Except for my featured image thumbnails, have to put in better ones.)
    

    I also want to have at least the first “row” of posts (so maybe all of them) show the featured image below the text instead of above, since it looks a little too image-busy this way with all the braids in my header. I’ve done that before by embedding a thumbnail into the excerpt box instead of actually using a featured image, that worked in Bueno.

    Thanks a million for your close-to-a-million answers and fixes…
    (will I be able to remove those links to my screenshots at some point? Vanity– I am still not satisfied with the way my posts look.)

    Posted by ingridcc | January 24, 2012, 22:37
52. 

    @Larry, thanks I figured it might just be my settings, but not worth it to me to fix them since I don’t ever use IE…
    Your blog is stunning, btw!

    Posted by ingridcc | January 24, 2012, 22:48
53. 

    @L:
    Thanks for the report! IE is a lousy browser in general, but for this post I only needed to make sure my workaround shows up ok in IE.
    A complaint: the Just Posted widget looks out of place there…

    @I:
    You’re welcome!
    Want me to remove the links to the screenshots?

    Posted by Panos | January 25, 2012, 04:13
54. 

    Yes, please!

    Posted by ingridcc | January 25, 2012, 05:09
55. 

    P:

    I’m anxious about IE because as a Mac user I cannot check it myself. IE9 is the least stupid version, but many users use IE7 or 8 (and some still use IE6, which is obsolete as obsolete can be).

    @T:
    Then I’m obsessive!
    And my favorite color is dark red.

    Yes, I understand about the IE problem. And yes, most folk wouldn’t be so obsessive as you and I are, and that is okay—and yes of course, it is clear that you like dark red, especially displayed with the black on your gravatar: very hot, as I’ve told you before (lively, good design with the two colors displayed together at their best. But not necessarily so effective on their own… iMO LOL ≥^!^≤)

    At any rate:
    I’ve got a couple of responses from my co-workers who can use IE.

    Charlie made comments on the test blog itself. He often brings his computer in to the office, but not today so I couldn’t see for myself
    http://tesstopics.wordpress.com/2012/01/23/class-menu/

    Liz says:

    the chopsticks header is maybe a bit on the narrow side but otherwise it looks good.
    it looks like a nice quality of picture. there is a lot of white space between the header and the rest of the post–is that so you have room for more subject lines or something beneath it later on?

    and

    hey Tess–when I move the cursor over “Mikey in the cupboard” it lets me click on it and I get a bigger photo–but when I move the cursor over “Mikey’s office” I can only see a thumbnail of the picture but it does not let me enlarge the photo.

    at the top I only see Nuit Blanche and “practice” (I thought when you showed it to me there were more items listed at the top?).

    I hope this gobbly gook I’m saying helps at all.

    we have the IE 9 version installed right now.

    My brothers who use IE at their jobs can’t respond for security reasons.

    My best friend has no real knowledge about which browser she uses (I’m pretty sure it is a version of IE) will take some time consulting her kids…

    well.

    Timethief has given me a link for something online to test out how various browsers work, and I used it a few times some time ago, but it’s late for me and I can’t find the bookmark.

    Posted by Tess | January 25, 2012, 05:32
56. 

    I wonder if this little trick/gift works only in imbalance? I tried to make it work in z-bench and chateau with no luck? have you investigated other themes? Or maybe I am just having a brain freeze??? sometimes I’m “smart” about something and then just can’t >>>>>>>>

    Posted by Tess | January 25, 2012, 05:38
57. 

    See? That’s what I always fear about IE: Charlie’s “no [e]ffect”.

    I had tried that online tool, but it was terribly slow.

    No, since the trick relies on coding for unordered lists, it will work in all themes that support a top menu. But, as I said in a previous comment, you need different names for the classes. For example, the main one in Imbalance is “menu” while in zBench it’s “nav sf-menu”. Plus you need different additional inline CSS in each theme to change the look (for instance, get rid of the grey bg in zBench). So I’m afraid I can’t make a post out of this…

    Posted by Panos | January 25, 2012, 11:13
58. 

    Too bad, but you’re right that you cannot make a post about this: its (a)ffect would make you insane. So my comment that it’s interesting is appropriate.

    This concerns me (quote from Liz who is downloaded IE9 because I asked about that) because it seems to indicate the top menu navigation won’t work properly:

    at the top I only see Nuit Blanche and “practice” (I thought when you showed it to me there were more items listed at the top?).

    She should be seeing the sub-pages “Poems” and “emily d” and “hello.”

    BTW, I still have a mental block about getting it to work in Chateau—but as that is a “work” blog it’s just as well not to introduce problems there. LOL: my brain sometimes just doesn’t work… My personal blog? guess I’ll have to decide how to handle this nifty trick. Maybe I’ll copy your graphic of the Firefox chewing up the big (I)E…

    Posted by Tess | January 25, 2012, 17:45
59. 

    Clear explanations, amazing results,
    thank you !
    a WordPress complete newbie

    Posted by cenergetica | January 25, 2012, 22:19
60. 

    Hi there Panos,

    First off thanks so much for writing this post! It is so helpful.

    I have a question. Can I use your code for the full-width banner and centered links underneath using a banner image that is larger than 960×170 px? I already have a banner made that is 1295×452 px. Is it possible to just change the size values and margin space in your code to accommodate this?

    Thanks so much for your help,
    Silvi

    Posted by Big Sis Little Dish | February 4, 2012, 05:40
61. 

    Hi,
    I’m afraid your question isn’t clear: you mean change the code to display that image in actual size, or change the code to downsize it to 960?

    Posted by Panos | February 4, 2012, 06:31
62. 

    I mean change the code to display the image at its actual size.

    Cheers,
    Silvi

    Posted by Big Sis Little Dish | February 4, 2012, 07:47
63. 

    Easy, but very bad. First, an image that stretches 167px past each side of the content is just wrong design. See for yourself:
    
    You’d really like something like this?

    Second, suppose you do impose such a wide (centered) image. Most users’ screens are narrower than 1295: for those users, the image will start at the top left corner of the browser window and displace the content to the right or even send the fourth column outside the window.

    Third, the height of the image is also excessive. For users with lower resolution screens, the image will take up practically the whole of the browser window. Your blog front is supposed to showcase your latest posts: the larger the height of the header image, the worse for your posts, and the less user-friendly for returning visitors. No theme has such a huge header image: the largest one is Adventure Journal, 360px high, and again that’s an isolated case. Compare:
    https://wpbtips.wordpress.com/2009/03/24/header-images/

    Posted by Panos | February 4, 2012, 11:12
64. 

    Good points well made. Ah, so is the 960 width based off of how wide that fixed width setting for the page content is? That’s very useful to know. I could easily scale down the banner. It’s the aspect ratio that I’d like to maintain more than the exact size of the banner I currently have.

    So I’m looking at your code again. Could I just use it as it is if I scale my image down to 960 width? I don’t see anywhere that describes the height of the banner image there. Is that correct?

    Thanks so much for taking the time,
    Silvi

    Posted by Big Sis Little Dish | February 4, 2012, 11:59
65. 

    Yes of course, 960 is the width of the fixed-width version of the theme
    Yes, you need to scale down the image to that width.
    And yes, you’ll use the code just as it is: when you insert an image in real size you don’t specify the dimensions. (My code only specifies a min-width for the image, which is a different story: since the theme has a fluid option as well, its header is designed to shrink, so min-width is there to prevent that.)

    Posted by Panos | February 4, 2012, 12:21
66. 

    Cool. Thanks for helping me get my head wrapped around this! I’ll be sure to link back once we’ve made the switch so you can check it out :)

    Cheers,
    Silvi

    Posted by Big Sis Little Dish | February 4, 2012, 23:51
67. 

    You’re welcome, and yes I’d like to see the result!

    Posted by Panos | February 5, 2012, 03:57
68. 

    Hi Panos,

    Alright, we’ve made the switch! It’s not 100% sorted at this point, but you can get a good idea as it is. http://bigsislittledish.com/

    Thanks again. It’s awesome that you made this blog post.

    Silvi

    Posted by Big Sis Little Dish | February 14, 2012, 12:28
69. 

    Hi Panos,

    Thank you more and more! I’ve also made the switch to Imbalance. What do you think?

    Posted by Tess | February 15, 2012, 17:14
70. 

    Thanks Silvi.
    Split image very reasonable!
    Personally I wouldn’t put the search box up there.

    Posted by Panos | February 15, 2012, 22:11
71. 

    If you like the unconventional look, Tess, I think it fits your subject matter very well: it’s like a table full of dishes (while the conventional main page of a blog is like a conveyor belt you operate manually so that each dish will pass in front of you). And the framed rectangles perhaps look a bit like Japanese scrolls.

    Remarks/suggestions, from top to bottom (you’re probably aware of all of them):
    • Where’s the blog title?
    • The quality of the header image is bad: looks like an image scanned without descreening.
    • I’d make the top menu links colored. And I wouldn’t put the RSS links in the header area.
    • Too much space below the top menu. I guess you need to increase the negative margin in the header code.
    • The vertical stripe at the right isn’t fixed horizontally. Where do you want to be?
    • I love the dark red hover color, but maybe it’s too aggressive for your blog. I’d probably use a paler color.
    • The various bg colors and border colors give enough variety. I wouldn’t extend that to the thickness of the borders: I would make them all the same (2px or 3px solid), and only change that to mark non recipe posts (as you’ve done for the “Happy New Year” post).
    • Several frames need more top padding, and several thumbnails need to have their alignment set to none instead of left.
    • Apparently the designer thought you’d only add a couple of short footer widgets. Designer forgot there’s no sidebar… I’d try to fill the first and second column. Using position:relative;right:500px; will send the content of a text widget from column 3 to 1 or 4 to 2. (With the usual questionmark: will IE display it?)

    Posted by Panos | February 15, 2012, 22:14
72. 

    Oh curse. My camera is broken so that is why the header image looks so out of focus. I didn’t think it looked so obvious, but of course that is me trying to look on the bright side as usual. right? I’ll have to buy a new one. I will asap… I really knew that, so I didn’t bother putting the title of the blog into the image.

    And what do you mean by unconventional? You are right, I’m aware. It looks sloppy with all my mixed up colors on each post (those are my beloved excerpts…so the border codes are already included from my past theme choices)

    You made a gallant description: a table full of dishes, but yes it doesn’t look good. I only wanted a theme to highlight more posts at once. This theme, it doesn’t look bad, or uninviting (if you like the way a table looks at the end of a party), but it is “different.” Is that what you mean?

    Please hold off on spending your time helping with the half-used footer widget area.

    And please know I appreciate your honest comments. I value your opinions. The experiments and discoveries I’ve made with this theme have been very interesting/engaging, but perhaps it is not right for my blog. I’ll have to re-evaluate the change.

    This theme can use “featured images” so maybe it would not be bad to just change the more recent posts to that option: no odd background colors, not variations of borders etc. so it wouldn’t look so much like the morning after a big party. dunno right now.

    Do you agree?

    Posted by Tess | February 16, 2012, 07:17
73. 

    Yes, I meant “different”: by “unconventional look” I meant the unconventional layout of the page; and instead of “conventional main page of a blog” I should have written “main page of a conventional blog”.

    I didn’t say it looks sloppy or bad overall: The only thing I really don’t like is the variety of border styles. When you scroll down from a post to the next, the variety is pleasant; when you see forty of them together it’s excessive. I wouldn’t go so far as to make all the posts uniform, I’d simply make all the borders same thickness same style. Featured images to each post would also look nice (that’s what the theme is designed for), but your trademark coloring makes your blog unique. Let me see some of the posts with featured images and I’ll tell you what I prefer.

    Posted by Panos | February 17, 2012, 02:14
74. 

    Allright, alright—understood about the “unconventional look.” One goal for switching themes is to encourage readers to click on more posts, so it does suit my topic to display lots of possibilities… The downside is that it’s now clear I’ve made so very few recent posts…

    No, you didn’t say it looks sloppy, but I think it looks like “the morning after” a hard party—your comment made me re-evaluate what’s there.

    At any rate, I changed a few posts using the “featured image” feature of the theme and that helps make it look neater, but it displays my hidden anti-reblogging link back to my site. Also, look at the category link displayed as a post under the Ebi Chili post—I have no idea how that appeared when I made the featured image for that post??? (multi-tasking: talking to hubby, eating dinner, and listening to a book on CD) And I don’t know how to get rid of it.

    So I also updated some posts to remove the borders from the excerpts. (load more to see) I should make the excerpt pics centered and/or a bit wider. That is easier than adding featured images!
    It looks better, I think. Without any borders at all: most of my overly colorful posts have pastel backgrounds and sans borders they look less like a dog’s dinner displayed together on this theme IMO.

    I changed the color of the highlight to match the “Japanese Recipes” background image. Nice but some oddness. I can live with that white text on some of the excerpts.

    Love that pair of chopsticks, hate shopping (though I must) for anything: even a new camera. Will find a friend to take a better pic for the header in the meantime…

    As for the footer, yes. The theme should not have so much wasted screen space: I hope to be able to do something with that and any advise would be welcome.

    I’m afraid this whole bunch of stuff is outside of what your blog is intended for, but I am, as always, grateful to you for your help and innovations.

    Posted by Tess | February 17, 2012, 18:56
75. 

    The “category link displayed as a post” is a titleless and textless post: it’s the one with the SOPA video.

    “footer […] any advise would be welcome”. I did that! Send your text widgets to column 1 or 2 by enclosing their content in a div position:relative;right:500px;.

    Now, re the main question: I prefer the frames. The featured images make it look like any other blog wearing the same theme, the overall effect is a bit cold, and the text of each post is almost like a separate post. Your frames make the page livelier and more interesting, and they bind image and text together.

    Posted by Panos | February 17, 2012, 20:00
76. 

    Hi,

    Thank you for this post! It is very helpful Maybe I’m missing something, but I’m using Imbalance 2, but under widgets, it says: The theme you are currently using isn’t widget-aware, meaning that it has no sidebars that you are able to change.

    I’m not super comfortable changing the code to make my theme widget aware, because it seems more complicated… (http://codex.wordpress.org/Widgetizing_Themes). Do I have to make the theme widget aware in order to give it a header image?

    Thanks!

    Posted by Rachel | February 17, 2012, 21:08
77. 

    Hi,
    But sorry, I can’t help. What you’re missing is point 1 here:
    https://wpbtips.wordpress.com/comment-guidelines/

    Posted by Panos | February 18, 2012, 01:55
78. 

    P~~

    Again, thank you for your help, time, and advice.

    …have done some work on getting my blog’s theme switched to Imbalance, and note that the unconventional front page with so many excerpts looks better as you suggested with the same width borders on each one. (only done for a year or so… enough for readers to become accustomed to the “load more” feature, I hope for now)

    Still a sort of dogs’ breakfast sloppy because the different lengths of the posts goes against my natural tendency to have everything under my own control…though at the same time I love finding random discoveries, thoughts, visuals, serendipity… No mind.

    My goal was to display many excerpts on the front page to encourage readers to look at more posts. It’s early daze but seems to be working. ???

    But something is strange in the code on Safari. Could be one of my posts? Could be the header code? I’d expect problems in IE. FireFox looks great. But the horizontal scroll thingy (technical term) appears at the bottom on Safari so the posts seem to have something to the right, though I don’t find anything there. Is that because of my background image? Bad code in a post. ???

    One other fluke I noticed with Imbalance is that there is no easy link to an individual comment. I’ve not noticed this on other themes! But have not experimented in my test blogs (them being private). I can find a link to a specific comment (firebug??? or something) but that seems to me a bug. Why should a person have to go through tricks to link to a wp.com comment?

    Also, I put in a hover color for the front page posts: a nice pastel. But didn’t take into account that the hover color apparently applies to all links. My pastel color is too light to be significant.

    Answer or not at your leisure: work is keeping me busy for a bit…

    ~~T

    Posted by Tess | February 22, 2012, 05:56
79. 

    The different lengths of the posts and the way they interlock is one of the distinguishing features of the theme (its CSS aptly calls it “masonry”). I don’t find it sloppy, but if you don’t like it then you need Suburbia instead of Imbalance.

    Horizontal scroll thingy? You mean the scrollbar at the bottom of the page? I don’t see it except if I drag the window to make it narrower than the theme, and I’m seeing no difference between Safari and Firefox. What’s your screen resolution? I remember it’s lower than mine.

    No easy link to an individual comment. Right: the date should be the link – you should report that.

    Sorry, I’m to blame for the hover color: hadn’t noticed the option applies to link color as well. So you do need a bold one. (Of course you would be able to set two different colors if you had the Custom Design upgrade. I wonder how long you’ll keep resisting that temptation.)

    Posted by Panos | February 22, 2012, 07:44
80. 

    1440 x 900 res

    But there is something wrong with my Safari. I can’t use “Top Sites” anymore without it crashing every time—I was going to ask when I was at the Apple Store with my so-soon-elderly computer, but they were so busy, and I was so happy just to have the laptop alive again, that I forgot. Could be the bottom horizontal scroll bar is connected to that problem… You see no difference between Safari and Firefox (?) while I see the footer widget adjustments out of sync both horizontally and vertically.

    God knows what IE folk see. If there is a God, then IE people will still read my blog. Right?

    As for the sloppy, my husband sometimes says that I’m a bit high on the autism scale: If it were up to me, then the world would be arranged neatly like equilateral triangles or oranges in a box. Like clocks. One could look at life from various angles while everything remained orderly, regular, just as expected.

    At the same time I enjoy the odd juxtapositions of things out of order, and times and numbers and meanings. Superstitions. Masonry is an apt description of this Imbalance theme. Like the stonework on my fireplaces and the front of my house: apparently random but in fact logical. I’m in conflict with myself: note the silly asymmetrical background image I use!!!

    As for the very pale hover color, my friends and acquaintances say it is okay. But I think they are not really looking. Only being polite…

    Its the middle of my work week and blog will have to wait unless I steal time…

    Posted by Tess | February 22, 2012, 14:27
81. 

    1440 means the issue isn’t the width of the theme.

    Safari: a) Go to http://www.apple.com/safari/ and make sure you’ve got the latest version that’s compatible with your OS. b) Select Reset Safari from the Safari menu, tick all the options except saved names, passwords and auto-fill text, click Reset.

    ” Footer widget adjustments out of sync both horizontally and vertically”. What does that mean? Screenshot please!

    “God knows what IE folk see.” To paraphrase a viola joke, that’s why IE is called a divine browser…

    Pale hover color is excellent; it just doesn’t work as a link color. Perhaps you could post in the Themes forum and suggest that they turn the color option into two separate options. Matt has no problem with options if they don’t mean less money for him.

    Posted by Panos | February 22, 2012, 20:32
82. 

    When I went to take a screenshot, I opened Safari and the vertical oddness with the footer text widget was gone: they are there just like in Firefox, maybe a few px off. But the horizontal scroll bar remains so it’s as if there is something to the far right. ?

    Then I took a look at my versions: OS 10.5.8 and Safari 5.0.6. Perhaps that is not compatible with Leopard? Anyway, Safari crashed out again so no option to reset it. It won’t load at all…

    I have posted and reported the problem with the comment link… Maybe I’ll post an Idea Forum topic about the hover cover on Imbalance. Or a suggestion in the Themes Forum.

    I’ll get around to changing the pale hover/link color: maybe something medium dark. As for buying design upgrade: no. I wouldn’t know how to use it.

    “God knows what IE folk see.” To paraphrase a viola joke, that’s why IE is called a divine browser…

    And I’d thought I’d proved the existaaance of God…

    Posted by Tess | February 23, 2012, 04:56
83. 

    a) Try going to the link I gave and downloading a fresh copy of Safari. It won’t let you download a non-compatible version.

    b) If I may turn from jokes to non-jokes, then Primo Levi’s reply suffices:
    “There was Auschwitz, therefore God does not exist.”

    Posted by Panos | February 23, 2012, 05:17
84. 

    Logged in or out makes a difference on Safari:
    The way Safari looks with Imbalance position altered code when logged out of wp is different from the way it looks when logged in. Firefox (I think, no difference—work today was a bear but I think I’ve got the links right):
    Safari logged out with the vertical (and horizontal scrollbar and vertical space)
    
    Firefox:
    

    a) Try going to the link I gave and downloading a fresh copy of Safari. It won’t let you download a non-compatible version.

    Yes, I understood what you meant, but that is what I did back in November before the trip to brother’s house for the T-day holiday and before my battery swelling made my computer nonfunctional… That is how I now have Safari 5.0.6 . So frustrating, but when Sarari works is is good, and when it doesn’t it is very good at being bad. (Sorry. A misquote of something here…)

    At any rate,

    “There was Auschwitz, therefore God does not exist.”

    no mercy
    no! mercy?
    no… mercy……

    Your statement is not logically more conclusive than one from a dedicated believer who says something on the lines that Life is a miracle, God is good, magnificent, loves his creation…

    Putting God on Trial, maybe there is not a God we can ever understand. or accept, or love.
    http://globalizati.wordpress.com/2006/12/23/auschwitz-god-on-trial/ go down to Karen Armstrong’s words at the end of the post there.

    Posted by Tess | February 24, 2012, 04:21
85. 

    Comment awaiting moderation… 3 links, sorry.

    But wp.com fixed the missing date link to comments: http://en.forums.wordpress.com/topic/links-to-comments-on-imbalance?replies=3#post-825969

    And I’ll hope for the themes forum thread to make the Imbalance hover color an option from links to posts on the front page.

    Sleep tight: snow tonight (here) and time to spend at home. /weather report from Michigan…

    Posted by Tess | February 24, 2012, 04:28
86. 

    Firefox, Safari logged in, Safari logged out, I’m seeing the same white space. But I’m still on the last version of Tiger, so my browser versions are older. Anyway the problem is the negative top number: I’ve seen that negative margins etc. sometimes differ from browser to browser. Unfortunately position absolute won’t do in this case, because (strangely) the horizontal placement is based on the browser window instead of the content wrapper, so I don’t have a good alternative solution.

    Hey, the statement isn’t mine, it’s Primo Levi’s! And of course it’s not logically conclusive, because it’s not a logical deduction at all (in general, it’s logically impossible to literally prove that something doesn’t exist). To me the phrase simply borrows the form of a deduction, but it’s a cry of protest and desperation: it’s not a logical “therefore”, it’s a heart-rending one. Still, Christian apologists need a loooot of twisting to reconcile the atrocities of Nazism with their notion of God.

    What is recounted at the end of the post is interesting. To a fanatic atheist it’s just for laughs, I guess. To a less fanatic one, it must be sad. Dostoevsky, who is a better and more honest thinker than apologists, understands that this is a human problem, and (if I remember correctly) he’s troubled himself by the fact that his rational mind tells him no but another part of him needs to cling to the yes…

    Posted by Panos | February 24, 2012, 09:36
87. 

    Yes of course:the quotation is in the form of a deduction which reveals more than it actually says, about faith and disbelief. “Heart-rending” and a plea for mercy.

    “There was Auschwitz, therefore God does not exist.”

    Why should we expect mercy, kindness, and grace? Why do we have such hope? It’s human to make god in our own image, to want peace and goodness. But if there is “free will” then there will be flawed choices, which are destined to become evil.

    Anyway, I can live with the white space. In light of the above discussion it doesn’t seem a very bad thing.

    Posted by Tess | February 24, 2012, 15:33
88. 

    Hi. I’m very new at this, so there’s one thing I don’t get.
    Where are you supposed to copy the html code? I don’t have wp installed on my computer so I can’t get into .php files (or at least, I don’t think I can… the whole thing is rather confusing).

    Thank you very much!!

    Posted by thereshewrote | February 26, 2012, 15:04
89. 

    Hi,
    It’s mentioned in the post: “go to Appearance > Widgets, add a Text widget to Header Area, paste, save”.
    But it seems you’ve figured it out by now.

    Posted by Panos | February 27, 2012, 00:05
90. 

    I have, yes. I wanted to remove my question, but for that too, it will take some figuring out :)
    Anyway, thanks a lot for your answer.

    Posted by thereshewrote | February 27, 2012, 00:16
91. 

    You’re welcome.
    You can’t remove your question from my blog.

    Posted by Panos | February 27, 2012, 00:21