Graphic Buttons in Mistylook Sidebar?

  • Author
    Posts
  • #542124

    notabilia
    Member

    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 notabilia.wordpress.com.

    #542329

    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>

    #542351

    notabilia
    Member

    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?

    #542352

    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.

    #542354

    notabilia
    Member

    That’s exactly what I want to do. How do I style that individual widget? I am unsure of where/what code to use!

    #542355

    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.

    #542356

    We can also make sure the colored border gets axed as well.

    #542357

    notabilia
    Member

    OK. They’ve been added to my site. Check it at the bottom of the right-hand sidebar.

    #542358

    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.

    #542359

    notabilia
    Member

    Ah, ok. Thanks for checking it out, @thesacredpath. I really appreciate all your help so far.

    #542360

    You’re welcome and hopefully hallluke will pop around soon.

    #542361

    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.)

    #542362

    notabilia
    Member

    Thanks @panaghiotisadam! I’ll wait to see what the experts have to say and then try this out!

    #542363

    notabilia
    Member

    It works… so far. Let’s see if I can find any bugginess.

    #542366

    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.

    #542368

    notabilia
    Member

    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!

    #542369

    notabilia
    Member

    Figured it out!

    #542370

    notabilia
    Member

    Figured it out!

    #542374

    hallluke
    Member

    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.

    #542377

    notabilia
    Member

    Thanks, @hallluke. You all have been very helpful.

The topic ‘Graphic Buttons in Mistylook Sidebar?’ is closed to new replies.