Changing Hyperlink colour

Discussion in 'CSS' started by Casius14, Feb 21, 2009.

0
  1. #1
    So im using a wordpress tempalte on my site Sports Bet World

    But when i write an article and include a hyperlink to something the font colour stays the same and doesn't underline, so unless you know its there doesn't show up as effectivly.

    Now i am a HTML newbie so (i'm assuming this will be in teh style sheet) ill just paste my style sheet in here and if someone could edit it to the exact thing i need i'd be so grateful.

    If possible i'd like the links to be underlined and yellow.

    Thanks in advance

    /*
Theme Name: Poker Complex
Theme URI: http://test.qualitywordpress.com/?preview_theme=poker-complex
Description: Poker complex is a step up compored regular poker themes with it's social bookmarking features and structure.
Version: 1.0
Author: qualitywordpress
Author URI: http://qualitywordpress.com
*/



/* General */

body {
	margin: 0;
	background: url("images/bg.jpg");
}

h1, h2, h3, h4 {
	margin: 0;
}

img {
	border: 0;
}

.clear {
	clear: both;
	height: 0;
	overflow: hidden;
}


/* Page */

#page {
	margin: -42px auto 0 auto;
	width: 895px;
	background: url("images/page.gif") repeat-y;
}

#page-top {
	width: 895px;
	background: url("images/page_top.jpg") no-repeat;
}

#page-bottom {
	width: 895px;
	min-height: 460px;
	background: url("images/page_bottom.gif") no-repeat left bottom;
}


/* Header */

#header {
	width: 890px;
	height: 369px;
	position: relative;
}

	/* Header - Info */
	
	#header #header-info {
		position: absolute;
		top: 163px;
		left: 408px;
		width: 525px;
		height: 81px;
		padding-left: 92px;
		background: url("images/logo.gif") no-repeat;
	}
	
	#header #header-info h1 {
		color: #ffffff;
		font: normal 32px "Century Gothic", Century Gothic;
		padding: 1px 0 5px 0;
	}
	
	#header #header-info h1 a {
		color: #ffffff;
		text-decoration: none;
	}
	
	#header #header-info .description {
		color: #ffffff;
		font: normal 17px "Century Gothic", Century Gothic;
	}
	
	/* Header - Menu */
	
	#header #header-menu {
		position: absolute;
		top: 42px;
		left: 28px;
		width: 640px;
		height: 46px;
	}
	
	#header #header-menu ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		width: 640px;
		height: 46px;
	}
	
	#header #header-menu ul li {
		float: left;
		height: 46px;
		font: normal 14px/46px "Century Gothic", Century Gothic;
		color: #C5C5C5;
	}
	
	#header #header-menu ul li a {
		color: #C5C5C5;
		text-decoration: none;
		padding: 0 15px;
		display: block;
	}
	
	#header #header-menu ul li a:hover {
		background: url("images/header_menu.gif") repeat-x;
	}
	
	#header #header-menu ul li ul {
		display: none;
	}
	
	#header #header-menu ul li.current_page_item a {
		background: url("images/header_menu.gif") repeat-x;
	}
	
	/* Header - Search */
	
	#header #header-search {
		position: absolute;
		top: 59px;
		left: 655px;
		width: 217px;
		height: 22px;
	}
	
	#header #header-search #searchform {
		margin: 0;
		padding: 0;
		width: 217px;
		height: 22px;
	}
	
	#header #header-search #s {
		width: 117px;
		height: 18px;
		padding: 2px 5px;
		border: 0;
		font: normal 13px "Century Gothic", Century Gothic;
		color: #000000;
		background: transparent;
		float: left;
	}
	
	#header #header-search #searchsubmit {
		background: transparent;
		border: none;
		width: 85px;
		height: 22px;
		padding: 0;
		float: right;
	}
	
	/* Header - Newsletter */
	
	#header #header-newsletter {
		position: absolute;
		top: 230px;
		left: 32px;
		width: 200px;
		height: 90px;
		padding-top: 40px;
		background: url("images/header_newsletter.gif") no-repeat;
		color: #ffffff;
		font: bold 12px "Century Gothic", Century Gothic;
	}
	
	#header #header-newsletter p {
		margin: 0;
		padding-bottom: 7px;
	}
	
	#header #header-newsletter form {
		margin: 0;
		padding: 0;
	}
	
	#header #header-newsletter span {
		width: 55px;
		float: left;
		height: 18px;
		line-height: 18px;
	}
	
	#header #header-newsletter input {
		width: 123px;
		height: 18px;
		background: url("images/header_input.gif") no-repeat;
		border: none;
		padding: 0 5px;
		font: normal 12px "Century Gothic", Century Gothic;
		color: #000000;
	}
	
	#header #header-newsletter .submit {
		width: 85px;
		height: 26px;
		background: url("images/header_button.gif") no-repeat;
		margin-left: 104px;
	}
	
	/* Header - Recent Articles */
	
	#header #recent-articles {
		position: absolute;
		top: 223px;
		left: 264px;
		width: 305px;
		height: 145px;
	}
	
	#header #recent-articles h3 {
		width: 285px;
		height: 22px;
		color: #ffffff;
		font: bold 12px/22px "Century Gothic", Century Gothic;
		background: url("images/title_recent_articles.gif") no-repeat;
		padding: 0 10px;
	}
	
	#header #recent-articles ul {
		margin: 0;
		padding: 0 0 0 10px;
		list-style-type: none;
	}
	
	#header #recent-articles ul li {
		padding-left: 8px;
		background: url("images/header_articles.gif") no-repeat;
		color: #ffffff;
		font: bold 12px/28px "Century Gothic", Century Gothic;
	}
	
	#header #recent-articles ul li a {
		color: #ffffff;
		text-decoration: none;
	}
	
	#header #recent-articles ul li a:hover {
		text-decoration: underline;
	}
	
	/* Header - Popular Articles */
	
	#header #popular-articles {
		position: absolute;
		top: 223px;
		left: 595px;
		width: 278px;
		height: 145px;
	}
	
	#header #popular-articles h3 {
		width: 258px;
		height: 22px;
		color: #ffffff;
		font: bold 12px/22px "Century Gothic", Century Gothic;
		background: url("images/title_popular_articles.gif") no-repeat;
		padding: 0 10px;
	}
	
	#header #popular-articles ul {
		margin: 0;
		padding: 0 0 0 10px;
		list-style-type: none;
	}
	
	#header #popular-articles ul li {
		padding-left: 8px;
		background: url("images/header_articles.gif") no-repeat;
		color: #ffffff;
		font: bold 12px/28px "Century Gothic", Century Gothic;
	}
	
	#header #popular-articles ul li a {
		color: #ffffff;
		text-decoration: none;
	}
	
	#header #popular-articles ul li a:hover {
		text-decoration: underline;
	}

