Need help about changing wordpress hyperlink color

by djg2000

Posted: 13 years ago 8 replies

WEB DESIGN

Hi,
I have implemented a new theme on wordpress site and I am trying to change the hyperlink color from dark blue to any other color for clear visibility. I have tried editing the style sheet but I am not sure which part of code is to be edited. Maybe that's due to less knowledge of css.

Code:

/* 
Theme Name: Movie Site Press- Classic
 Theme URI: http://moviesitepress.com
 Description: Movie Site Press Classic Theme
 Version: 1.0
 Author: MadLabs Media, LLC
 */
 /* Begin Typography & Colors */
 body {
     font-size: 62.5%; /* Resets 1em to 10px */
     font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
     color: #fff;
     background-color:#2A4E68;
     text-align: center;
     padding:0;
     margin:0;
 }
 .left {
     float:left;
     text-align:left;
 }
 .right {
     float:right;
     text-align:left;
 }
 #header {
     height:113px;
     background: #73a0c5 url('images/bg1.gif') repeat-x;
     text-align:center;
     margin-bottom:15px;
 }
 #header-main {
     text-align:left;
     width:1000px;
     margin:0 auto;
 }
 .blogname {
     margin-top:18px;
     float:left;
 }
 .sub-description {
     float:left;
     margin-top:20px;
     margin-left:16px;
     font-size:15px;
     height:68px;
     line-height:68px;
     padding-left:20px;
     background:url(images/top-line.gif) no-repeat;
 }
 .head-rss {
     float:right;
     font-size:16px;
     margin-top:35px;
     font-weight:bold;
 }
 .head-rss small {
     font-size:12px;
     font-weight:normal;
     color:#FFF;
 }
 #page {
     text-align: left;
     margin:0 auto;
     padding:0;
     width:1000px;
 }
 #content {
     font-size: 1.2em;
 }
 .post .left {
     width:206px;
 }
 .post .thumb {
     margin:12px 0 0 12px;/*firefox*/
  *margin:11px 0 0 11px;/*ie7*/
     _margin:11px 0 0 11px;/*ie6*/
     width:191px;
     height:119px;
     text-align:center;
 }
 .post .thumb a div {
     width:178px;
     height:110px;
     CURSOR: pointer;
 }
 .post .thumb a div:hover {
     background:url(images/zoom.png) no-repeat 55% 60%;
  *background:url(images/zoom.png) no-repeat 50% 60%;
     _background:url(images/zoom.png) no-repeat 50% 60%;
 }
 .post .thumb a:hover {
     _background:url(images/zoom.png) no-repeat 50% 60%;
 }
 .widecolumn .entry p {
     font-size: 1.05em;
 }
 .post .watch-btn {
     margin:11px 0 0 9px;
     width:60px;
     height:24px;
 }
 .post .ratings {
     margin:11px 0 0 6px;
     width:125px;
     height:24px;
     background:url(images/ratings-bg.gif) no-repeat;
 }
 .narrowcolumn .entry, .widecolumn .entry {
     line-height: 1.4em;
 }
 .widecolumn {
     line-height: 1.6em;
 }
 #download {
     width:290px;
     height:34px;
     background:url(images/download.gif) no-repeat;
     CURSOR: pointer;
     margin:0 0 12px 145px;
 }
 #download:hover {
     BACKGROUND: url(images/download-hover.gif) no-repeat;
 }
 .post .right {
     margin-left:0;
     width:335px;
 }
 .post h2 {
     margin:4px 0 5px 0;
 }
 .post h2 a {
     font-size:22px;
     font-weight:normal;
     color:#89AE03;
     text-decoration:none;
     width:315px;
     display:block;
     line-height:28px;
 }
 .post h2 a:hover {
     text-decoration:underline;
 }
 .post .part1 { border:#FF0 dashed 0px; height:121px;  overflow:hidden;}
 .post .part1 .entry {padding:0; margin:0;}
 .post .part1 .entry p{ font-size:11px;line-height:14px;}
 .post .entry {
     padding:0;
     width:320px;
     margin-bottom:6px;
 }
 .post .entry p {
     margin:0;
     padding:0;
 }
 .post .read-more a {
     color:#89AE03;
     text-decoration:underline;
 }
 .narrowcolumn .postmetadata {
     margin-top:6px;
     padding-left:8px;
     width:315px;
     height:24px;
     display:block;
     overflow: hidden;
     white-space: nowrap;
     background:url(images/postmetadata-bg.gif) no-repeat;
     color:#FFF;
 }
 .narrowcolumn .postmetadata a {
     color:#648DAB;
     text-decoration:none;
 }
 /* Begin Sidebar */
 #sidebar {
     padding: 0 0 10px 0;
     float:right;
     width: 428px;
 }
 #sidebar form {
     margin: 0;
 }
 #sidebar ul, #sidebar ul ol {
     margin: 0;
     padding: 0;
 }
 #sidebar ul li {
     list-style-type: none;
     list-style-image: none;
 }
 #sidebar ul li ul li {
     list-style-type: none;
     list-style-image: none;
     color:#FFF;
     display:block;
 }
 #sidebar .widget ul li a {
     width:170px;
     padding-left:35px;
     height:38px;
     line-height:33px;
     font-size:14px;
     font-weight:bold;
     color:#FFF;
     background:url(images/sidebar-li-a-bg.gif) repeat-x;
     display:block;
     text-decoration:none;
 }
 #sidebar ul li ul li a {
     width:170px;
     padding-left:35px;
     height:38px;
     line-height:33px;
     font-size:14px;
     font-weight:bold;
     color:#FFF;
     background:url(images/sidebar-li-a-bg.gif) repeat-x;
     display:block;
     text-decoration:none;
 }
 #sub-sidebar .right ul li ul li a {
     background:url(images/sidebar-li-a-bg-2.gif) repeat-x;
 }
 #sidebar ul li ul li a:hover {
     color:#EDBF26;
     text-decoration:underline;
 }
 #sidebar .current-cat a {
     color:#EDBF26;
 }
 #sidebar h2 {
     margin: 10px 0 8px 0;
     padding: 0;
     font-size:18px;
     font-weight:bold;
     color:#FFF;
 }
 #searchform {
     height:45px;
 }
 #s {
     width:340px;
     height:31px;
     background:url(images/search-key-bg.gif) no-repeat;
     border:0;
     ;
     font-size:18px;
     font-weight:bold;
     padding:10px 5px 0 5px;
     color:#FFF;
 }
 #searchsubmit {
     width:71px;
     height:41px;
     background:url(images/search-submit-bg.gif) no-repeat;
     border:0;
     padding:10px 5px 0 5px;
     color:#FFF;
 }
 .sidebar-line {
     background:url(images/sidebar-line.gif) repeat-x;
     height:2px;
     font-size:1px;
     padding:0;
     margin:18px 0 8px 0;
     border:0;
     width:426px;
     clear:both;
 }
 .sidebar-ad {
     float:left;
     width:135px;
     height:145px!important;
     height:125px;
 }
 #sub-sidebar {
     margin-bottom:10px;
     padding-bottom:10px;
 }
 #sidebar #sub-sidebar h2 {
     padding: 0 0 0 8px;
     background:url(images/sidebar-li-bg.gif) repeat-x;
     height:38px;
 }
 #sub-sidebar .left {
     width:204px;
 }
 #sub-sidebar .right {
     width:204px;
 }
 #sub-sidebar .left a, #sub-sidebar .right a {
     width:169px;
     overflow:hidden;
 }
 #aboutus {
     margin:0 8px 0 0;
     color:#728DA0;
     font-size:12px;
 }
 /* End Sidebar */
 .post-ratings {
     margin:5px 0 0 6px;
 }
 /* Begin Comments*/
 .alt {
     margin: 0;
     padding: 10px;
 }
 .commentlist {
     padding: 0;
     margin:0;
     text-align: left;
 }
 .commentlist li {
     margin: 15px 0 0 0;
     padding: 0 5px 10px 0;
     list-style: none;
     border:#2A4E68 solid 1px;
     background-color:#2A4E68;
 }
 .commentlist li ul li {
     margin-right: -5px;
     margin-left: 0;
 }
 .commentlist p {
     margin: 10px 5px 10px 0;
 }
 .children {
     padding: 0;
 }
 .nocomments {
     text-align: center;
     margin: 0;
     padding: 0;
 }
 .commentmetadata {
     display:none;
 }
 .comment p {
     color:#7D97A9;
     margin:0;
 }
 .commentlist .comment-author .avatar {
     display:none;
 }
 cite.fn {
     color:#fff;
     font-size:14px;
     font-weight:bold;
 }
 cite.fn a {
     color:#fff;
     text-decoration:none;
 }
 .says {
     color:#ACD4F1;
 }
 #comments {
     padding: 0;
     margin: 25px 0 20px 0;
     color:#FFF;
     font-size:18px;
 }
 #respond h3 {
     color:#FFF;
     font-size:18px;
 }
 #commentform p a {
     color:#FFF;
 }
 /* End Comments */
 .navigation {
     width:551px;
     display: block;
     text-align: center;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 .navigation .alignleft .pre {
     width:41px;
     height:27px;
     background:url(images/prev.gif);
     CURSOR: pointer;
 }
 .navigation .alignright .next {
     width:49px;
     height:27px;
     background:url(images/next.gif);
     CURSOR: pointer;
 }
 /* begin wp-pagenavi */
 .wp-pagenavi {
     width:390px;
     height:27px;
     float:left;
     margin-left:30px;
     background:url(images/pagenavi.gif) no-repeat;
 }
 .wp-pagenavi a {
     line-height:26px;
     margin:0 5px 0 5px;
     text-decoration: none;
     color: #fff;
 }
 .wp-pagenavi .pages {
     margin-right:5px;
 }
 .wp-pagenavi span.current {
     font-weight: bold;
     color: #89AE03;
 }
 /* end wp-pagenavi */
 .thread-alt {
     background-color: #f8f8f8;
 }
 .thread-even {
     background-color: white;
 }
 .depth-1 {
     border: 1px solid #ddd;
 }
 .even, .alt {
     border-left: 1px solid #ddd;
 }
 #footer {
     width:1000px;
     background: #2A4E68 url('images/sidebar-line.gif') repeat-x top;
     border: none;
     margin: 0 auto;
     padding:3px 0 0 0;
 }
 #footer p {
     text-align:center;
     margin:10px;
     font-size:12px;
 }
 #footer p a {
     text-decoration:none;
     color:#FFF;
 }
 small {
     font-family: Arial, Helvetica, Sans-Serif;
     font-size: 0.9em;
     line-height: 1.5em;
 }
 h1, h2, h3 {
     font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial,  Sans-Serif;
     font-weight: bold;
 }
 h1 {
     font-size: 4em;
     text-align: center;
 }
 #headerimg .description {
     font-size: 1.2em;
     text-align: center;
 }
 h2 {
     font-size: 1.6em;
 }
 h2.pagetitle {
     font-size: 1.6em;
 }
 h3 {
     font-size: 1.3em;
 }
 h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
     text-decoration: none;
     color: white;
 }
 h3, h3 a, h3 a:visited {
     color: #333;
 }
 h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar  caption, cite {
     text-decoration: none;
 }
 .entry p a:visited {
     color: #b85b5a;
 }
 #sidebar {
     font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
 }
 small, .nocomments, .postmetadata, blockquote, strike {
     color: #777;
 }
 code {
     font: 1.1em 'Courier New', Courier, Fixed;
 }
 acronym, abbr, span.caps {
     font-size: 0.9em;
     letter-spacing: .07em;
 }
 h3 a:hover {
     color: #06c;
     text-decoration: none;
 }
 a:hover {
     color: #147;
     text-decoration: underline;
 }
 #wp-calendar #prev a, #wp-calendar #next a {
     font-size: 9pt;
 }
 #wp-calendar a {
     text-decoration: none;
 }
 #wp-calendar caption {
     font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
     text-align: center;
 }
 #wp-calendar th {
     font-style: normal;
     text-transform: capitalize;
 }
 /* End Typography & Colors */
 .narrowcolumn {
     float: left;
     padding: 0 0 20px 0;
     margin: 0px 0 0;
     width: 565px;
 }
 .widecolumn {
     padding: 10px 0 20px 0;
     margin: 5px 0 0 150px;
     width: 450px;
 }
 .post {
     width:552px;
     height:179px;
     background:url(images/post-bg.gif) no-repeat;
     margin: 0 0 13px;
     text-align: justify;
 }
 .post hr {
     display: block;
 }
 .widecolumn .post {
     margin: 0;
 }
 .narrowcolumn .postmetadata {
     padding-top: 5px;
 }
 .widecolumn .postmetadata {
     margin: 30px 0;
 }
 .widecolumn .smallattachment {
     text-align: center;
     float: left;
     width: 128px;
     margin: 5px 5px 5px 0px;
 }
 .widecolumn .attachment {
     text-align: center;
     margin: 5px 0px;
 }
 .postmetadata {
     clear: both;
 }
 .clear {
     clear: both;
 }
 /* End Structure */
 /*    Begin Headers */
 h1 {
     padding-top: 70px;
     margin: 0;
 }
 h2.pagetitle {
     margin-top: 30px;
     text-align: center;
 }
 h3 {
     padding: 0;
     margin: 30px 0 0;
 }
 /* End Headers */
 /* Begin Images */
 p img {
     padding: 0;
     max-width: 100%;
 }
 /*    Using 'class="alignright"' on an image will (who would've
     thought?!) align the image to the right. And using  'class="centered',
     will of course center the image. This is much better than using
     align="center", being much more futureproof (and valid) */
 img.centered {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 img.alignright {
     padding: 4px;
     margin: 0 0 2px 7px;
     display: inline;
 }
 img.alignleft {
     padding: 4px;
     margin: 0 7px 2px 0;
     display: inline;
 }
 .alignright {
     float: right;
 }
 .alignleft {
     float: left
 }
 /* End Images */
 /* Begin Lists
     Special stylized non-IE bullets
     Do not work in Internet Explorer, which merely default to normal  bullets. */
 html>body .entry ul {
     margin-left: 0px;
     padding: 0 0 0 30px;
     list-style: none;
     padding-left: 10px;
     text-indent: -10px;
 }
 html>body .entry li {
     margin: 7px 0 8px 10px;
 }
 .entry ul li:before {
     content: "0BB 020";
 }
 .entry ol {
     padding: 0 0 0 35px;
     margin: 0;
 }
 .entry ol li {
     margin: 0;
     padding: 0;
 }
 .postmetadata ul, .postmetadata li {
     display: inline;
     list-style-type: none;
     list-style-image: none;
 }
 /* End Entry Lists */
 /* Begin Form Elements */
 .entry form { /* This is mainly for password protected posts, makes  them look better. */
     text-align:center;
 }
 select {
     width: 130px;
 }
 #commentform {
     margin: 5px 10px 0 0;
 }
 #commentform p {
     margin: 5px 0;
     line-height:41px;
     font-size:16px;
     font-weight:bold;
 }
 #commentform input {
     width: 350px;
     height:21px;
     font-size:16px;
     color:#FFF;
     font-weight:bold;
     padding:10px;
     background:url(images/comment-input.gif) no-repeat;
     border:0;
     margin: 2px 0 0 0;
     vertical-align:middle;
 }
 #commentform textarea {
     width:520px;
     height:187px;
     padding: 10px;
     background:url(images/comment-textarea.gif) no-repeat;
     border:0;
     overflow:hidden;
     color:#FFF;
     font-size:16px;
     font-weight:bold;
     margin-top:2px;
 }
 #respond:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
 }
 #commentform #submit {
     margin: 5px 0 5px 436px;
     background:url(images/comment-submit.gif) no-repeat;
     width:104px;
     height:41px;
     border:0;
     float: left;
 }
 /* End Form Elements */
 /* Begin Calendar */
 #wp-calendar {
     empty-cells: show;
     margin: 10px auto 0;
     width: 204px;
 }
 #wp-calendar #next a {
     padding-right: 10px;
     text-align: right;
 }
 #wp-calendar #prev a {
     padding-left: 10px;
     text-align: left;
 }
 #wp-calendar caption {
     text-align: center;
     font-size:18px;
     font-weight:bold;
     padding: 0 0 0 8px;
     background:url(images/sidebar-li-bg.gif) repeat-x;
     height:38px;
     width:204px;
 }
 #wp-calendar td {
     padding: 3px 0;
     text-align: center;
 }
 #wp-calendar td.pad:hover { /* Doesn't work in IE */
     background-color: #fff;
 }
 /* End Calendar */
 /* Begin Various Tags & Classes */
 acronym, abbr, span.caps {
     cursor: help;
 }
 acronym, abbr {
     border-bottom: 1px dashed #999;
 }
 blockquote {
     margin: 15px 30px 0 10px;
     padding-left: 20px;
     border-left: 5px solid #ddd;
 }
 blockquote cite {
     margin: 5px 0 0;
     display: block;
 }
 .center {
     text-align: center;
 }
 .hidden {
     display: none;
 }
 hr {
     display: none;
 }
 a img {
     border: none;
 }
 /* End Various Tags & Classes*/
 /* Captions */
 .aligncenter, div.aligncenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 .wp-caption {
     border: 1px solid #ddd;
     text-align: center;
     background-color: #f3f3f3;
     padding-top: 4px;
     margin: 10px;
     -moz-border-radius: 3px;
     -khtml-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
 }
 .wp-caption img {
     margin: 0;
     padding: 0;
     border: 0 none;
 }
 .wp-caption p.wp-caption-text {
     font-size: 11px;
     line-height: 17px;
     padding: 0 4px 5px;
     margin: 0;
 }
 /* End captions */
 #featured .part1{height:163px; overflow:hidden;}

