[Styles] Preparing your styles for 1.2.

[Jimmie]

There are quite a few big changes between version 1.1 and 1.2. Not only on functionality, this time the style changed alot and to keep your styles "perfecto" for 1.2. Mainly its for the admin dashboard, but there are more... May I show you?

Admin Dashboard // System Health Changes

Code:

/*
* Version Checks
*/
.noupg{
     border: 1px solid #9AFF9A;
     background: #9AFF9A;
     color: #003300;
     padding: 3px;
     font-weight: bold;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     margin-bottom: 5px;
     }
.warn{
     border: 1px solid #FFA500;
     background: #FFA500;
     color: #FFFAF0;
     padding: 3px;
     font-weight: bold;
     margin-bottom: 5px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     }

These lines of CSS are of vital importance for the dashboard to work properly. And the health checks. Well, its still readable without these, but these are important for the "little alerts" that appear when there are problems or when there are no problems at all.

The Navigation Menu
This is, the changes on the style.css which are 100% CSS3.0 based. Well, I really like curve borders. These were added in almost all classes:

Code:

            -moz-border-radius-topleft: 6px;
            -moz-border-radius-topright: 6px;
            -webkit-border-top-left-radius: 6px;
            -webkit-border-top-right-radius: 6px;

Keep in mind that these only work in Mozilla Firefox and WebKit-based browsers, like Chrome and Safari. Anyway. Let's peek into the code.

Code:

        #tht_navigation ul li.active {
            background: #bb423e;
            padding: 0;
            color: #fff;
            margin-right: 7px;
            font-size: 1.05em;
            font-weight: bold;
            margin-top: -3px;
            -moz-border-radius-topleft: 6px;
            -moz-border-radius-topright: 6px;
            -webkit-border-top-left-radius: 6px;
            -webkit-border-top-right-radius: 6px;
        }
        
        #tht_navigation ul li.active a {
            background: #bb423e;
            display: block;
            padding: 10px 15px 10px 15px;
            margin-right: -5px;
            color: #fff;
            text-decoration: none;
            -moz-border-radius-topleft: 6px;
            -moz-border-radius-topright: 6px;
            -webkit-border-top-left-radius: 6px;
            -webkit-border-top-right-radius: 6px;
        }
        
    #tht_navigation ul li a {
        color: #fff;
        text-decoration: none;
    }
    
#header {
    position: relative;
}
#top_nav {
    position: relative;
    top: -93px;
    right: 12%;
    float: right;
    background: #FFF;
    font-size: 0.9em;
    margin-bottom: -93px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-width: 0 2px 2px 2px;
    border-style: solid;
    border-color: #FFF;
    z-index: 9999;
}

Aha! Too much CSS3. Huh? Well, yes. I love -moz, -webkit stuff, also z-index.

I wanted just to alert people about 1.2's style changes. Well, when you get your hands on the CSS you will most probably find tons of things and comments like:

Code:

/* ARGHHHH. Its midnight. Its CSS3. I wanna !important and !veryimportant. */

Anyway. Just..Prep your styles for 1.2. ;p

[Kevin]

Whoa. Looks great, but my theme doesn't have the same navigation, if you know what I mean. Thanks for the CSS for the warnings though!