Jump to content

URGENT JOOMLA HELP - CSS Problems


Recommended Posts

Hi, I am trying (and nearly finished) to create a template for my joomla CMS. I have found a css problem I CANT fix... the problem is that no matter what style or language I script my styles, I cannot get my header links (id="plinks") to change their style.

 

Here is the style for the "plinks"

 

#plinks {
background: url(../images/bg-menu.png);
height: 34px;
padding-top: 1px;	
      color: #FFFFFF;
font-family: verdana;
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
[/quote]

You will probably say there are other styles counter-acting this one, but trust me... I have tried to put this right... Here is my full CSS file...

[quote]
html {
  height: 100%;
  margin-bottom: 0px;
}

form {
  margin: 0;
  padding: 0;
}

img,table {
border: none;
}

body {
font-family: Tahoma, Verdana, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 12px;
color: #666;
background:url(../images/bg-body.jpg) repeat-x top center #000000;
}

body.contentpane {
background: url(../images/bg.jpg) bottom left repeat-x;
}

a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #555;
}

a:hover {
text-decoration: none;
}

input.button, .validate  {
border: 1px solid #CCC;
color: #666;
font-size: 10px;
background: #f9f9f9;
}

input.button:hover, .validate:hover  {

}

p {
margin-top: 0;
margin-bottom: 5px;
text-align: justify;
}

.inputbox {
border: 1px solid #ccc;
color: #666;
padding: 2px;
background: #f4f4f4;
}
.inputbox:hover {

}

#search .search .inputbox {
width: 130px;
height: 14px;
font-size: 11px;
padding: 6px 0 0 18px;
background-color: #000000;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/

#plinks {
background: url(../images/bg-menu.png);
height: 34px;
padding-top: 1px;	
      color: #FFFFFF;
font-family: verdana;
font-weight: bold;
font-size: 12px;
text-decoration: none;
}

#all {
background:url(../images/bg-body.jpg) repeat-x top center #000000;
margin: 0 auto;
padding: 0px 0 0 0;
}

#top {
width: 900px;
margin: 0 auto;
background: none;
}

#page_bg {
padding: 0;
}

div.center {
text-align: center;
margin: 0 auto;
width: 898px;
border-right: 1px solid #e2e2e2;
border-left: 1px solid #e2e2e2;
}

div#wrapper {
margin: 0 auto;
width: 898px;
text-align: left;
background: #f9f9f9 url(../images/content.jpg) top left repeat-x;
}

#middle {
background: url(../images/middle.jpg) top center no-repeat;
width: 900px;
height: 7px;
margin: 0 auto;
font-size: 0;
}

#header {
background: url(../images/header.jpg) top left repeat-x;
width: 900px;
margin: 0 auto;
height: 206px;
}

#content {
width: 900px;
margin: 0 auto;
overflow: hidden;
}

#logo {
padding: 40px 0 0 40px;
text-align: left;
margin: 0 auto;
width: 860px;
}

#logo a, #logo a:link, #logo a:hover {
font-weight: normal;
font-family: Tahoma, Verdana, sans-serif;
font-size: 28px;
padding: 0;
margin: 0;
letter-spacing: 1px;
color: #5a8c94;
text-decoration: none;
outline: none;
line-height: 36px;
}

.pill_m {
width: 700px;
text-align: center;
height: 24px;
margin: 0 auto;
float: left;
}

#pillmenu {
float: left;
width: 700px;
}

#pillmenu ul {
margin: 0;
padding: 0;
list-style: none;
}

#pillmenu li {
float: left;
margin: 0 2px 0 0;
padding: 0;
height: 24px;
background: url(../images/menu_li.jpg) top right no-repeat;
}

#pillmenu li:hover {

}

#pillmenu li a#active_menu-nav {
color: #5f5f5f;
}

#pillmenu li a {
font-family: Verdana, sans-serif;
font-size: 11px;
float: left;
display: block;
line-height: 24px;
padding: 0 10px 0 10px;
color: #8f8f8f;
text-decoration: none;
background: url(../images/menu_li_a.jpg) top left no-repeat;
}

#pillmenu li a:hover {
color: #5f5f5f;
}

