There was a minor styling error in this hack — I have fixed it now 🙂
This hack was inspired by a comment on my peek-a-boo link lists hack. It is a one-click install hack of a special HTML widget to your blog. Edit the template and content of the widget to be whatever you want (such as JavaScript includes for external blogrolls). The widget will appear either with just a title, or with ‘[+/-] TITLE’. Clicking the title (or [+/-], depending on the version you choose) will display all of the HTML/JavaScript contents.
8 Responses
Peek-a-Boo Configure HTML/JavaScript Widget-Displayed title minor problem: Wow! I have implemented this particular widget on my blog and the functionality works perfectly well so far. This is opening me to new design possibilities for my displayed blog. I have only one little style problem. The displayed title of this particular widget in my blog doesn’t match the color of my other widget titles. (Most of the stuff in my sidebar comes from your variations of Peek-a-Boo Widgets). According to my CSS, my sidebar title widgets are supposed to be displayed in a shade of gray and when a mouse pointer moves over the title, the title stays gray and a red line shows under the title. With the Peek-a-Boo Configure HTML/JavaScript Widget, the title is displayed in blue (Link Color according to my CSS) and when a mouse pointer moves over it, the whole title becomes red with the addition of a red line beneath it. I would like the Peek-a-Boo Configure HTML/JavaScript Widget title to match my other widget titles. I can’t figure out what to do. Can you help me? If it’s possible, I would like you to point me what to do to your code to eventually harmonise the Peek-a-Boo HTML widget title with my other Peek-A-Boo Widget titles (List link normal and with link opening in a new window in the standard and scrolling variations from your blog) and my other Element Titles from my blog.
@alain — the titles of the widget (unless you use the [+/-] version) are links. You will need to add CSS similar to this:
h2 a {
stuff for these headers
}
Peek-a-Boo Configure HTML/JavaScript Widget (from title)-Displayed title minor problem-Part 2:
Hi Stephen,
I have tried your suggested «h2 a» CSS with various proprieties {font-seize, color, etc.} and different values {%, hexadecimal colors, etc. } in my template but it has no effects on the HTML widget title layout when I use I.E. and Ff.
In my template all my sidebar titles are related to a simple «h2» CSS. In the «h2» CSS, when I change the values of some proprieties like «font» or «text-transform» for examples, they have a direct effect on the HTML widget title — and also on all of your other peek-a-boo widgets: links (from title), links opening in a new window (from title). But when I change the values of the color propriety, this particular color change has absolutely no effect on the HTML title widget. Furthermore, changing the value of the color propriety has an effect on all of your other peek-a-boo widgets titles. Considering this observation, it’s seems to me that the specific HTML title widget is giving priority to another value for the color propriety other then the «h2» CSS color propriety.
1) I don’t understand why the HTML widget title doesn’t have the same color behaviour as your other peek-a-boo widgets. Can you explain me why please?
In my template the color of the HTML widget title is influenced by « a:link» CSS. One solution for harmonizing the HTML widget title with the others peek-a-boo widgets titles and my other sidebar titles is to change the value of the color propriety in the «a:link» CSS. This solution is not totally satisfactory because all the links on my blog are also changed and I would like to keep a color distinction between the links and the sidebar titles.
2) Why is the color of the peek-a-boo HTML widget title defined by a different CSS then all of your other peek-a-boo widgets? Can you help me understand? Am I the only one experiencing this minor color title problem with the HTML widget (from title)? Are they other ways to harmonize the HTML widget title color with my other sidebar titles while keeping at the same time a color distinction with the links?
Thanks!
@Alain – I’m not sure exactly what’s going on, but it sounds like:
h2 a:link {}
should work 🙂 If not, try these as well :
h2 a {color: whatever ! important;}
or
h2 a:link {color: whatever ! important;}
RE – porn links on wiki that you wrote me about… if you could show me where they are I will remove them! I had no idea we’d been SPAMed with pr0n! Or, you could remove them yourself, it’s a wiki after all 😉
Peek-a-Boo Configure HTML/JavaScript Widget (from title)-Displayed title minor problem-Solved!:Thanks! The code « h2 a:link {color: whatever ! important;} » has done the job. It seems so simple now! I have made a lot of code experiences to try to fix this problem before contacting you but I think I would never have come with a similar code on my own. I’m trying to set up a blog design with a minimalist approach. The minor color title problem was beginning to take gigantic proportion in my mind. I’m free from frustration now. Thanks Stephen! I really appreciate your availability to do some follow-up in relation to your hacks.
Hey Singpolyma, whenever I’ve tried to install one of your New Blogger hacks, I get error messages and am unable to save my template…I’m baffled. I’d send my template over for you to take a look, but I don’t see an email address anywhere on this page… help! 🙂
is there a way to set the padding setting for this widget, my widget content keeps crossing over boundaries.. thanks in advance!
@Shutdagizm if you just add CSS rules, that should work 🙂 You’ll have to look at the widget code to figure out what tags/ids/classes to style