screenshot:

#changing #color #hyperlink #wordpress

Abledragon

13 years ago

If you install Firebug for FireFox you can use it to identify the exact selector you need to edit. Once you've found the name of the selector you can search for it in your stylesheet and make the changes.

More details here:

Firebug: CSS Editing Made Easy | WealthyDragon

and here:

How to Customise WordPress Appearance | WealthyDragon

Cheers,

Martin.

Thanks
1 reply

Signature

WealthyDragon - Earning My Living Online

{{ DiscussionBoard.errors[3917678].message }}

djg2000

13 years ago

Originally Posted by Abledragon

Sir,I install the firebug,but still cant fix my problem,use the firebug I just can find the text color in the body.but can not find where the change the hyperlink color,can I just paste my domain and you check it for me?Thanks a lot.

Thanks
1 reply

{{ DiscussionBoard.errors[3917931].message }}

johneye 13 years ago

You need to post the HTML code for your side as well or rather a snippet for your <a href> URL so that we'll know which CSS "a" it's using.
- Thanks
- 1 reply
Signature
>> Free Ebooks
{{ DiscussionBoard.errors[3918251].message }}
- djg2000 13 years ago
  
  Originally Posted by johneye
  
  You need to post the HTML code for your side as well or rather a snippet for your <a href> URL so that we'll know which CSS "a" it's using.
  
  My site is freedocu.com,I have tried a lot of times to change the color what I need,a lot of colors changed,the only thing didn't change is the hyperlink color,I am so mad.Would you please help me?
  
  Thanks
  
  {{ DiscussionBoard.errors[3918341].message }}

