Text Widget with different class

  • Resolved drcmanx

    (@drcmanx)


    16 years, 10 months ago

    Question:
    My question is how do I get text-1 to use class “note”.

    Background Story:
    I’m using the Artificial Intelligence theme, found at https://ericulous.com/2007/02/09/wp-theme-artificial-ntelligence/.

    As you notice from AI, there is a yellow box on the end of the sidebar identified with the class “note”. When you choose to use widgets, all the sidebar boxes are with the class “box”. I’ve looked at both the css and widget.php and saw nothing that would allow me choose a different class. However I did notice that in the widget.php there is this line “$id = “text-$i”;” which I figured could help me but what I tried failed. So since my mind is in overload mode, can someone figure out what I need to put down. Thanks in advance!

    CSS:
    #sidebar li ul li{
    list-style-type:none;
    margin-left:20px;
    }
    .box {
    padding: 4px 15px;
    border: 1px solid #ccc;
    margin: 0 0 10px 0;
    }

    .note {
    padding: 15px 15px 20px 100px;
    border: 1px solid #CFCB66;
    margin: 0 0 5px 0;
    background: #FFFFAD url(images/package.gif) no-repeat;
    color: #585616;
    }

    Widget.php:
    wp_widget_text_register() {
    $options = get_option(‘widget_text’);
    $number = $options[‘number’];
    if ( $number < 1 ) $number = 1;
    if ( $number > 9 ) $number = 9;
    $dims = array(‘width’ => 460, ‘height’ => 350);
    $class = array(‘classname’ => ‘widget_text’);
    for ($i = 1; $i <= 9; $i++) {
    $title = $options[$i][‘title’];
    $name = __(‘Text (‘ . $title . ‘)’);
    $id = “text-$i”; // Never never never translate an id
    wp_register_sidebar_widget($id, $name, $i <= $number ? ‘wp_widget_text’ : /* unregister */ ”, $class, $i);
    wp_register_widget_control($id, $name, $i <= $number ? ‘wp_widget_text_control’ : /* unregister */ ”, $dims, $i);
    }
    add_action(‘sidebar_admin_setup’, ‘wp_widget_text_setup’);
    add_action(‘sidebar_admin_page’, ‘wp_widget_text_page’);
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Please give us a link to your website so that we can see it and then tell you what it is that you need to do. Most likely you don’t need to make any actual theme changes or mess with the widgets, you just need to do some stuff in the CSS file.

    In other words, show us your page and tell us “I want to make X look like Y”. Telling us which theme you’re using and posting random chunks of irrelevant code doesn’t help us at all.

    Generally speaking, all widgets get unique classes or ID’s and can be referenced directly, in some fashion.

    Thread Starter drcmanx

    (@drcmanx)

    Sorry about that, I want:
    https://www.elitetrackstar.com/test1/

    to look like:
    https://elitetrackstar.com/odd/

    The first link is widget, the second is not.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Okay. I get it now. We’re going to have to make a minor change to your theme to do this properly.

    In your theme’s functions.php, you’ll find this bit of code:

    if ( function_exists('register_sidebar') ) {
    register_sidebar( array('before_widget' => '<div class="box">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>') );
}

    This is a perfectly acceptable bit of code, however it doesn’t really help much with making the widgets unique and easy to style. So, lets change this up a bit.

    if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
'before_widget' => '<div id="%1$s" class="box widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
) );
}

    If you use this code instead, now your box’s will have their own unique ID’s and classes for you to use. Making it look the same using that CSS should now be much simpler. ??

    Thread Starter drcmanx

    (@drcmanx)

    I don’t understand how to customize it, what does
    <div id=”%1$s” class=”box widget %2$s”> do?

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    drcmanx: The ID and classes get replaced with something more unique and individual by the widget system.

    Now that you’ve made that change, look at the source of your page:

    <div id="text-1" class="box widget widget_text">
<div class="textwidget">Register now to recieve special promotion packages and bonus features!</div>
</div>

    See how it now has the id of “text-1” and a few extra classes? You can now modify your CSS and change “.note” to “.note, #text-1” to make the text widget look just like the .note thing.

    Thread Starter drcmanx

    (@drcmanx)

    Thank you for taking the time to help and explaining it out to me.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Text Widget with different class’ is closed to new replies.