I can't find the right bits...

Discussion in 'CSS' started by scart3r, Feb 22, 2007.

  1. #1
    I am a total noobie at changing stuff - and am stuck and slightly frustrated. Is someone able to help me out and fix this for me? Here is my site - http://www.steroidsatmsu.com

    I need to change the text colours so that it matches a bit better. I figured out how to make it look pretty, played with the images and changed those colours. but am having issues with the CSS. Here is the Css - any one wanna have a go?

    /* custom stuff */
    html {
      height: 100%;
      margin-bottom: 1px;
    }
    
    form {
      margin: 0;
      padding: 0;
    }
    
    body {
    	margin: 0px 0px 0px 0px;
    	height: 100%;
    	font-size: 12px;
    	background: #f5d1e4 url(../images/omt_bg_top.png) repeat-x;
    }
    
    a:link, a:visited {
    	color: #AB290F; 
    	text-decoration: none;
    	font-weight: normal;
    }
    
    a:hover {
    	color: #c00;	
    	text-decoration: underline;
    	font-weight: normal;
    }
    
    p {
      margin-top: 0;
      margin-bottom: 5px;
      text-align: left;
    }
    
    div, p,  table, td, th {
    	font-family: Lucida Grande, Verdana,Helvetica,Arial,sans-serif;
    	line-height: 140%;
    	color: #666;	
    }
    
    fieldset {
    	border: 1px solid #d2d8de;
    }
    
    #wrapper div, #wrapper p, #wrapper table, #wrapper td, #wrapper th {
    	text-align: left;
    }
    
    
    
    
    span.pathway {
    	padding-left: 10px;
    	color: #394048;
    }
    
    
    div.componentheading {
      padding-left: 0px;
    }
    
    
    a.readon {
    	margin-top: 10px;
    	padding-right: 10px;
    	line-height: 14px;
    	height: 16px;
    }
    
    h1 {
    	padding: 0;
    	padding-bottom: 5px;
    	font-family:Helvetica ,Arial,sans-serif;
    	font-size: 18px;
    	font-weight: bold;
    	vertical-align: bottom;
    	color: #666;
    	text-align: left;
    	width: 100%;	
    }
    
    h2, .contentheading {
    	font-family: Arial Narrow, Helvetica Nueue, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 16px;
    	color: #e2c9da;
    }
    
    h3 { 
    	margin: 0;
    }
    
    .componentheading, #mainbody h3 {
    	margin: 0;
    	margin-bottom: 10px;
    	font-size: 11px;
    	font-family: Arial;
    	font-weight: bold;
    	text-transform: uppercase;
    	color: #806d7a;
    	border-bottom: 1px solid #D2D8DE;
    }
    
    #mainbody h3 {
    	line-height: 140%;
    	height: 140%;
    	padding: 0;
    	text-indent: 0;
    }
    
    
    
    
    table.blog td.contentheading {
    
    }
    
    table.contenttoc {
      margin: 5px;
      border: 1px solid #ccc;
      padding: 5px;
    }
    
    table.contenttoc td {
      padding: 0 5px;
    }
    
    
    td.buttonheading {
    	
    }
    
    td.sectiontableheader {
      background: #efefef;
      color: #333;
      font-weight: bold;
      padding: 4px;
      border-right: 1px solid #fff;
    }
    
    tr.sectiontableentry1 td, tr.sectiontableentry2 td {
      padding: 4px;
    }
    
    td.sectiontableentry1, td.sectiontableentry2{
      padding: 3px;
    }
    
    table.contentpaneopen, table.contentpane {
      width: 100%;
    }
    
    div.moduletable h3 {
    	margin-left: -8px;
    	margin-right: -7px;
    	border: 0px solid #f00;
    	margin-bottom: 5px;
    	height: 29px;
    	line-height: 29px;
    	font-size: 11px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	text-transform: uppercase;
    	text-indent: 8px;
    	color: #5d4659;
    }
    
    #leftnav div.moduletable h3 {
    		background: url(../images/omt_moduletitle.png) 0 0 repeat-x;
    
    }
    
    #leftnav div.moduletable {
    	background: url(../images/omt_module_bg.png) 0 28px no-repeat;
    }
    
    #leftnav ul {
    	padding-left: 0;
    	margin-left: 12px;
    }
    
    #leftnav li {
    	margin-bottom: 5px;
    }
    
    div.moduletable {
    	padding-bottom: 15px;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    .small {
    	font-size: 10px;
    	color: #999;
    	font-weight: normal;
    	text-align: left;
    }
    
    .modifydate {
      height: 20px;
      vertical-align: bottom;
    	font-size: 10px;
    	color: #999;
    	font-weight: normal;
    	text-align: left;
    }
    
    .createdate {
    	height: 20px;
    	vertical-align: top;
    	font-size: 10px;
    	color: #999;
    	font-weight: normal;
    	vertical-align: top;
    	padding-bottom: 5px;
    	padding-top: 0px;
    
    }
    
    .clr {
    	clear: both;
    }
    
    #page_bg {
    	height: 100%; 
    	padding: 0;
    	margin-bottom: 1px;
    }
    
    div.mosimage {
      margin: 5px;
    }
    
    div.mosimage_caption {
      font-size: 10px;
      color: #666;
    }
    
    table.adminform textarea {
      width: 540px;
      height: 400px;
      font-size: 1em;
      color: #000099;
    }
    
    div.search input {
    	width: 145px;
    	border: 1px solid #ccc;
    	margin: 15px 0 10px 0;
    	
    }
    
    /** some content stuff **/
    div#wrapper {
    		height: 100%;
    		margin-left: auto;
    		margin-right: auto;
    		min-width: 750px;
    		max-width: 950px;
    		width: expression(document.body.clientWidth > 950? "950px": "auto" );
    }
    
    div#top {
    	background: url(../images/omt_header_m.png) 0 0 repeat-x;
    }
    
    div#top div {
    	background: url(../images/omt_header_l.png) 0 0 no-repeat;
    }
    
    div#top div div {
    	background: url(../images/omt_header_r.png) 100% 0 no-repeat;
    	height: 98px;
    	position: relative;
    }
    
    span#logo {
    	position: absolute;
    	display: block;
    	left: 35px;
    	top: 28px;
    	width: 100px;
    	height: 91px;
    	z-index: 90;
    	background: url(../images/omt_logo_trans.png) 0 0 no-repeat !important;
    	background: transparent;
    }
    
    span#logo_header {
    	position: absolute;
    	left: 135px;
    	top:28px;
    	z-index: 90;
    	width: 242px;
    	height: 60px;
    	background: url(../images/omt_logo_header.png) 0 0 no-repeat !important;
    	background: transparent;
    }
    
    span#joomla {
    	position: absolute;
    	right: 14px;
    	top: 21px;
    	z-index: 99;
    	width: 151px;
    	height: 140px;
    	background: url(../images/omt_joomla_trans.png) 0 0 no-repeat !important;
    	background: transparent;
    }
    
    div#middle {
    	background: #fff url(../images/omt_shadow_r2.png) 100% 0 repeat-y;
    }
    
    div#middle_2 {
    	background: url(../images/omt_shadow_r1.png) 100% 0 no-repeat;
    }
    
    div#middle_3 {
    	background: url(../images/omt_shadow_l2.png) 0 0 repeat-y;
    }
    
    div#middle_4 {
    	background: url(../images/omt_shadow_l1.png) 0 0 no-repeat;
    	padding: 0 19px; 
    }
    
    div#bottom {
    	background: url(../images/omt_shadow_b.png) 0 0 repeat-x;
    }
    
    div#bottom div {
    	background: url(../images/omt_shadow_bl.png) 0 0 no-repeat;
    }
    
    div#bottom div div {
    	background: url(../images/omt_shadow_br.png) 100% 0 no-repeat;
    	height: 44px;
    	padding-top: 5px;
    	font-size: 10px;
    	color: #A2A7A9;
    	text-align: center;
    }
    
    div#navigation {
    	height: 28px;
    	background: url(../images/omt_buttonbar.png) 0 0 repeat-x;
    
    }
    
    div#centernav {
    	margin: 0 auto !important;
    	margin: 0;
    	display: table !important;
    	display: block;
    	text-align: center;
    	
    }
    
    /* this is not xhtml compliant but works in ie/firefox */
    span#topnav {
    	padding: 0;
    	white-space: nowrap;
    	display: table-cell !important;
    	display: inline-block;
    }
    
    /** tab menu stuff **/
    #topnav ul#mainlevel {
    	float: left;
      padding: 0;
      margin:0;
      list-style: none;
      border-left: 1px solid #959A9E;
      border-right: 1px solid #ECF4FA;
    }
    
    #topnav #mainlevel li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	border-right: 1px solid #806d7a;
    }
    
    #topnav #mainlevel a:link, #topnav #mainlevel a:visited {
    	font-size: 11px;
    	font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
    	text-transform: uppercase;
      color: #806d7a;
    	float:left;
      display:block;
    	padding: 0 30px;
    	height: 28px;
    	line-height: 28px;
      text-decoration: none;
    	background: url(../images/omt_button_off.png) 0 0 no-repeat;
    	border: 0;
    }
    
    #topnav #mainlevel li.red_active_menu {
    	border-right: 1px solid #721901;
    }
    
    #topnav #mainlevel li.red_active_menu a:link, #topnav #mainlevel li.red_active_menu a:visited {
    	background: url(../images/omt_button_on.png) 0 0 no-repeat;
    	color: #EEF0F2;
    	float:left;
    		padding: 0 30px;
    	height: 28px;
    	line-height: 28px;
    }
    
    
    #topnav #mainlevel a:hover {
      color: #616B78;
    }
    
    #topnav #mainlevel li.red_active_menu a:hover {
    	color: #fff;
    }
    
    #showcase {
    	margin: 0;
    	padding: 1px 0;
    	background: #47505A url(../images/omt_showcase_bg.png) 0 0 repeat-x;
    }
    
    /*
    turned OFF disable header in showcase area
    #showcase .moduletable h3 {
    	display: none;
    	margin: 0;
    	padding: 0;
    }
    */
    
    #showcase .moduletable {
    	padding: 5px 10px;
    	margin: 0;
    }
    
    #showcase td, #showcase div, #showcase p, #showcase span {
    	color: #D8DBDE;
    }
    
    #showcase .contentheading {
    	font-family: Arial Narrow, Helvetica Nueue, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 16px;
    }
    
    #user1 {
    	width: 50%;
    }
    
    #user2 {
    	width: 50%;
    }
    
    table.contentarea {
    	background: url(../images/omt_body_right.png) 100% 0 repeat-y;
    }
    
    
    #leftnav {
    	width: 180px;
    	border: 0px solid #ff0;
    	background: url(../images/omt_column_left.png) 0 0 repeat-y;
    }
    
    #leftborder {
    	border-left: 1px solid #D3D8DE;
    }
    
    #lefttop {
    		border: 0px solid #00f;
    }
    
    div#mainbody { 
    	border: 0px solid #0ff;
    	padding: 12px;
    }
    
    #rightnav {
    	width: 180px;
    	border: 0px solid #00f;
    	background: url(../images/omt_column_right.png) 100% 0 repeat-y;
    	
    }
    
    #righttop {
    	background: url(../images/omt_bodytop_r.png) 0 0 no-repeat;
    	height: 29px;
    }
    
    #rightbody {
    	background: url(../images/omt_rightnav_bg.png) 0 0 repeat-x;
    }
    
    #pathway{
    	background: url(../images/omt_bodytop.png) 0 0 repeat-x;
    	padding-top: 5px;
    	height: 29px;
    }
    
    #leftnav ul.submenu, #leftnav ul.submenu ul {
    	list-style:none;
    	margin: 0;
    	padding: 0;
    }
    
    
    #leftnav ul.submenu li {
    	background: none;
    	padding: 0;
    	margin: 0;
    }
    
    #leftnav ul.submenu ul li {
    	text-indent: 10px;
    }
    
    #leftnav ul.submenu ul li {
    	text-indent: 20px;
    }
    
    #leftnav ul.submenu ul ul li {
    	text-indent: 30px;
    }
    
    #leftnav ul.submenu ul ul ul li {
    	text-indent: 40px;
    }
    
    #leftnav ul.submenu ul ul ul ul li {
    	text-indent: 50px;
    }
    
    ul.submenu a:link, ul.submenu a:visited {
    	display: block;
    	width: 147px;
    	padding-right: 15px;
    	padding-bottom: 5px;
    	background: url(../images/omt_menu_red.png) 100% -2px no-repeat;
    }
    
    ul.submenu a:hover {
    	background-position: 100% -53px;
    	text-decoration: none;
    }
    
    a.mainlevel:link, a.mainlevel:visited {
    	display: block;
    	width: 147px;
    	padding-right: 15px;
    	padding-bottom: 5px;
    	background: url(../images/omt_menu.png) 100% -2px no-repeat;
    }
    
    a.mainlevel:hover {
    	background-position: 100% -53px;
    	text-decoration: none;	
    }
    
    div#footer {
    	margin-top: 10px;
    	width: 766px;
    	height: 28px;
    	line-height: 28px;
    	text-indent: 20px;
    	background: #e6eef8;
    }
    
    div#footer table {
    	margin-top: 4px;
    }
    
    div#footer table td {
    	text-align: center;
    }
    
    div#footer a {
    	padding: 0 10px;
    }
    
    
    
    
    
    div#topmodule {
    	position: relative;
    	margin-top: 20px;
    	margin-bottom: 20px;
    	height: 80px;
    	overflow: hidden;
    }
    
    div#quote {
    	padding-top: 10px;
    	margin-right: 10px;
    	text-align: left;
    	float: right;
    	width: 505px !Important;
    	width: 485px;
    }
    
    div#quote td {
    	text-align: left;
    }
    
    table.menublock {
    	margin: 0 15px;
    }
    
    td.summary {
    	background: #eef3f9;
    	padding: 5px;
    	padding-left: 10px;
    } 
    
    td.latestnews {
    	background: #eef3f9;
    	padding: 5px;
    }
    
    
    
    
    /* some page content things */
    
    table.blog span.article_seperator {
    	display: block;
    	height: 20px;
    }
    
    table.nopad {
    	width: 100%;
    	border-collapse: collapse;
    	padding: 0;
    	margin: 0;
    	margin-bottom: 15px;
    }
    
    table.nopad td.middle_pad {
    	width: 20px;
    }
    
    body.contentpane {
    	background: #fff;
    }
    Code (markup):
     
    scart3r, Feb 22, 2007 IP
    Clive likes this.
  2. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #2
    Hey, I would help if you pointed me to specific CSS issues I should be looking for..
     
    Clive, Feb 22, 2007 IP
    scart3r likes this.
  3. scart3r

    scart3r Notable Member

    Messages:
    3,513
    Likes Received:
    279
    Best Answers:
    0
    Trophy Points:
    250
    #3
    Problems solved. Thanks heaps Clive :D
     
    scart3r, Feb 22, 2007 IP
  4. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #4
    My pleasure to make myself useful to others sometimes ;)
     
    Clive, Feb 22, 2007 IP