/* Header - Feed */
	
	#header #header-feed {
		position: absolute;
		top: 323px;
		left: 3px;
		width: 40px;
		height: 40px;
	}

/* Header - Feed1 */
	
	#header #header-feed1 {
		position: absolute;
		top: 290px;
		left: 750px;
		width: 40px;
		height: 40px;
	}

/* Header - Feed2 */
	
	#header #header-feed2 {
		position: absolute;
		top: 290px;
		left: 803px;
		width: 40px;
		height: 40px;
	}

/* Header - Feed3 */
	
	#header #header-feed3 {
		position: absolute;
		top: 290px;
		left: 8px;
		width: 40px;
		height: 40px;
	}

/* Header - Stu */
	
	#header #header-stu {
		position: absolute;
		top: 290px;
		left: 680px;
		width: 40px;
		height: 40px;
	}



/* Main */

#main {
	margin: 0 auto;
	width: 869px;
}

	/* Main - Content */
	
	#content {
		float: left;
		width: 541px;
		padding: 10px 17px 0 16px;
	}
	
	/* Main - Content - Post */
	
	#content .post {
		float: left;
		margin-bottom: 30px;
		width: 541px;
	}
	
		/* Post - Title */
		
		#content .post .post-title {
			width: 541px;
			height: 59px;
			font: bold 12px "Century Gothic", Century Gothic;
			color: #9F0F04;
		}
		
		#content .post .post-title a {
			color: #9F0F04;
			text-decoration: none;
		}
		
		#content .post .post-title a:hover {
			text-decoration: underline;
		}
		
		#content .post .post-title h2 {
			color: #FFE400;
			font: bold 24px "Century Gothic", Century Gothic;
			padding: 2px 0;
		}
		
		#content .post .post-title h2 a {
			color: #FFE400;
			text-decoration: none;
		}
		
		#content .post .post-title h2 a:hover {
			text-decoration: underline;
		}
		
		#content .post .post-title .post-date {
			float: left;
			background: url("images/post_date.gif") no-repeat;
			width: 59px;
			height: 59px;
			margin-right: 18px;
			color: #ffffff;
			text-align: center;
			text-transform: lowercase;
			font: bold 13px "Century Gothic", Century Gothic;
			letter-spacing: 1px;
		}
		
		#content .post .post-title .post-date span {
			padding: 9px 0 1px 0;
			display: block;
		}
		
		/* Post - Entry */
		
		#content .post .post-entry {
			font: normal 12px/18px "Century Gothic", Century Gothic;
			color: #FFFFFF;
			width: 521px;
			padding: 0 10px;
		}
		
		#content .post .post-entry a {
			color: #FFFFFF;
			text-decoration: none;
		}
		
		#content .post .post-entry a:hover {
			text-decoration: underline;
		}
		
		#content .post .post-entry a.more-link {
			font: bold 12px/18px "Century Gothic", Century Gothic;
			color: #FFFFFF;
			text-decoration: none;
		}
		
		#content .post .post-entry a.more-link:hover {
			text-decoration: underline;
		}
		
		#content .post .post-entry blockquote {
			border-left: 10px solid #ffff00;
			margin: 0px 30px;
			padding-left: 15px;
		}
		
		/* Post - Info */
		
		#content .post .post-info {
			padding: 0 15px;
			width: 511px;
			height: 26px;
			background: url("images/post_info.gif") no-repeat;
			clear: both;
			font: bold 12px/26px "Century Gothic", Century Gothic;
			color: #ffff00;
		}
		
		#content .post .post-info a {
			color: #ffffff;
			text-decoration: none;
		}
		
		#content .post .post-info a:hover {
			text-decoration: underline;
		}
		
		/* Post - Comments */
		
		#content .post h3 {
			margin: 30px 0 5px 0;
			color: #ffffff;
			font: bold 18px "Century Gothic", Century Gothic;
		}
		
		#content .post .comments {
			font: normal 12px/18px "Century Gothic", Century Gothic;
			color: #ffffff;
			width: 521px;
		}
		
		#content .post .comments ol {
			margin: 10px 0;
			padding-left: 25px;
		}
		
		#content .post .comments ol li {
			padding: 5px;
		}
		
		#content .post .comments ol li a {
			color: #ffffff;
			text-decoration: none;
		}
		
		#content .post .comments ol li a:hover {
			text-decoration: underline;
		}
		
		#content .post .comments ol li.alt {
			background: #e6e6e6;
		}
		
		#content .post .comments ol li cite {
			color: #ffffff;
			font-style: normal;
			font-weight: bold;
		}
		
		#content .post .comments ol li cite a {
			color: #ffffff;
			text-decoration: none;
		}
		
		#content .post .comments ol li cite a:hover {
			text-decoration: underline;
		}
		
		#content .post .comments ol li .commentmetadata a {
			color: #ffffff;
			text-decoration: none;
		}
		
		#content .post .comments ol li .commentmetadata a:hover {
			text-decoration: underline;
		}
		
		#content .post #commentform {
			margin: 0;
			padding-left: 25px;
			font: normal 12px/18px "Century Gothic", Century Gothic;
			color: #ffffff;
			width: 496px;
		}
		
		#content .post #commentform a {
			color: #ffffff;
			text-decoration: none;
		}
		
		#content .post #commentform a:hover {
			text-decoration: underline;
		}
	
	/* Main - Content - Navigation */
	
	#content .navigation {
		margin-bottom: 30px;
		font: bold 12px "Century Gothic", Century Gothic;
		color: #ffffff;
		width: 541px;
	}
	
	#content .navigation a {
		color: #ffffff;
		text-decoration: none;
	}
	
	#content .navigation a:hover {
		text-decoration: underline;
	}
	
		#content .navigation .navigation-previous {
			float: left;
		}
		
		#content .navigation .navigation-next {
			float: right;
		}
	
	/* Main - Sidebar */
	
	#sidebar {
		float: left;
		width: 295px;
		font: normal 14px/18px "Century Gothic", Century Gothic;
		color: #ffffff;
	}
	
	#sidebar a {
		color: #ffffff;
		text-decoration: none;
	}
	
	#sidebar a:hover {
		text-decoration: underline;
	}
	
	#sidebar .sidebar-box {
		width: 295px;
		padding-bottom: 10px;
	}
	
		/* Sidebar - Titles */
		
		#sidebar h3 {
			font: bold 12px/36px "Century Gothic", Century Gothic;
			color: #AC0C00;
			width: 265px;
			height: 30px;
			padding: 0 15px;
			margin-bottom: 2px;
			background: url("images/sidebar_title.gif") no-repeat;
		}
		
		/* Sidebar - Menus */
		
		#sidebar ul {
			margin: 0;
			padding: 0 0 0 15px;
			list-style-type: none;
		}
		
		#sidebar ul li {
			padding-left: 8px;
			background: url("images/sidebar_menu.gif") no-repeat;
			font: normal 12px/22px "Century Gothic", Century Gothic;
			color: #ffffff;
		}
		
		#sidebar ul li a {
			color: #ffffff;
			text-decoration: none;
		}
		
		#sidebar ul li a:hover {
			text-decoration: underline;
		}
		
		#sidebar ul li ul {
			padding: 0 0 0 10px;
		}
		
		/* Sidebar - Forms */
		
		#sidebar #searchform {
			margin: 0;
			padding: 10px 0;
			width: 295px;
			text-align: center;
		}
		
		#sidebar #searchform #s {
			width: 205px;
		}
		
		/* Sidebar - Tables */
		
		#sidebar #calendar_wrap {
			margin: 0 auto;
			padding-top: 5px;
			width: 116px;
		}
		
		#sidebar #calendar_wrap caption {
			font-weight: bold;
		}
		
		#sidebar #calendar_wrap tbody {
			text-align: right;
		}
		
		#sidebar #calendar_wrap tfoot #next {
			text-align: right;
		}
		
		#sidebar #calendar_wrap #today {
			font-weight: bold;
		}
		
		/* Sidebar - Texts */
		
		#sidebar .textwidget {
			padding: 0 5px;
		}
		
		/* Sidebar - Ads */
		
		#sidebar .sidebar-ads {
			padding: 10px 0 0 15px;
		}
		
		#sidebar .sidebar-ads-in {
			float: left;
			padding: 0 14px 14px 0;
		}


