Sign Up! • Login: Password: New User? Forgot? Support
Home
Forums
Warcraft
MMORPGs
Calendar
Media
Roster
Chat
Mail
Code 
 
 
Forums 
Forums : General Discussion > Different appearance for each box/widget?
Keilana55 (Member) 1/2/2012 2:32 AM EST : Different appearance for each box/widget? link
Keilana55
Posts: 4537

0
Like

0
Dislike
Hi Mottie,

Thanks bunches and heaps.  I owe you a huge debt of gratitude!  Things would not be as great as they are without you!

At one point in time - I am unable to see the forest for the trees no doubt, you had a post that showed us how to give each widget box it's own appearance.  I would love to do something like this now as our home page looks like a blur of blue links.  A wall of ... "stuff" that is not good looking at all.  Would you mind directing me to that thread or better still, is there a possibility of a mod?

Top • Bottom

Mottie (SuperAdmin) 1/2/2012 8:24 AM EST : RE: Different appearance for each box/widget? link
ACK!
Mottie
Posts: 3873

0
Like

0
Dislike
Hi Keilana55!

Happy New Year!

The post you want, I think, is this one. But, now I think the best method of styling individual widgets is to just target the widget class name. This is an excerpt from the book I started writing but just can't seem to get around to finishing it. It's a list of widgets (at the time) and their associated class name.

Widget Name

Specific CSS Class

 

Widget Name

Specific CSS Class

Achievements

.gpWidget-achievements

 

Needs List

.gpWidget-needslist

Bank

.gpWidget-banklrg

 

News Box – Large

.gpWidget-newslrg

Calendar

.gpWidget-calendar

 

News Box – Small

.gpWidget-newssml

Chat

.gpWidget-chatlrg

 

Officer Contact List

.gpWidget-officercontacts

Embeded Page

.gpWidget-embedded

 

Page View Counter

.gpWidget-viewcount

Events Box - Small

.gpWidget-eventsml

 

PayPal Donate Button

.gpWidget-paypaldonate

Forum Search

.gpWidget-forumsearch

 

Progression

.gpWidget-progression

Forums

.gpWidget-forumslrg

 

Quests

.gpWidget-questlrg

Free Form Text/HTML

.gpWidget-freeform

 

Quests Box - Small

.gpWidget-questsml

Game Guides

.gpWidget-gameguides

 

Raid Point Standings

.gpWidget-raidpoints

Game News

.gpWidget-gamenews

 

Random Categorized Image

.gpWidget-randomcatimage

GP News and Updates

.gpWidget-guildportalnews

 

Random Thumbnails

.gpWidget-randomthumb

Guild Alliance Links

.gpWidget-alliessml

 

Recent Bloggers

.gpWidget-recentblogs

Guild Funds

.gpWidget-fundslrg

 

Recent Posts Stand-Alone

.gpWidget-mostrecentposts

Guild Summary

.gpWidget-guildmetasml

 

Recent Topics Stand-Alone

.gpWidget-latestthreads

Image Gallery

.gpWidget-imageslrg

 

Roster (Default GP Roster)

.gpWidget-rosterlrg

Image Gallery-Silverlight

.gpWidget-slgallery

 

RSS Feed

.gpWidget-rssfeed

Inbox

.gpWidget-mailcenterlrg

 

Shout Box

.gpWidget-shout

Info Widget

.gpWidget-infosml

 

Voting Polls – Large

.gpWidget-votinglrg

Links – Categorized List

.gpWidget-catlinks

 

Voting Polls – Small

.gpWidget-smallvote

Links – Single List

.gpWidget-linkssml

 

Welcome Message

.gpWidget-welcomelrg

Medals – Recent Awards

.gpWidget-recentmedals

 

Who’s Online

.gpWidget-wholrg

Member of the Month

.gpWidget-monthlymember

 

 

 

