Add css class to RGP Widget plugin

My theme has some nice styles for the widgets based on class=”vcard hoverable”

I’m trying to get those styles to apply to the recent global posts widget and I think it would be easier to edit the php file with a div class than it would be to dig through all the css and copy it over.

I tried adding <div class="vcard hoverable"></div> to the file but I keep getting errors. What section of widget-recent-global-posts.php needs to be tagged with this to apply this class?

Or, to make it upgrade friendly, is there a way I can add something to my functions.php that will add the class to it automatically whenever the rgp widget is displayed?

  • Han
    • The Crimson Coder

    Hi Saunt, try this

    – go to line 92

    – insert your div right below “<?php echo $before_widget; ?>”

    <?php echo $before_widget; ?>
    <div class="vcard hoverable"></div>
    <?php echo $before_title . __($title) . $after_title; ?>

    Let me know if you want to put it somewhere else :slight_smile:

  • Saunt Valerian
    • The Bug Hunter

    Not working.

    The tags have to around something.

    I reviewed the source for the member’s widget on this old about page I have http://teatra.de/about/

    It’s showing the class applied to the

  • tag like this <li class=””>
  • Following that example I added the class to line 102 so it now reads

    echo '<li class="vcard hoverable">';

    Following the example, I also added a class to line 100 so it now reads

    echo '<ul class="item-list">';

    The class is showing up, and the style is being added, but my intent is to get the hover color effect seeing on the About page linked above. I can’t see what I’m missing here. The style is in place in the css file, why won’t it display the color when hovering?

    http://teatra.de in the Recent Headlines section is the problem are I’m working on.

  • Han
    • The Crimson Coder

    Please try to change BpWidgetHover function in onLoad.js as follow

    function BpWidgetHover() {
    elements = ".widget_bp_groups_widget, .widget_bp_core_members_widget, .rgpwidget";
    jQuery(elements).find("li:not(.hoverable)").hover(function () {
    jQuery(this).addClass("hover");
    if (typeof Cufon == "function") {
    Cufon.refresh();
    }
    }, function () {
    jQuery(this).removeClass("hover");
    if (typeof Cufon == "function") {
    Cufon.refresh();
    }
    }).click(function () {
    url = jQuery(this).find(".item-title a").attr("href");
    if (url) {
    document.location = url;
    }
    }).addClass("hoverable");
    }

  • Saunt Valerian
    • The Bug Hunter

    Riyaku – you are such a big help! I have no idea how you found that!

    That’s a huge step in the right direction. One issue left is that the text doesn’t change color with the background. I spend about an hour examining the css styles on the About page but nothing ever popped up as being the css rule that causes the text to change color to white when hovering.

    As it stands, your js file change causes the background to change color perfectly, but the text is unreadable since it doesn’t change color. (it changes to gray when you mousever the text itself, but it needs to change to white, similar to the behavior on the About widget).

    If you can’t think of how to make this work easily I’ll ask the theme developer since this issue is certainly within the realm of his support.

    note that I have the javascript turned off right now for the frontpage widget since the feature causes it to be unreadable

  • Han
    • The Crimson Coder

    Try to add this code into your custom css file

    .rgpwidget ul.item-list li:hover,
    .rgpwidget ul.item-list li:hover a,
    .rgpwidget ul.item-list li a:hover {
    color:#ffffff;
    }

    Let me know if it doesn’t work :slight_smile:

  • Saunt Valerian
    • The Bug Hunter

    Amazing – that worked perfectly.

    Now, one last thing if you don’t mind. Is there anyway to make the link work on the full length of the “button” that was created? The curser turns into a hand pointer indicating a link, but it doesn’t work until the cursor is over the text. Again, this is the same functionality as occurs on the about page.

    I’ve given you 35 rep points for all this help you’ve given. If you can’t figure how that last part is done, I’ll if the theme designer can help me.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.