This morning there were some CSS changes deployed. I'm going to briefly describe them for you. While they were popular requests, it still can mess up some sites who have their own CSS file that they're linking (that isn't the new built-in one).

If you are using a standard layout or you are linking to the style.css file address retrieved from the "CSS Editor" on your admin menu, then you don't really need to worry about this, because my scripts automatically appended this information to your CSS files.

So here's the brief description of what's going on:


Shoutbox (it was requested to be able to change the size and whatnot of the shoutbox, so I added a .shoutbox class). This is the default class that was added:

.shoutbox{
overflow:auto;
height: 200px;
font-weight:normal;
font-size: 7.5pt;
}


Calendar (it was requested to be able to resize the Calendar too. The calendar is a set of days, and in our world, it's 7 days per week, so the calendar is 7 days long). You set the width of the days, and that effectively sets the width of the whole calendar.

Here's the class:

.calday{
width:20px}


Vent/TS Status (people wanted to be able to change the size/scrolling of the Vent/TS window, and so they can do it now):


.ventstatus{
width:100%;
height:300px;
overflow:auto;
}

An Actual system of tabbing has been deployed (which right now, can only be seen on the Tickets page and on the DKPSystem.com main page only.

But Tabbing is in the new Arena Summary page that's almost complete, and should be deployed today.

Like the Above CSS changes, I've deployed them automatically to the standard CSS files, but again, if you are using a custom CSS file linked from elsewhere, you'll need to make these changes as well, otherwise the tabs will look VERY odd indeed.


Here are the changes as they are deployed on Demo.dkpsystem.com


/* The following are some general rules for tabs. You'd usually not need to mess with these first four, but you can if you wish */
div.tabrow{float:left;width:100%;padding-top:5px;}
ul.tabrow, ul.tabrow li{list-style-type:none;margin:0;padding:0}
ul.tabrow{margin-left:10px;}
ul.tabrow li{list-style-image:none;float:left;margin-right: 3px;text-align:center;font-size:inherit}

/* This is for Unselected Tabs when they are idle (not hovered over) */
ul.tabrow a{float:left;width:8em;padding: 5px 0;background-color:#262626;}

/* Unselected Tabs when the cursor is hovering over it */
ul.tabrow a:hover {background-color:#000000;}

/* The currently selected tab. It's a good idea to make this background being the same background color as .listlabel, Most of the tabs will be directly above a .listlabel element, giving the tabs their full effect*/
ul.tabrow li.selected a,ul.tabrow li.selected a:hover {background-color:#330000}


Note: Primarily, you'll only want/need to change the colors/styles for the "Unselected Tabs", "Hover Tabs", and "Active Tabs"

This is just a heads up, albeit a little one.

The new Raid Availability Tweaks use the Tab functions added, so you'll definitely want to update your CSS files with the new tab stuff, if you haven't already. It works otherwise, but it'll definitely look weird.

Hey Chops,

Glad to see you making these kinds of changes. I was just about to write a post begging... no pleading... to get rid of emitted style="" attributes and replace them with class="" attributes.

I'm working on a very customized CSS/XHTML layout and finding some things I just can't control because the emitted style="" attribute will always take precedence over my CSS. There are workarounds, but they are ugly.

So again... please keep going down this path. Less emitted style and formatting information and more CSS class tags please. One other thing... id="" and name="" are different. Not all browsers will let you do CSS assignments to name="something" elements, so when you use name="something" please also use ID="something" too.

Thanks!

More CSS Changes being added. These will automatically be added to each site (like usual), but if you're using a custom uploaded CSS file, you'll want to specify these.

This is for the new Calendar coming.

I know you can't really get a feel for it without the code there to experiment with, but I thought I'd give a brief heads up anyway.

/* this is the table that displays the calendar info */
.bigcal {width:100%;border-style:inset;border-width:1px;}

/* This is the header of the calendar, displaying the month and year, and the links to the next months */
.bigcalheader{font-size:16pt;font-weight:bold;}

/* Day Labels "Sunday" "Monday" etc */
.bigcaldayheader{font-size:10pt;font-weight:bold;}

/* This is the class for each day */
.bigcalday
{width:14%;border-style:solid;
border-color:#777777;border-width:1px;height:100px;
}

/* This is a class that is displayed on event labels (8:00pm - Gruul's Lair) */
.bigcallabel{font-size:8pt;cursor:pointer}

/* This is the div containing the day of the month */
.bigcaldaylabel{font-size:8pt;background-color:#555555;text-align:center}

/* The class when a day on the calendar is being hovered over */
.bigcalday_hover{background-color:#000000;border-color:#ffffff}

/* One of the classes displayed on today */
.bigcalcurrent{background-color:#333333;}

/* One of the classes to display is something is scheduled on that day */
.bigcalsomething{border-width:2px;border-color:#ff0000}

/* This is going to be the Arrows to the right and left */
.bigcalheader a{color:yellow}

/* This is the div that gets clicked to add a new item. The default image is a plus. The Overflow:hidden is because IE, for whatever reason, wants to make it higher than the height attribute */
.bigcalplus{
position:relative;top:2px;float:right;width:10px;height:10px;
overflow:hidden;background-image:url(plus.gif);cursor:pointer;
}

/* A day that's not in the current month (at the beginning and end of the calendar display) */
.bigcalblank {background: #000000}

Hmm! I smell happy designers around the corner!

Keep it up, and I can't wait to play w/ it

New CSS classes.

Currently Recruiting Table

table.recruiting

This is the table itself. So if you want to address the individual cells, use

table.recruiting tr td { }


Calendar Hover-over

div.hover_waitinglist
Represents the number of members on the waiting list on the hover-over. Contains color:yellow hardcoded, so overwriting that will require !important.

div.hover_awaitingapproval
Represents the number of members currently awaiting approval. Has color:lightblue hardcoded, so use !important if changing the color

div.hover_approved
Represents the number of members currently approved for this event. Has color:lightgreen hardcoded so use !important.

div.hover_mesignedup
Represents the line: "You are signed up for this event" or "Not signed up for this event". Has to style by default.

div.hover_eventname
Represents the name of the event itself. Has font-weight:bold hardcoded, so use !important.

div.hover_time
The start time of the event. Has no style information by default.

div.hover_description
The div for the description field in the hover-over. Has no style information hardcoded.

Hey Chops,
I've been reading up on CSS3 and found this
http://www.css3.info/preview/word-wrap/

The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line. It takes in two values; normal or break-word.

Would this work in the shoutbox to stop it from breaking the page formating when someone posts an "AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH" or something similar?