• Resolved phobic

    (@phobic)


    Hi, I don’t normally need to create a topic, I’m not *too* bad at CSS and I am fairly familiar with WordPress, but this seems strange..

    Ever since WordPress had widgets built in I’ve used them enthusiastically, but I’ve always had trouble with styling, or altering elements. For example, I’ve enabled two widgets, archives and categories, but I want it to show only two dropdown menus, currently the sidebar contains the two dropdowns AND the titles next to them. I can’t believe the only way round this is to edit the PHP, and I don’t really see a way to do that anyway.

    With WordPress you used to be able to do something like:

    #menu h2 {
       color: #fff;
       font-style: italic;
    }

    which would style only the titles of sidebar elements. Is it really so much harder now or am I missing something?

    I see plenty of unanswered threads in the forums, and all google searches for ‘editing widgets’ leads to old, third party widget stuff.

    Please help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • I wonder if the plugin Widgetize Anything would help. You can plop that code right in, sans title coding.

    You can try my code from my functions.php to reset the title and list elements of widgets and/or replace them (eg. with display:none):

    if ( function_exists('register_sidebars') )
    register_sidebar(array('name'=>'sidebar1',
    'before_widget' => '', // Removes <li>
    'after_widget' => '', // Removes </li>
    'before_title' => '', // Replaces <h2>
    'after_title' => '', // Replaces </h2>
    ));
    register_sidebar(array('name'=>'sidebar2',
    'before_widget' => '', // Removes <li>
    'after_widget' => '', // Removes </li>
    'before_title' => '', // Replaces <h2>
    'after_title' => '', // Replaces </h2>
    ));
    register_sidebar(array('name'=>'sidebar3',
    'before_widget' => '', // Removes <li>
    'after_widget' => '', // Removes </li>
    'before_title' => '', // Replaces <h2>
    'after_title' => '', // Replaces </h2>
    ));

    You can also download the sandbox theme and look in the code of the functions.php, I remember there is another solution (and more interesting stuff).

    Good luck!

    Thread Starter phobic

    (@phobic)

    Thank you both for the replies – Evita, this seems interesting – my PHP isn’t as strong as it could be, but this looks like exactly what I’m after. If I’m reading this code correctly, this loops through any sidebars whether there is one, two or three, and removes any

    • items, and adds <h2> to the titles. Does that sound correct? If so, would I simply paste in this block of code at the bottom of functions.php?
    • Thanks again for the help in advance..

      Toby

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    Is it really so much harder now or am I missing something?

    You can still do just that, but without seeing your actual site, I can’t tell you how to reference the widget titles.

    Post a link to your site.

    Evita’s method will work, but it seems like major overkill to me. If you’re just wanting to make the things italic and such, then you only need to mess with the CSS. If you want to actually change the tags, then you mess with the functions.php file.

    Thread Starter phobic

    (@phobic)

    my site is at:

    http://iphonecafe.org

    one example of a problem I’ve faced is in the sidebar, I wanted to replace the widget titles with an image – I’ve achieved through a horrible hack, you might be able to see I’ve just shrunk the text down to 0.1em and placed a background image. Normally I’d do:

    <a href="#" id="linkHiddenTxt"><i>My Title</i></a>

    and then use CSS to set margin-left on <i> to -999em, which creates stantards compliant, accessible code. However, to achieve this using widgets I would have to edit the PHP code somehow.

    It seems a shame, I love the new way of controlling the sidebar, I hoped I was missing something regarding the usage of the new widgets.

    Many thanks,

    Toby

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    Well, there’s plenty of classes and such, so you can directly access those bits.. Look at XHTML it actually produces:

    <li id="tag_cloud" class="widget widget_tag_cloud">
    <h2 class="widgettitle">Tags</h2>
    <a href='http://www.iphonecafe.org/tag/3g/' class='tag-link-8' title='3 topics' rel="tag" style='font-size: 11.5pt;'>3G</a>
    ...

    So, .widget .widgettitle will reference all the titles, you can reference the tag cloud title directly with .widget_tag_cloud .widgettitle and so on.

    But for replacing text with images, I see your problem.

    My first recommendation would be: Don’t do that. Instead of replacing text with an image of text, style the text to look like the image instead. That bar immediately following the text could be done with a relative position background image if you really wanted to do that. Just a make a long image of a bar, set the background of the title to it, with the right positioning and fixed width.

    However, if you really want to use those image backgrounds… This is a better way:

    .widget .widgettitle {
        padding: 50px 0 0 0;
        overflow: hidden;
        background-repeat: no-repeat;
        height: 0px !important;
        height /**/:50px;
    }
    
    .widget_tag_cloud .widgettitle {
    	background-image: url("images/latte-tagcloud.gif");
    	background-position: -10px center;
    	color:  #5d5d5d;
    }
    
    .widget_recent_entries .widgettitle {
    	background-image: url("images/latte-recentposts.gif");
    	background-position: -10px center;
    	color:  #5d5d5d;
    }
    Thread Starter phobic

    (@phobic)

    Hi – apologies for the slow posting, I have been trying many different methods to resolve this issue, including the ones suggested here. I have found that I can make minor changes to widgets.php to standardize the sidebar, along with the css tip above by Otto I have been able to achieve everything I need. Many thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Widgets Making Theming Tricky’ is closed to new replies.