Karen Barr 13 years ago
I've got a sneaking suspicion that the stylesheet isn't setting a value for links and you're seeing the default HTML colour.

Try adding this part into the CSS just after the BODY declaration ends:
HTML Code:

A:link, A:visited {text-decoration: underline; colour: #D9D9F3}
(This will give you a light-blue link colour - just change the hex code to the one you want.)
- Thanks
- 1 reply
Signature
Karen's QuickFire Marketing Blog
{{ DiscussionBoard.errors[3918748].message }}
- andrejvasso 13 years ago
  
  Guys... stop giving strange advices to people... dont take this personally, but using firebug to identify a link? Are you serious?????
  
  @djg: karen is right and gave you a good advice, but do a little correction with her code snippet (see below). Add the modified code snippet in your css (it doesnt matter where) and check out the endresults. This will take care for all "normal" links on your page, however you have already definied a few link styles in your css.
  
  In example:
  
  Code:
  
  .post .read-more a { color:#89AE03; text-decoration:underline; }
  
  This defines the color of the read-more link.
  
  Code:
  
  a:hover { color: #147; text-decoration: underline; }
  
  this defines the color of a link when you hover on it.
  
  As you can see the "a" tag stands for a link (<a href=""></a>). The additional comments specify the link. The first example referrs to the read_more link and the second example is a so-called pseudo class and referrs to the link when you move your mouse over it.
  
  When you take a look at your css file, you will see that there are some more links that you have already given a style to.
  
  Anyways, add this to your css: (and change the colors to whatever you want)
  
  Code:
  
  a{ color: #eee; /* color for "normal" links */ } a:visited{ color: #000; /* color for "clicked" links */ }
  
  I suggest you add it above the "a:hover", which is allready in your css, but it doesnt really matter where you add it.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[3918775].message }}
  
  johneye 13 years ago
  
  CSS is rather complicated, you can't just modify the main a {} to get the results.
  
  In your site, your a is within your
  
  Code:
  
  #sub-sidebar .left
  
  so you need to find
  
  Code:
  
  #sub-sidebar .left { width:204px; } #sub-sidebar .right { width:204px; }
  
  and insert
  
  Code:
  
  #sub-sidebar .left a { text-decoration:none; /* if you don't want the underline */ color:#FFF; /* change it to white */ }
  
  in between it.
  
  You'll get:-
  
  Code:
  
  #sub-sidebar .left { width:204px; } #sub-sidebar .left a { text-decoration:none; color:#FFF; } #sub-sidebar .right { width:204px; }
  
  Downloaded your site and tested it in my pc, at least it works here.
  
  Do try it out.
  
  Thanks
  
  Signature
  >> Free Ebooks
  
  {{ DiscussionBoard.errors[3918948].message }}
djg2000 13 years ago

Thank u all guys.
At least this one

a{
color: #eee; /* color for "normal" links */
}

a:visited{
color: #000; /* color for "clicked" links */
}

works,thanks again guys.
- Thanks
{{ DiscussionBoard.errors[3920057].message }}

Need help about changing wordpress hyperlink color

Trending Topics

How did you turn it all around?

Any thoughts on golf's latest phenom...Scottie Scheffler??

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

best high quality crypto traffic.

Some interesting stats about brand comms