A common request is the ability to do rounded modules on ONEsite. There are MANY different ways to do rounded corners each with different advantages/disadvantages. But here is a good global way to accomplish this...
The first part is to decide if you want all the modules to be styled the same or different.
Modules within ONEsite have a unique classname plus a secondary global class. For instance the login module uses: mod_login and module.
This additional classname can be used to target the class module which is used across ALL modules. If you only wanted to target the login module you could simply target mod_login.
In my opinion the best method for rounded corners is the "sliding door" method. Essentially it uses two images (one for the left and one for right). Once these are put together it creates the illusion of rounded corners. The other advantage to this is that these can grow to virtually size and will expand or shrink based on their outer width. So it's a good global solution...
.module .title_container {
height:auto; width:auto; padding: 0 9px 0 0;
background: url(topRight.gif) top right no-repeat;
}
.module h3.title {
height: 40px !important;
background: url(topLeft.gif) 0% 0% no-repeat;
}
What it Does:
.module .title_container = this targets the module level title_container. This is the portion that wraps the title at the top of the module. The code is giving just a little padding and then setting the background to appear but be placed at the top right. This will be your wide graphic.
.module h3.title = This has a height of 40px (it could be whatever you need it to be). But then attaches a graphic to the top left of the title class. This is the very small left side 'cap' that will be placed on the end of wider right graphic. It keeps the actual h3 level title in place.
The Pieces and the Result:



Send Message
Add Friend
Let me know when you get some of the songs on myspace.
Cody09:51 AM CST