Styling the tabs in Active Social 1.3 is a very easy process. All Screen shots were taken in Firefox 3.5.7, click to enlarge images.

The tabs’ structure is not very complicated, it is simply a div that contains a list. Each list item contains a link.

[Red] tag: div – class: astabstrip
[Blue] tag: li – classes: asheader, astab
[Orange] tag: li – classes: asheader, astabsel
[Purple] tag: a
[Green] tag: a

 Here are the default classes from the module.css in the root directory.

div#amsocial .astabarea{margin-top:15px;width:100%;}

div#amsocial .astabstrip{margin:0;padding:0;padding:.2em;zoom:1;}

div#amsocial .astabstrip ul{list-style:none;position:relative;padding:.2em .2em 0;-moz-border-radius: 4px; -webkit-border-radius: 4px;}

div#amsocial .astabstrip li{list-style:none;position:relative;float:left;border-bottom-width:0 !important;margin:0 .2em -1px 0;padding:0;-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;-moz-border-radius-topright: 4px;-webkit-border-top-right-radius:4px;outline:none;}

div#amsocial .astabstrip li a{float:left;text-decoration:none;padding: .5em 1em;cursor:pointer;outline:none;}

div#amsocial .astabstrip li.astabsel{padding-bottom:1px;border-bottom-width:0;}

div#amsocial .astabstrip li.astabsel a{cursor:text;}

You should not, under any circumstance, change the styles in this file (DesktopModules/ActiveSocial/module.css). The css file loaded from the themes directory will get loaded after this one so please make all your changes there or in the skin.css.

These mainly provide the structure, and the styles in the modules.css from the themes directory dictates the color.

div#amsocial .astabstrip ul{background-color:#f5f5f5;border:solid 1px #aaa;}

div#amsocial .astabstrip li{border:solid 1px #aaa;}

div#amsocial .astabstrip li:hover{border:solid 1px #555;}

div#amsocial .astabstrip li.astabsel{background-image:none;background-color:#fff;}

div#amsocial .astabstrip li.astabsel:hover{border-color:#aaa;}

div#amsocial .astabcontent{background-color:#fff;}

Altering this allows you to control layout, color and style for the tabs in Active Social. Im going to provide some examples of changes that can easily be made, all changes will be made to a css file in the themes directory. Before we begin I am going to create a copy of the themes/_activesocial directory and rename it. Something to note, if there is a style in the root css that you do not want, then you can’t simply remove it. You will need to overwrite it in the theme css.

The first example I will provide is very simple, just changing a color. This can be useful if you want to tie in the theme a little closer to your site skin. You can use any hex value or color here, I just chose a random color.

Here is the css. In this example I only changed the value of one style. Any number of other simple changes like this can be made.

div#amsocial .astabstrip ul{background-color:#abcdef;border:solid 1px #aaa;}

div#amsocial .astabstrip li{border:solid 1px #aaa;}

div#amsocial .astabstrip li:hover{border:solid 1px #555;}

div#amsocial .astabstrip li.astabsel{background-image:none;background-color:#fff;}

div#amsocial .astabstrip li.astabsel:hover{border-color:#aaa;}

div#amsocial .astabcontent{background-color:#fff;}

In this next example, I tried to cut out a lot of things to provide tabs for a minimalist type site. This is for a site where they do not want the tabs to be such a heavy visual element, but still provide the functionality.

div#amsocial .astabstrip ul{background:none;border-bottom:solid 1px #aaa;}

div#amsocial .astabstrip li{border:none;background:none;}

div#amsocial .astabstrip li:hover{}

div#amsocial .astabstrip li.astabsel{background-image:none;border:solid 1px #aaa;background-color:#fff;}

div#amsocial .astabstrip li.astabsel:hover{border-color:#aaa;}

div#amsocial .astabcontent{background-color:#fff;}

In my last example, I change the horizontal tabs into a vertical layout and placed them on the side of the page. This effect was achieved by editing only the css, I did not alter any templates. I did add a few classes to the theme css file from the root css file.

div#amsocial .astabstrip{margin:0;padding:0;padding:.2em;zoom:1;height:0px;}

div#amsocial .astabstrip ul{list-style:none;position:relative;right:185px;}

div#amsocial .astabstrip li{border:solid 1px #aaa;border-bottom-width:1px !important;list-style:none;position:relative;float:none;width: 165px; padding-right: 5px; padding-top: 5px;margin:0 .2em .2em 0;padding:3px;-moz-border-radius: 4px; -webkit-border-radius: 4px;outline:none;}

div#amsocial .astabstrip li:hover{border:solid 1px #555;}

div#amsocial .astabstrip li.astabsel{background-image:none;background-color:#fff;padding:3px;}

div#amsocial .astabstrip li.astabsel:hover{border-color:#aaa;}

div#amsocial .astabstrip li a{float:none;text-decoration:none;text-align:right;padding:3px;cursor:pointer;outline:none;}

div#amsocial .astabstrip li.astabsel a{cursor:text;}

div#amsocial .astabcontent{background-color:#fff;padding-top:0px;}

/*added*/

div#amsocial .asimagewrap{margin-top:230px;border:solid 1px #aaa;}

div#amsocial .asjournalwrap{padding:0px;}

The css here might not be completely plug and play on your site, it will probably require a little modification. The most important parts are the float:none, right:185px, and the margin-top:230px;.

If you are trying to modify your theme, I highly suggest Firebug or IE developer toolbar to find the classes on each element.