Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > New CSS Classes for Widgets
Aaron Lewis (Blue Collar) 11/20/2009 2:37 PM EST : New CSS Classes for Widgets
GuildPortal Dev
Aaron Lewis
Posts: 1979
Zomgawsh Poster

Heya all,

Just wanted to let you folks know that tonight's code push is going to include something Mottie asked for a while back, which will allow for greater customization.

It's going to be a wrapper DIV that surrounds the individual widgets on your pages, each looking like this:

<div class="gpWidget gpWidget-[type of content]" id="[unique identifier]">
... content box, title, body
</div>

The [type of content] will be something like "forumslrg" (forums), "newssml" (small news box), etc. The [unique identifier] will be specific to that instance of the widget, on that page. For example, if you have a large news widget on your home page, and another on another page, though the content will be the same, the identifiers will be different.

Aside from being able to now control appearance of widgets individually using custom CSS at the "all widgets," type of widget, or instance level, you can also access them in your custom scripts a bit more easily than traversing the DOM using indices. For example, using jQuery, you could get ahold of them in a few different ways. You could access them by ID using jQuery("#[unique identifier]"), by type of content using (forums for this sample) jQuery(".gpWidget-forumslrg"), or by all widgets using jQuery(".gpWidget").

The wrapper DIVs will be there regardless of whether you're using standard content boxes, boxes with border images, or full custom HTML containers.

Hope this will be useful!
Aaron Lewis, GuildPortal.com
TopBottom

Merenwench (MVP) 11/20/2009 2:44 PM EST : RE: New CSS Classes for Widgets
GuildPortal MVP
Merenwench
Posts: 2772
Zomgawsh Poster

Uhm...can you explain this in pictures? lol

TopBottom

Murazorz (New Admin) 11/20/2009 8:59 PM EST : RE: New CSS Classes for Widgets
Murazorz
Posts: 852
Zomgawsh Poster

Sweet.
TopBottom

Mottie (MVP) 11/21/2009 6:49 AM EST : RE: New CSS Classes for Widgets
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

@Merenwench:
Every widget is now inside a container with class name "gpWidget", no matter what custom content box HTML you use. This makes it easier to standardize coding - I just updated the "hide this widget" code to work for everyone, so it's now one bit of code instead of the two I had before... this makes me happy 

@Aaron:
I noticed that the gpWidget container ID is all numbers. Because Firefox is compliant with the HTML4 standard, I can't use jQuery to target any ID that starts with a number nor does CSS using the ID work. Here is the quote from the standard:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
But apparently in the HTML 5 standard this won't matter:
The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
I just thought I'd let you know... I don't think I'll need to use the ID anytime soon, so I wouldn't rush changing it...
TopBottom

Eldaberry (New Admin) 11/21/2009 10:10 AM EST : RE: New CSS Classes for Widgets
Eldaberry
Posts: 15
Becoming Adept!

Mottie said:
@Merenwench:
Every widget is now inside a container with class name "gpWidget", no matter what custom content box HTML you use. This makes it easier to standardize coding - I just updated the "hide this widget" code to work for everyone, so it's now one bit of code instead of the two I had before... this makes me happy 



Ty Mottie, that I understood completely. LOL
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%