#search {	
width: 190px;
height: 24px;
text-align: left;
background: url(../images/search.jpg) top right no-repeat;
margin: 0 auto;
float: right;
}

#area {
padding: 0;
margin: 0 auto;
}

#leftcolumn {
margin: 8px;
width: 180px;
float: left;
text-align: left;
}

#rightcolumn {
margin: 8px 10px;
width: 180px;
float: left;
text-align: left;
}

div#maincolumn {
float: left;
width: 476px;
margin: 8px 0;
}

div#maincolumn_full {
float: left;
width: 664px;
margin: 8px 0;
}

div.nopad {
overflow: hidden;
}

div.nopad ul {
clear: both;
}

td.middle_pad {
width: 20px;
}

#banner_l {
text-align: left;
padding: 0 0 0 24px;
}

#content_bottom {
background: url(../images/content_bottom.jpg) bottom center no-repeat;
height: 2px;
width: 900px;
margin: 0 auto;
font-size: 0;
}

#footer {
margin: 0 auto;
width: 900px;
height: 50px;
text-align: center;
vertical-align: top;
padding-bottom: 10px;
}

#footer p {
height: 20px;
text-align: right;
padding: 10px 30px 0 0;
color: #666;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}

/* headers */
div.componentheading {
height: 22px;
padding: 0 0 0 4px;
}
table.blog {

}
h1 {
padding: 0;
font-family: Tahoma, Verdana, sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #333;
text-align: left;
width: 100%;
}

h2, .contentheading {
padding: 0;
font-family: Tahoma, Verdana, sans-serif;
font-size: 14px;
vertical-align: middle;
color: #0099cc;
text-align: left;
font-weight: normal;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

h4 {
font-family: Tahoma, Verdana, sans-serif;
color: #333;
}

h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-family: Tahoma, Verdana, sans-serif;
font-size: 14px;
text-align: left;
color: #555;
padding: 0;
}
/* small text */
.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: right;
}

.createdate {
height: 20px;
vertical-align: top;
font-size: 10px;
color: #999;
font-weight: normal;
vertical-align: top;
padding-top: 0px;
}

a.readon {
display: block;
float: right;
line-height: 14px;
font-size: 10px;
text-decoration: underline;
padding: 1px 2px 1px 2px;
color: #666;
}
a.readon:hover {
color: #333;
text-decoration: none;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
background-color: #f1f1f1;
color: #333;
}

.ol-background {
background-color: #f1f1f1;
color: #333;
}

.ol-textfont {
font-family: Tahoma, Verdana, sans-serif;
font-size: 10px;
}

.ol-captionfont {
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
background: #f6f6f7;
}
.ol-captionfont a {
background-color: #f1f1f1;
color: #333;
text-decoration: none;
font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
display: block;
height: 20px;
}

.article_column {

}

.column_separator {

}

td.buttonheading {
text-align: right;
width: 0;
}

.clr {
clear: both;
}

table.blog span.article_separator {
display: block;
height: 20px;
}



/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  color: #333;
  font-weight: bold;
  padding: 4px;
  border-bottom: 1px solid #CCC;
  background: #e7e7e7;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
  color: #666;
  font-size: 11px;
}


/* content styles */
.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
}

table.contentpane td{
text-align: left;
}

table.contentpane td.contentdescription {
width: 100%;
}

table.contentpane  {
text-align: left;
float: left;
width: 100%;
margin: 8px;
}

table.contentpane ul li a .category {
color: #FF8800;
}

table.contentpane ul li {
color: #333;
}

table.contentpaneopen {
margin: 2px 4px;
}

table.contentpaneopen li {
margin-bottom: 5px;
}

table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #669933;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

table.contentpaneopen h4 {
font-family: Tahoma, Verdana, sans-serif;
color: #669933;
}

.highlight {
background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
}

div.module_menu, div.module, div.module_text {
padding: 0;
margin: 0 0 14px 0;
}

div.module_menu div, div.module div, div.module_text div {
padding: 0;
background: #e2e2e2;
}

div.module_menu div div, div.module div div, div.module_text div div {
padding: 1px;
}

div.module_menu div div div, div.module div div div, div.module_text div div div{
padding: 0 0 1px 0;
background: #f6f6f6;
}