It doesn't have the new mod widget - I'd have to look for that again and another main issue is that you can't target specific free form text/HTML type widgets. Anyway, here is an example of how to use the class name:
.gpWidget-achievements {
  background: transparent url(URL TO IMAGE);
  padding: 0;
}
For the Free Form Text/HTML widget, you can just target them all and make them the same or use the method from the link I posted at the top... there might be a better way, but I'd have to think about it.
>>help-site<<
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
Top • Bottom

Keilana55 (Member) 1/11/2012 8:30 AM EST : RE: Different appearance for each box/widget? link
Keilana55
Posts: 4537

0
Like

0
Dislike
Thanks Mottie - I will give this a solid "go".  Much appreciated!

Top • Bottom

Keilana55 (Member) 1/11/2012 8:43 AM EST : RE: Different appearance for each box/widget? link
Keilana55
Posts: 4537

0
Like

0
Dislike
I found this code from your link:
#box_Welcome .topleft, #box_Welcome .toptile, #box_Welcome .topright, #box_Welcome .bottomleft, #box_Welcome .bottomtile, #box_Welcome .bottomright { }

#box_Welcome { background: transparent; border: 0; }
#box_Welcome .ContentBoxTitle { background: transparent; color: #ffffff; position: relative; top:40px; left:135px; font-size: 18pt; }
#box_Welcome .lefttile { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollleft2.png) right top no-repeat; height: 567px; width:100px; padding:5px; }
#box_Welcome .ContentBoxBody { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollcenter2.png) left top repeat-x; height: 567px; padding: 10px 25px; color: #5a4129; }
#box_Welcome .righttile { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollright2.png) left top no-repeat; height: 567px; width: 206px; padding: 0 5px; }

but am unable to find: .gpWidget-welcomelrg>>
so that I can paste it in.  When you have time, could you point me in the right direction please?


Or

Do I paste:
.gpWidget-achievements {
  background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollleft2.png);
  padding: 0;
}

into the "welcome message" html window?

Top • Bottom

Mottie (SuperAdmin) 1/11/2012 9:02 AM EST : RE: Different appearance for each box/widget? link
ACK!
Mottie
Posts: 3873

0
Like

0
Dislike
Hi Keilana55!

The #box_Welcome code is used if you changed your Content Box Custom HTML (Control Panel > Custom HTML & Script > Boxes, Left Side, Center, Right Side) so the .topleft, .toptile, etc are specific to that custom HTML.

I posted that list of widget class names as an alternative to not changing the custom HTML. If all you want to do is change the background image of the welcome widget, then just use something like this:

.gpWidget-welcomelrg .ContentBoxBody {
  background: transparent url(YOUR_IMAGE.jpg) center center no-repeat;
}

>>help-site<<
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
Top • Bottom

Keilana55 (Member) 2/13/2012 11:47 AM EST : RE: Different appearance for each box/widget? link
Keilana55
Posts: 4537

0
Like

0
Dislike
Whoops, I think this is the better place to post this request, he he.

Mottie - hello!

I am having so much trouble getting this to work.  Is it possible that a mod might come out for this?  The home page looks a wreck without something like this to separate the widget - it looks like a wall of links.  Very ugly.

Top • Bottom

Mottie (SuperAdmin) 2/14/2012 3:23 PM EST : RE: Different appearance for each box/widget? link
ACK!
Mottie
Posts: 3873

0
Like

0
Dislike
Hi Keilana55!

Sadly, this is all css and since I have no idea what widgets are on which pages, you really can't put this stuff into a mod.

Unless I'm not understanding the trouble you are having.
>>help-site<<
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
Top • Bottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
World of Warcraft® and Blizzard Entertainment® are all trademarks or registered
trademarks of Blizzard Entertainment in the United States and/or other countries. These terms
and all related materials, logos, and images are copyright © Blizzard Entertainment.
This site is in no way associated with or endorsed by Blizzard Entertainment®.

Creative Commons License
All work on this site is licensed under a Creative Commons Attribution 3.0 Unported License.


So-and-so has logged on!
%title%
%message%