Forum Moderators: not2easy
<snip> is my site. If you look, all the "article" titles are in yellow (hyperlinks). My goal, it to make that black. I like the red hover, but the yellow has got to go. The rest of the links being yellow is fine, I just want the article titles to be black with a red hover.
So, I got this template off the web, and am running Joomla. I have spent WAY more time trying to get this to work that I should be. Someone here probably can look at this and tell me within one second what is going on:
Template.css -
/* standard elements */
html {min-height: 100%;}
html, body, form, fieldset, div, span, table, tr, td, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
margin: 0;
padding: 0;
}
a {color: #CC3;}
a:hover {color: #FF3;}
body {
background: #000 url(../images/body.gif) no-repeat; /* url(img/bg.jpg) repeat-x; */
color: #DDD;
font: normal 62.5% "Trebuchet MS",Verdana,sans-serif;
padding-left: 90px;
}
p,code,ol {padding-bottom: 1.2em;}
h1 {
color: #CCC;
font: normal 2em Impact,sans-serif;
}
h1 a {
color: #000;
text-decoration: none;
}
h1 a:hover {
color: #F00;
}
h2 {font: normal 1.8em Tahoma,sans-serif;}
h1,h2 {padding-top: 6px;}
blockquote {
color: #CCA;
display: block;
font-weight: bold;
padding-left: 28px;
}
img {border: none;}
img.right {margin: 5px 0 5px 12px;}
img.left {margin: 5px 12px 5px 0;}
img.border {
background: #555;
display: block;
padding: 3px;
}
#title {
padding-left:4px;
}
/* misc */
#loginbox {
border: 1px #333333 dashed;
padding:10px;
}
#loginbox a{
color:#666;
text-decoration:none;
}
#loginbox a:hover{
color:#8DCA3F;
text-decoration:none;
}
.clearer {
clear: both;
font-size: 0;
}
.left {float: left;}
.right {float: right;}
.decay,.decay-small, h3, .componentheading {
background: url(../images/decay-long.gif) no-repeat;
color: #000;
font: normal 2em Impact,sans-serif;
padding: 0 0 12px 22px;
width:100%;
}
.buttonheading {
width:75px;
height:30px;
overflow:visible;
}
.contentheading {
color: #999;
height:60px;
line-height:22px;
width:100%;
font: normal 2em Impact,sans-serif;
padding: 6px 0px 12px 0px;
font-size:140%;
margin-left:100%;
}
h3 {
color:#000;
font-size:150%;
padding-top:6px;
background:url(../images/decay-small.gif) no-repeat left center;
}
p.postinfo {
border-top: 1px dashed #333;
color: #666;
font: bold 0.9em sans-serif;
margin-bottom: 24px;
padding: 8px;
}
p.postinfo a {color: #888;}
p.postinfo a:hover {color: #CCC;}
/* structure */
#container {
font-size: 1.3em;
}
/* title */
#site-title {font: normal 3em Tahoma,sans-serif;}
#site-title a {
color: #DDD;
text-decoration: line-through;
}
#site-title a:hover {
color: #F00;
text-decoration: none;
}
#site-description {color: #CCC; }
/* content */
#content {
position:relative;
left: 270px;
top: 90px;
width: 610px;
}
.createdate {
color:#8DC63F;
margin-bottom: 6px;
}
#content {
color:#FFFFFF;
}
#content li {margin-left: 18px;}
/* navigation */
#navigation {
left: 120px;
position: absolute;
float:left;
top: 290px;
width: 210px;
}
#navigation h2 {
color: #000;
font-size: 1.5em;
letter-spacing: 0;
line-height: 30px;
margin: 0;
}
#navigation ul {margin: 0 0 0 1em;}
#navigation li {list-style: none;}
#navigation li a {
color: #777;
font-size: 1.1em;
line-height: 1.5em;
text-decoration: none;
}
#navigation li a:hover {color: #8DCA3F;}
#navigation ul ul a:link, #navigation ul ul a:visited {
color:#fff;
padding-bottom:0px;
margin-bottom:0px;
}
#navigation ul ul a:hover {
color:#8DC63F;
}
/* footer */
#footer {
border-top: 1px dashed #333;
color: #666;
font: normal 0.9em sans-serif;
width:600px;
padding: 0px 10px
}
#footer a {
color: #999;
text-decoration: none;
}
#footer a:hover {
color: #CCC;
text-decoration: underline;
}
#footer .left, #footer .right {padding: 10px 0;}
#footer .right a {color: #777;}
/* joomla fixes */
Here is the other CSS that came with it:
Contentheading:
.contentheading {
background:url(../images/content-decay-small.gif) no-repeat left center;
color: #000;
height:60px;
line-height:17px;;
width:100%;
font-size:140%;
padding: 6px 0px 12px 22px;
margin-left:100%;
}
a:hover {
color: #F00;
}
[edited by: swa66 at 4:43 am (utc) on Sep. 1, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]
1. Installed firebug (CSS viewer for firefox) to see what the hell is going on with the page
2. Noticed that contentpagetitle is the ACTUAL class that I want to change but I guess (I dont know anything about CSS) it is a child of contentheading
3. Whenever I tried to change contentpagetitle it would not work
4. Changing contentheading.css results in all the links on the page being changed to whatever color I picked
Example: contentheading, a:link{ color:#000} would make all the links on the page black, or worthless. It did make the Article link black (which I want) but without changing all the other links.
5. Hours and hours of messing with colors and different ways of changing this POS
Please help!
-JS
I have spent WAY more time trying to get this to work that I should be. Someone here probably can look at this and tell me within one second what is going on:
It takes time to learn so forget that, because that is the price one pays. Option two is to hire somebody. The CSS code dump, with no HTML context tells me that you need to work on trouble shooting. Comment out HTML and CSS until you isolate the problem. Then we have something to work with.
..............................
contentpagetitle is the ACTUAL class that I want to change
contentheading, a:link{ color:#000}
This should help get you started on making correct declarations. If is a much chopped down sample which is what is needed here. You'll never learn anything hacking away at all that CSS in the OP. NOTE: I have used a global <a> as one of the samples. I typically do not not apply many styles to global elements. I class is id everything. Safer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
margin: 2em;
}
a {
color: red;
}
.content a {
color: teal; text-decoration: none;
}
.content a:hover {
color: purple; text-decoration: line-through;
}
</style>
</head>
<body>
<div>
<a href="http://www.example.com">LINK</a>
</div>
<div class="content">
<a href="http://www.example.com">LINK</a>
</div>
<!--##########
all the "article" titles are in yellow (hyperlinks). My goal, it to make that black. I like the red hover, but the yellowhas got to go. The rest of the links being yellow is fine, I just want the article titles (example: F.T.W. Racing
Check-In) to be black with a red hover.
So, I got this template off the web, and am running Joomla. I have spent WAY more time trying to get this to
work that I should be. Someone here probably can look at this and tell me within one second what is going on:
................................................1. Installed firebug (CSS viewer for firefox) to see what the hell is going on with the page
2. Noticed that contentpagetitle is the ACTUAL class that I want to change but I guess (I dont know anything about CSS) it is a child of contentheading
3. Whenever I tried to change contentpagetitle it would not work
4. Changing contentheading.css results in all the links on the page being changed to whatever color I pickedExample: contentheading, a:link{ color:#000} would make all the links on the page black, or worthless. It did make the Article link black (which I want) but without changing all the other links.
5. Hours and hours of messing with colors and different ways of changing this POS
-->
</body>
</html>
Relax. Invest the time. Enjoy it. Come back with something cleaner that is easier to offer help for. If you hate it - take a break - or hire it out. Pay by learning, or by using a pro. No way around paying in the long run.
<edit>Correct typ0. Further examplify.</edit>
Thanks for the help so far!
-JS