div.module_menu div div div div, div.module div div div div {
background: #f6f6f6;
padding: 0;
}

div.module_menu div div div form, div.module div div div form{
padding: 6px 0 6px 0;
}




div.module_menu ul {
list-style: none;
}

div.module_menu ul li{
margin: 0;
padding: 0;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
font-weight: bold;
background: transparent url(../images/blue/bullet2.jpg) top left no-repeat;
padding: 2px 0 2px 25px;
line-height: 24px;
}


#leftcolumn div.module table ,#rightcolumn div.module table {

}

#leftcolumn div.module table.poll {
padding: 0;
margin: 0 auto;
}

/* LEFT COL H3 */
#leftcolumn h3, #rightcolumn h3 { 	
color: #666;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
text-align: left;
height: 26px;
width: 168px;
text-decoration: none;
padding: 0 0 0 10px;
background: url(../images/h3.jpg) top left no-repeat;
font-weight: normal;
line-height: 26px;
}

#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c, 
#rightcolumn .moduletable_menu, #rightcolumn .moduletable, #rightcolumn .moduletable_text, #rightcolumn .c {
margin: 0 0 16px 0;
padding: 0 0 8px 0;
}

#leftcolumn .moduletable form, #leftcolumn .module_text .bannergroup_text,
#rightcolumn .moduletable form, #rightcolumn .module_text .bannergroup_text {
padding: 6px 10px;
}

#leftcolumn ul.menu, #rightcolumn ul.menu {
margin: 0;
padding: 2px;
list-style: none;
}

#leftcolumn ul.menu li, #rightcolumn ul.menu li {
margin: 0 4px 0 4px;
padding: 0;
}

#leftcolumn ul.menu li:hover, #rightcolumn ul.menu li:hover {

}

/*LEFT COL LINK*/
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
line-height: 20px;
padding: 0 0 0 10px;
text-decoration: none;
color: #666;
font-weight: normal;
font-size: 11px;
background: url(../images/menu_row.jpg) center left no-repeat;
margin: 0;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
color: #333;
}

/*LEFT COL CURRENT LINK*/
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
line-height: 20px;
padding: 0 0 0 10px;
text-decoration: none;
color: #333;
font-weight: normal;
font-size: 11px;
margin: 0;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {

}

/*LEFT COL SUB LINK*/
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link {
text-decoration: none;
color: #666;
margin: 0;
font-size: 11px;
background: url(../images/sub_menu_row.jpg) center left no-repeat;
font-weight: normal;
display: block;
line-height: 20px;
padding: 0 0 0 18px;
border: none;
}

#leftcolumn ul.menu li ul li#current a, #leftcolumn ul.menu li ul li#current a:link, #leftcolumn ul.menu li ul li#current a:visited, #leftcolumn ul.menu li ul li#current a:hover {
font-size: 11px;
margin: 0;
padding: 0 0 0 8px;
text-decoration: none;
border: none;
color: #333;
}
/*SUBMENU POSITION*/
#leftcolumn ul.menu li#current ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li {
margin: 0;
padding: 0;
}

/*CURRENT SUBMENU POSITION*/
#leftcolumn ul.menu li ul {
margin: 0;
padding: 0 0 0 6px;
}

#leftcolumn ul.menu li#current ul li a:hover {
color: #333;
}

#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
list-style: none;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
margin:6px 0;
padding:0;
list-style:none;
}

#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
margin:0;
padding:0 2px;
}

table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

div.search input {
width: 90px;
border: 0;
height: 15px;
}

form#form-login fieldset { 
border: 0 none; 
margin: 0; 
}
form#form-login ul li{ 
padding: 0; 
}

form#form-login ul li a {
text-align: left;
padding: 0;
font-size: 10px;
color: #555;
}

/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #333; }

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #333; text-align: center; }

/* Parameter Table */
table.paramlist {
margin-top: 5px;
}

table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
font-family: Tahoma, Verdana, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
padding: 4px;
font-size: 11px;
}

.bannerfooter_text {
padding: 4px;
font-size: 11px;
text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
text-align: left;
}

/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 15px;
}

legend {
margin: 0;
padding: 0 10px;
}

