Graphic Buttons in Mistylook Sidebar?
-
Can I put graphics below the sidebar in Mistylook? If I use a text widget, the graphics appear in a colored box. Basically, I don’t want these graphics to be in a colored box as the other widgets are. Doable using the CSS customization?
The blog I need help with is: (visible only to logged in users)
-
This is doable with CSS however, the HTML for the links and buttons would still have to be in a text widget.
The colored border you see is browser specific. In Safari you won’t see the green borders, but in IE you will.
You can accomplish this with some inline CSS in the link HTML though.
<a href="URL_of_site"><img style="border:none;" title="" src="URL_of_button" alt="" /></a> -
Thanks, thesacredpath. Not exactly what I was thinking. If you take a look at my site, you’ll see the widgets are in a colored box (see Links, Credits, etc.). I was wonderfing if I could add graphics in the white space BELOW the widgets. Is this doable?
-
What you are going to have to do is to put the stuff in a text widget, and then style that individual text widget with a transparent background color. It will then float below the other widgets in the sidebar. You can even put in some extra top padding if you wish to visually separate it from the rest of the sidebar if you want.
-
That’s exactly what I want to do. How do I style that individual widget? I am unsure of where/what code to use!
-
What you need to do is to add the widget and add the buttons, and then we can style the widget. Each text widget has a unique designation, so we will have to specifically target that widget.
-
-
-
I’m afraid I’m stumped on this one as the text widgets in Mistylook do not have unique identifiers, they are all just class=textwidget. Normally what you see is something like class=textwidget-1 or 2, etc.
If anyone can do this, it would be hallluke who is pretty much a CSS guru. Hopefully he will drop by and see this thread.
The thing is, all text widgets are going to go white if he can do it, not just the one with the buttons in it.
-
Ah, ok. Thanks for checking it out, @thesacredpath. I really appreciate all your help so far.
-
-
A roundabout way: you can add the images to the “Credits” widget and position them below the colored box. Change the widget to this:
<div style="margin-bottom:-34px;"> TEXT HERE <div style="position:relative;bottom:-34px;"> IMAGE CODE HERE </div> </div>And add this to your CSS:
#sidebar { overflow:visible; }
(But first thesacredpath or hallluke must tell us if changing the sidebar overflow might have any adverse side-effects I’m not thinking of.)
-
Thanks @panaghiotisadam! I’ll wait to see what the experts have to say and then try this out!
-
-
You’re welcome.
Note: If you want the two images the one below the other like you’ve got them now, you must increase the two px numbers accordingly.
-
Got it.
Can I ask you another question? In my title, sidebar, etc., when I hover over the links, a line appears below. When I do this in the content of my post, it does not. Can you make it so that a line appears below the links in my posts? I can’t figure out what I am doing wrong!
-
-
-
This has cropped up before. The only way to achieve what you want is to add another div element into an existing text widget and then move that further down the page. Seeing as you have a text widget at the bottom of your sidebar then the method above works just fine! If you didn’t have the text widget in that position you’d need to use a few position and padding tricks to achieve what you want.
- The topic ‘Graphic Buttons in Mistylook Sidebar?’ is closed to new replies.
WordPress.com Forums 