Textpattern CMS

#1 2010-04-08 18:43:59

SuperMAG

Member

Registered: 2010-04-04

Posts: 35

Trying to convert my old css of my tabs

I need to make a style for my tabs, that suits my site. but i dont understand css because i am not a coder.

if any one of you have time to quickly convert this css:

The Css should have these tags, “usual”:

/* Style for Usual tabs */
.usual {
  background:#181818;
  color:#111;
  padding:15px 20px;
  width:500px;
  border:1px solid #222;
  margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px;
  margin-left:0;
  font:10px Verdana;
  color:#FFF;
  background:#444;
}
.usual ul a:hover {
  color:#FFF;
  background:#111;
  }
.usual ul a.selected {
  margin-bottom:0;
  color:#000;
  background:snow;
  border-bottom:1px solid snow;
  cursor:default;
  }
.usual div {
  padding:10px 10px 8px 10px;
  *padding-top:3px;
  *margin-top:-15px;
  clear:left;
  background:snow;
  font:10pt Georgia;
}
.usual div a { color:#000; font-weight:bold; }

#usual2 { background:#0A0A0A; border:1px solid #1A1A1A; }
#usual2 a { background:#222; }
#usual2 a:hover { background:#000; }
#usual2 a.selected { background:snow; }
#tabs3 { background:#FF9; }*

The css i am trying to convert is this: http://www.joomlaworks.gr/content/view/15/42/ (look at the tabs of that)

Their css is:

/* --- Generic --- */
a:active,a:focus {outline:0;}
.jwts_clr {clear:both;height:0;line-height:0;}

/* --- Tabs --- */
.jwts_tabberlive {margin:4px 0px;padding:0px;}
.jwts_tabberlive .jwts_tabbertab {margin:0px;padding:6px;border:1px solid #bbb;border-top:0px;/*height:300px;overflow:auto;*/}
.jwts_tabberlive .jwts_tabbertab h2,
.jwts_tabberlive .jwts_tabbertab h3,
.jwts_tabberlive .jwts_tabbertabhide {display:none;}
ul.jwts_tabbernav {margin:0px;padding:3px 4px;list-style:none;list-style-image:none;background:none;border-bottom:1px solid #bbb;line-height:normal;height:auto;}
ul.jwts_tabbernav li {margin:0px;padding:0px;list-style:none;list-style-image:none;background:none;display:inline;}
ul.jwts_tabbernav li a,
ul.jwts_tabbernav li a:link {font-size:12px;font-weight:bold;margin:0px 1px;padding:3px 4px;color:#333;border:1px solid #bbb;border-bottom:none;background:#eee url(slide_bg.png) repeat-x top;}
ul.jwts_tabbernav li a:visited {color:#333;}
ul.jwts_tabbernav li a:hover {font-size:12px;font-weight:bold;margin:0px 1px;padding:3px 4px;color:#c64934;border:1px solid #aaa;border-bottom:none;background:#f2f2f2;text-decoration:none;}
ul.jwts_tabbernav li a:active,ul.jwts_tabbernav li a:focus {outline:0;}
ul.jwts_tabbernav li.jwts_tabberactive a {background:#fff;border-bottom:1px solid #fff;}
ul.jwts_tabbernav li.jwts_tabberactive a:hover {background:#fff;border-bottom:1px solid #fff;text-decoration:none;}
ul.jwts_tabbernav li.jwts_tabberactive,
ul.jwts_tabbernav li.jwts_tabberinactive {background:none;padding:0px;margin:0px;}
.jwts_tabberlive .jwts_tabbertab,ul.jwts_tabbernav {text-align:left;} /* force content orientation */

/* --- Slides --- */
.jwts_slider {margin:4px 0px;padding:0px;}
.jwts_slidewrapper {border:none;width:100%;visibility:hidden;height:0px;overflow:hidden;position:relative;margin:0;padding:0;}

/* DEFAULT STYLING */
.jwts_title {margin:0 0 1px 0;padding:0px;overflow:hidden;background:url(slide_bg_r.png) no-repeat right;cursor:pointer;}
.jwts_title_left {background:url(slide_bg_l.png) no-repeat left;margin:0 10px 0 0;}
a.jwts_title_text,
a.jwts_title_text:link {display:block;background:url(videodown.gif) no-repeat;background-position:right;padding:0 2px 0 10px;margin:0 0 0 8px;line-height:22px;font-size:12px;font-weight:bold;text-decoration:none;color:#444;}
a.jwts_title_text:visited {color:#444;}
a.jwts_title_text:hover {display:block;background:transparent url(videodown.gif) no-repeat;background-position:right;padding:0 2px 0 10px;margin:0 0 0 8px;line-height:22px;font-size:12px;font-weight:bold;text-decoration:none;color:#0074BD;}
.jwts_slidecontent {padding:4px 12px 8px 12px;margin:0px;position:relative;background:none;border:none;}
.jwts_title_left,.jwts_slidecontent {text-align:left;} /* force content orientation */

/* SOME NEW STYLING (just in case)
.jwts_title {margin:0 0 1px 0;padding:0px;overflow:hidden;}
.jwts_title_left {}
a.jwts_title_text,
a.jwts_title_text:hover {display:block;padding:0 2px 0 16px;margin:0;line-height:22px;font-size:12px;font-weight:bold;text-decoration:none;}
a.jwts_title_text,
a.jwts_title_text:link {color:#fff;background:url(slide_bg_b.png) repeat-x;border:1px solid #444;}
a.jwts_title_text:visited {color:#fff;}
a.jwts_title_text:hover {color:#c64934;background:transparent url(slide_bg.png) repeat-x;border:1px solid #ccc;}
.jwts_slidecontent {padding:4px 12px 8px 12px;margin:0px;position:relative;background:#fbfbfb;border:1px dotted #aaa;border-top:none;}
*/

Can any one arrange it and make it work with my new tabs, its called idTabs: http://www.sunsean.com/idTabs/

I just need the css to work, i can then manage the images etc.

Thanks

(added bc.. for proper display of code blocks. -Els
P.S. I was tempted to remove all your *s but managed to resist. Posts with lots of bold text are not very pleasant to read, you know…)

Last edited by els (2010-04-08 19:41:18)

#2 2010-04-09 17:55:35

SuperMAG

Member

Registered: 2010-04-04

Posts: 35

Re: Trying to convert my old css of my tabs

lol i tried to do the bc, but it didnt worked (god i miss those bbcodes, why change it anyway).

Anyway can anyone help here plz.

Last edited by SuperMAG (2010-04-09 17:57:10)