td.key {
border-bottom:1px solid #eee;
color: #333;
}

/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
font-size: 100%;
margin: 0;
}

/* System Standard Messages */
#system-message dd.message ul { 
background: #C3D2E5;
padding: 0;
margin: 0;
}

/* System Error Messages */
#system-message dd.error ul { 
color: #c00; 
background: #E6C0C0; 
border-top: 3px solid #DE7A7B; 
border-bottom: 3px solid #DE7A7B;
padding: 0;
margin: 0;
}

/* System Notice Messages */
#system-message dd.notice ul { 
color: #c00; 
background: #EFE7B8; 
border-top: 3px solid #F0DC7E; 
border-bottom: 3px solid #F0DC7E;
padding: 0;
margin: 0;
}



/* ****************************************************************************** */
/* blue */
input, button {

}
/* blue */
input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none;
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
color: #555;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}
a.sgfooter:hover {
color: #555;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}
#sgf {
font-size: 11px;
text-align: center;
width: 100%;
margin: 0 auto;
color: #555;
font-family: Tahoma, Verdana, sans-serif;
}
.sgf {
text-align: right;
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
color: #555;
text-decoration: none;
}
.sgf1 {
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
color: #555;
text-align: left;
}

a.sglink:link, a.sglink:visited {
color: #555;
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}
a.sglink:hover {
color: #555;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}

 

See what I mean? Here is my PHP File (Template) - BTW... the pics work fine, it is only the "plinks" that don't work...

 

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JPlugin::loadLanguage( 'tpl_SG1' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

</head>
<body id="page_bg">
<div id="all">
	<div id="top">	
		<div class="pill_m">
			<div id="pillmenu">
				<jdoc:include type="modules" name="user3" />
			</div>
		</div>
		<div id="search">
			<?php if($this->countModules('user4')) :?>
				<jdoc:include type="modules" name="user4" />
			<?php endif; ?>
		</div>
		<div class="clr"></div>
	</div>
	<div id="middle"></div>
	<div id="header">
		<div id="logo">
			<a href="index.php"><?php echo $mainframe->getCfg('sitename') ;?></a>
		</div>			
	</div>

	<div class="center">		

<div id="plinks">
			<?php if($this->countModules('plinks')) :?>
				<jdoc:include type="modules" name="plinks" />
			<?php endif; ?>
</div>

		<div id="wrapper">
			<div id="area">	

				<div id="content">	
					<div id="leftcolumn">	
						<jdoc:include type="modules" name="left" style="rounded" />
						<?php $sg = 'banner'; include "templates.php"; ?>
					</div>


					<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
					<div id="maincolumn">
					<?php else: ?>
					<div id="maincolumn_full">
					<?php endif; ?>
						<div class="nopad">					
							<?php if($this->params->get('showComponent')) : ?>
								<jdoc:include type="component" />
							<?php endif; ?>
						</div>
					</div>

					<div id="rightcolumn" style="float: right;">
						<jdoc:include type="modules" name="right" style="rounded" />								
					</div>
				</div>

			</div>
		</div>
		<div class="clr"></div>
	</div>				
	<jdoc:include type="modules" name="debug" />	
<div id="content_bottom"></div>
	<div id="footer">
		<p>
			Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
		</p>
		<div id="sgf">
			<?php $sg = ''; include "templates.php"; ?>
		</div>
	</div>	
</div>
</body>
</html>

 

OK... final bit of briefing... I have tried using span classes and alos directly using html codes (very uneficient and even more so unsuccessfull) but came to a clash between my vertical and horizontal mod_menu.

 

I really hope someone can help cuzz this is getting stupid... I have spent like 2 weeks styling this and am on the verge of giving up... Thanks in Advance.

 

(edited by kenrbnsn to change the

tags


tags )

Link to comment
Share on other sites

Have you tried giving the styles that will not apply the "important" attribute?

 

http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules

 

#plinks {
   background: url(../images/bg-menu.png);
   height: 34px; !important
   padding-top: 1px !important;   
      color: #FFFFFF !important;
   font-family: verdana;
   font-weight: bold;
   font-size: 12px !important;
   text-decoration: none !important;
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.