/* Footer */

#footer {
	margin: 0 auto;
	width: 869px;
	height: 270px;
	color: #ffffff;
	font: bold 12px "Century Gothic", Century Gothic;
}

#footer a {
	color: #ffffff;
	text-decoration: underline;
}

#footer a:hover {
	text-decoration: none;
}

	/* Footer - Footerbar */
	
	#footer #footerbar {
		width: 869px;
		height: 180px;
		padding-top: 17px;
	}
	
	#footer #footerbar h3 {
		font: bold 12px "Century Gothic", Century Gothic;
		color: #ffffff;
		padding: 0 0 25px 15px;
	}
	
	#footer #footerbar ul {
		margin: 0;
		padding: 0 0 0 15px;
		list-style-type: none;
	}
	
	#footer #footerbar ul li {
		font: bold 12px/26px "Century Gothic", Century Gothic;
		color: #ffffff;
		padding-left: 8px;
		background: url("images/footer_menu.gif") no-repeat;
	}
	
	#footer #footerbar ul li a {
		color: #ffffff;
		text-decoration: none;
	}
	
	#footer #footerbar ul li a:hover {
		text-decoration: underline;
	}
	
		/* Footer - Footerbar - Boxes */
		
		#footer #footerbar #footerbar-left {
			width: 249px;
			padding: 0 17px 0 10px;
			float: left;
		}
		
		#footer #footerbar #footerbar-center {
			width: 273px;
			padding: 0 14px 0 11px;
			float: left;
		}
		
		#footer #footerbar #footerbar-right {
			width: 264px;
			padding: 0 14px 0 16px;
			float: left;
		}
	
	/* Footer - Copyright */
	
	#footer #copyright {
		width: 869px;
		text-align: center;
		line-height: 42px;
	}
    Code (markup):
     
    Casius14, Feb 21, 2009 IP
  2. Valiant

    Valiant Peon

    Messages:
    284
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    
a:hover{
  text-decoration: underline;
  color: yellow;
}
    Code (markup):
     
    Valiant, Feb 21, 2009 IP
  3. Casius14

    Casius14 Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks but where exactly does this go, or what will it replace in the script?

    Also once this is changed will it update existing links or will i have to update those manually?
     
    Casius14, Feb 21, 2009 IP
  4. Dimmo

    Dimmo Well-Known Member

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    126
    #4
    You can paste it anyway within the stylesheet it doesn't make a difference, however I would probably put it in the general section for ease of editing in the future. CSS stylesheets affect the design or a website so affects your website across the board, you don't need to change anything within the code of your site ie. the html just edit the CSS to affect the design elements

    There are 4 different states in respect of links :

    a:link
    a:visited
    a:active
    a:hover

    If you want all the links to be yellow and underlined before the mouse hovers over the link then you would want:

    a {
    text-decoration: underline;
    color: yellow;
    }

    If when the mouse hovers over the link you want it to be underlined and blue for example you would also add this:

    a:hover {
    text-decoration: underline;
    color: blue;
    }

    This site may explain it a bit better: http://www.echoecho.com/csslinks.htm
     
    Dimmo, Feb 21, 2009 IP
  5. Valiant

    Valiant Peon

    Messages:
    284
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Will update all links, put it at the bottom of your main style sheet
     
    Valiant, Feb 21, 2009 IP
  6. Casius14

    Casius14 Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    thanks guys

    however ive tried that and it just seems to make no difference at all.

    Ive pasted both those pieces of code and still the same.

    (THIS IS NOT TO GET PEOPLE TO MY SITE) but if u look at teh sports bet site in my sig. then at one of the articles at the right then at the bottom it says who the author is and the last word is hyper linked of which u can see if u hover ur mouse over because it underlines but just looks like text if.

    And this is WITH the code that you guys have provided....very annoying.

    any more help would be great.
     
    Casius14, Feb 21, 2009 IP
  7. Valiant

    Valiant Peon

    Messages:
    284
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    try:

    
a:hover{
  text-decoration: underline !important;
  color: yellow !important;
}
    Code (markup):
     
    Valiant, Feb 21, 2009 IP
  8. Casius14

    Casius14 Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    well progress!!! lol

    the links are now underlined but still white until you hover over them and they turn yellow....which i guess isn't a major issue now as you see that the words are linked but if we could get them yellow permenantly that would be great.

    thanks, much appreciated this help
     
    Casius14, Feb 21, 2009 IP
  9. Valiant

    Valiant Peon

    Messages:
    284
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    this:

    

a{
  text-decoration: none !important;
  color: yellow !important;
}
a:hover{
  text-decoration: underline !important;
  color: yellow !important;
}
    Code (markup):
     
    Valiant, Feb 21, 2009 IP
  10. Casius14

    Casius14 Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    thats great, but, its changed the colour of all the links in my sidebar aswel, i'd like to keep those white if possible and just the links in my text changing.

    thanks
     
    Casius14, Feb 21, 2009 IP
  11. Valiant

    Valiant Peon

    Messages:
    284
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #11 
    
a{
  text-decoration: none !important;
  color: yellow !important;
}
a:hover{
  text-decoration: underline !important;
  color: yellow !important;
}
#sidebar a{
  color: white !important;
}
#sidebar a:hover{
  color: white !important;
}
    Code (markup):
     
    Valiant, Feb 21, 2009 IP
  12. Casius14

    Casius14 Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    mate! superb!!

    thank you so much been very helpful
     
    Casius14, Feb 21, 2009 IP
  13. Valiant

    Valiant Peon

    Messages:
    284
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Rep?

    And glad I could help you :D
     
    Valiant, Feb 21, 2009 IP
  14. Casius14

    Casius14 Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Rep left!

    TY again!
     
    Casius14, Feb 21, 2009 IP