Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Complete Novice - How to change button & link colours? WordPress

  • SOLVED

Can anyone please tell me how to change the colour of buttons and links on my first WP site? I'm using the WP store theme by Templatic. I really don't know how to go about this and which part of the code I should make amendments. I'm guessing it's not in any of the .php pages, so I've copied the .css stylesheet below. Please bear with me if this is a stupid question, but I'm admittedly a complete novice to this.

/*

Theme Name: WP Store
Theme URI: http://templatic.com/
Description: Developed by Bhavesh Radadiya.
Version: 1.4
Author: Templatic.com
Author URI: http://templatic.com/

*/

/* IMPORTANT NOTE!
If you wish to make custom changes to your theme, DO NOT EDIT THIS FILE. Instead, use the custom.css template
to define custom styles. This way, you will still be able to take advantage of future upgrades to the theme
without worrying about overwriting your style changes.
*/

/*=== Setup ===*/

/* Import RESET styling for grid framework*/
@import url('library/css/reset.css');

/* Import TEXT styling for grid framework*/
@import url('library/css/text.css');

/* Import GRID styling for grid framework*/
@import url('skins/1-default.css');



/* --------------------------------------------------
Global Reset - Resets all browser defaults to 0
-------------------------------------------------- */
html, body { margin:0; padding:0; }
body { font:12px Verdana, Geneva, sans-serif;}
a { text-decoration:none; }
a:hover { text-decoration:none; }

.fix{ clear: both; height:1px; margin: -1px 0 0; overflow: hidden }
.fl{ float: left }
.fr{ float: right }
.ac{ text-align: center }
.ar{ text-align: right }

hr { margin-bottom:30px; margin-top:20px; clear:both; }
.hr2 { margin:0px; padding:0; clear:both; }

h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

#content .posts .img { margin:5px 18px 12px 0; float:left; padding:2px; }

/* headings ---------------------- */

h1.head { margin:0 0 5px 0; font:36px Arial, Helvetica, sans-serif; padding:0px; }
h1.single { margin:0; font:36px Arial, Helvetica, sans-serif; padding:0px; }

/* Structure ---------------------- */
#wrapper { margin:0px auto; width:960px; }
#header { padding-top:10px; padding-bottom:8px; overflow:hidden; }
#page { padding:20px; margin-top:20px; }

#banner { height:372px; padding:20px; margin-bottom:20px; }
#special_offers { height:120px; }
.area { padding:20px; }

#sidebar { float:left; width:240px; }
.sidebar_bottom { height:100%; overflow:hidden; padding-right:20px; }

#content { width:640px; float:right; padding-top:1px; }
#footer{ overflow:hidden; padding:10px; }

.full_width { width:100% !important; }


/* header ---------------------- */
.blog-title { text-align:center; }
.blog-title a{ font:30px Arial, Helvetica, sans-serif; padding:0; margin:0; text-decoration:none; }
.blog-title a:hover{ text-decoration:none;}
p.blog-description{ font-size:12px; margin:0 0 12px 0; padding:0; clear:both; }

.h_left { float:left; width:490px; margin:30px 0 10px 0; }
.h_right { float:right; width:450px; position:relative; overflow:hidden; height:80px; }

.cart { padding:0; position:absolute; right:0; bottom:0; clear:both; width:230px; font:12px Arial, Helvetica, sans-serif; }
.cart h3 { margin:0 0 5px 0; padding:4px 0 4px 22px; font:18px Georgia, "Times New Roman", Times, serif; }
#main_navi { clear:both; z-index:1; position:relative; height:35px; }

/* top search -------- */
.searchform { position:absolute; right:0; top:7px; width:185px; overflow:hidden; }
.searchform .s { padding:2px 10px 3px 8px; width:110px; font:12px Arial, Helvetica, sans-serif; }
.searchform form { padding:0; margin:0; height:23px; }
.search_btn { position:absolute; top:0px; right:0px; width:56px; height:21px; border:none; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
.search_btn { position:absolute; top:2px; right:0px; width:56px; height:21px; border:none; }
}
#zoom { z-index:99999; }


/* special_offers --------------- */
.special_offers { width:300px; height:120px; }
.special_product { width:285px; height:100px; _height:100px; overflow:hidden; padding:10px; margin-right:20px; float:left; }
.special_product p { margin:0 0 10px 0; padding:0; width:148px; font:12px Arial, Helvetica, sans-serif; line-height:20px; }
.special_product p a { font-size:14px; }
.special_product p.title { font-weight:bold; }
.special_product p span.price { font-weight:bold; font-size:14px; }
.special_product p span.price s { font-weight:normal; font-size:14px; }
.special_product p a.detail { font-size:10px; text-transform:uppercase; }
.special_product .special_img { float:right; overflow:hidden; width:100px; height:95px; margin:0 0 5px 15px; }



/* Home Page ---------------------- */

#slider { overflow:hidden; height:375px; position:relative; }

#content .banner h1 { margin:0 0 20px 0; padding:0 0 47px 0 ; font:48px Arial, Helvetica, sans-serif; line-height:45px; text-align:center; }
#content .banner p { margin:0 0 30px 0; padding:0; font:18px Arial, Helvetica, sans-serif; line-height:24px; }
.img_slider { margin-bottom:25px; }

.content_space { padding:0 20px; }

.container { width:490px; height:300px; overflow:hidden; position:relative; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:490px; display:none; }
#loopedSlider,#newsSlider { margin:0 auto; width:490px; height:300px; padding:0; position:relative; float:right; text-align:center; }

#content .button { margin:0 auto; padding:0; list-style:none; }
#content .button li{ height:100%; overflow:hidden; float:right; margin:0 10px 0 0px; padding:0 0 0 17px; text-align:center; text-align:right; }
#content .button li a { display:block; padding:10px 14px 11px 0px; font:bold 16px Arial, Helvetica, sans-serif; }

a.previous{ position:absolute; left:15px; top:40%; width:37px; height:37px; display:block; text-indent:-9009px; }
a.next{ position:absolute; right:15px; top:40%; width:37px; height:37px;display:block; text-indent:-9009px; }


/*#breadcrumb section =================================== */
.breadcrumb {font-size:12px Arial, Helvetica, sans-serif; padding:10px; clear:both; }
.breadcrumb a { text-decoration:none; padding:0 3px 0 0; text-align:left; text-decoration:none; }
.breadcrumb strong { padding:0 0 0 5px; font-size:10px; text-align:left; }
.breadcrumb a:hover { text-decoration:none; }


/* content ---------------------------- */
p { padding:0px 0 10px 0; line-height:20px; margin:0 }
#content p { font-size:12px; padding:0px 0 10px 0; line-height:20px; margin:0 }

#content ul { list-style:none; margin-left:18px; }
#content li { margin:0 0 8px 0; padding:0 0 0 12px; line-height:20px; font-size:14px; }
#content ol { margin:0; padding:0 0 10px 5px; list-style-type:decimal; line-height:18px; }
#content ol li { margin:0 0 5px 0; padding:0; }

#content h3 { margin:20px 0 0px 0; padding:0; font-size:22px; }

#content .product { padding-bottom:20px; margin-bottom:20px; }
#content .product_info { width:300px; float:right; padding:0; margin:0; }
#content .product_details { padding:12px; height:100%; overflow:hidden; margin-bottom:20px; }
.pro_img { float:left; width:340px; padding-top:4px; }
.pro_img img { margin-bottom:10px; }

.pro_thumb_img { clear:both; }
.pro_thumb_img img { margin-right:8px;}

#content .product img { float:left; }
#content .product_inner img { float:inherit; }

#content .product_info h3 { margin:0 0 3px 0; padding:0; font:24px Arial, Helvetica, sans-serif; }
#content .product_info h4 { margin:15px 0 3px 0; padding:0; font:bold 14px Arial, Helvetica, sans-serif; }

.b_addtocart a { display:block; padding:5px 10px 8px 29px; float:left; margin-right:5px; font-size:13px; }
.b_checkout a { display:block; width:108px; height:29px; float:right; text-indent:-9009px; }

.b_buynow { padding:5px 10px 8px 29px; float:left; font-size:13px; width:100px; cursor:pointer; text-align:left; }


.b_checkout2 { display:block; width:108px; padding:5px 8px; cursor:pointer; font-size:12px; }
.b_update_cart { display:block; width:108px; height:28px; cursor:pointer; }


.textbox { padding:2px; font:bold 12px Arial, Helvetica, sans-serif; width:45px; }
.row_spacer { margin:10px 0 10px 0; }
.row_spacer strong { float:left; width:45px; padding-top:3px; }

.row_spacer select { padding:3px; width:85px; }

.size_chart { width:80px; margin:0 0 0 10px; padding:3px 5px; text-decoration:none !important; cursor:pointer; }
.close { font-weight:bold; cursor:pointer;}


.shipping_section { margin-bottom:12px; }
.shipping_title { font-size:12px; font-weight:bold; padding:5px 0; }
.pro_s { width:100px; float:left; text-align:left; }
.pro_q { width:35px; float:left;text-align:center; }
.pro_p { width:55px;float:right; text-align:center; }
.shipping_row { font-size:12px; padding:5px 0; height:100%; overflow:hidden; }
.shipping_total { font-size:12px; font-weight:bold; padding:5px; text-align:right; clear:both; margin-bottom:10px; }


/*---------TOP NAVIGATION for PAGES--------- */
.page_nav { float:right; height:27px; margin:20px -30px 0 0; text-align:left; padding:0; }
.page_nav li { list-style:none; margin:3px 30px 0 0; padding:0; float:left; }
.page_nav li a { list-style:none; font-size:12px; font-weight:bold; padding:6px 0; }
.page_nav li a:hover { text-decoration:none; }



/* post ---------------------------- */
blockquote { clear:both; height:100%; margin:10px 0 0px 5px; overflow:hidden; padding:0 0 5px 45px; }
#content blockquote p { font:italic 18px Arial, Helvetica, sans-serif; margin:0 0 5px 0; padding:0; line-height:23px; }
blockquote cite { font-size:12px; font-style:bold ; float:right; line-height:18px; text-align:right; display:block; }
blockquote a { font-size:13px; }

.flickr h3 span{ font-weight:normal;}
.flickr h3{ margin-bottom:20px }
.flickr ul{ margin:12px 0 0; padding:0 }
.flickr_badge_image{ float:left; list-style:none; margin:0 9px 9px 0 }
.flickr img{ padding:2px; width:58px; height:58px; }

#calendar_wrap{ padding:0; font-size:13px }
#wp-calendar { width:100%; }
#wp-calendar caption { font-weight:bold; font-size:15px; text-transform:uppercase; }
#calendar_wrap caption{ padding:10px 0 }

.posts h1 { font-size: 25px }
.posts h2 { font-size: 23px }
.posts h3 { font-size: 21px }
.posts h4 { font-size: 19px }
.posts h5 { font-size: 17px }
.posts h6 { font-size: 15px }

.content_spacer h4.cate_title { font-size:26px; clear:both; }

dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset { padding:10px 0 5px 0; margin:0 }
p { padding:0px 0 10px 0; margin:0; margin:0; }
p em { line-height:20px; }

code { line-height:18px; }

#content .posts { padding-bottom:5px; margin-bottom:35px; padding-top:12px; }
#content .post_top { margin:0 0 10px 0; }
#content p.post_top a { text-decoration:none; }
#content p.post_top a:hover { text-decoration:none; }
.more { font-size:12px; font-weight:bold; }

#content .post_top h2 { margin:0; padding:0; font-size:24px; line-height:normal; }

.commentcount { margin-left:0px; padding:5px 5px 5px 22px; float:right; display:block; }
.tags { float:left; width:500px; padding-top:8px; }


#content .headline { padding-left:25px; }
#content .headline h3 { margin:0; border:none; float:left; font-size:16px; font-weight:bold; }
#content .headline h3 a { padding:12px 0 8px 0; width:430px; display:block;}

#content .headline .commentcount { float:right; margin-right:-8px; margin-top:12px; width:90px; text-align:left; }
#content p.postmetadata { margin:0 0 0px 0; font-size:11px; }


#content .post_top p.postmetadata { margin:0; padding:0; }


#content .posts h2.title { margin:0; padding:0; font-size:26px; font-weight:bold; }
#content .posts h2.title a { text-decoration:none; }
#content .posts h2.title a:hover { text-decoration:none; }

#content p.post_bottom { margin:0; padding:15px 0 5px 0; font:11px Arial, Helvetica, sans-serif; }
#content p.post_bottom a { text-decoration:none; }
#content p.post_bottom a:hover { text-decoration:none; }

/* Post Pagination */
.pagination { margin:0; padding:5px; height:100%; overflow:hidden; margin-bottom:20px; text-align:center; clear:both; }
.pagination .on { padding:5px 10px; margin-right:3px; display:inline; }
.pagination a { display:inline; padding:5px 10px; margin-right:3px; line-height:28px }




/*#sidebar----------------------- */

#sidebar .widget ul{ margin:0; padding:0; list-style:none; }
#sidebar .widget li { margin:0; padding:0; font:12px Verdana, Geneva, sans-serif; }
#sidebar .widget li a { padding:7px 0 7px 18px; display:block; }

#sidebar .widget { margin:0px 0 25px 0; }
#sidebar .widget h3 { margin:0 0 5px 0; padding:8px 10px; font:bold 13px Arial, Helvetica, sans-serif; }


/*#sidebar_r ----------------------- */

#sidebar h3 { margin:0 0 5px 0; padding:5px 10px; font:bold 12px Verdana, Geneva, sans-serif; }

#sidebar ul { margin:0; padding:0; list-style:none; }
#sidebar li { margin:0; padding:0; font:13px Verdana, Geneva, sans-serif; width:100%; }
#sidebar li a { padding:5px 0 5px 18px; display:block; }


.subscribe { margin-top:20px; }
#sidebar .subscribe p { margin:0 0 5px 0; padding:0; font:11px Arial, Helvetica, sans-serif; }

.subscribe form { position:relative; }
.subscribe b { margin-top:-3px; }

.field { padding:3px 5px 3px 5px; width:145px; font-size:12px; height:16px; }
.replace { text-align:center; vertical-align:middle; width:59px; font:14px Arial, Helvetica, sans-serif; border:none; cursor:pointer; float:right;
position:absolute; right:0; top:0px; height:24px; padding-bottom:3px; line-height:25px; text-indent:-9009px; }
* html .replace { right:34px; float:left; }


.ad-box { margin-bottom:20px; text-align:center; clear:both; }

.twitter { margin-bottom:35px; }
.twitter_icon {padding:0px; font:18px Arial, Helvetica, sans-serif; margin-left:15px; }


#sidebar .widget .twitter_post { line-height:18px; margin:10px 0 0 0; }
#sidebar .widget .twitter_post #twitter li { list-style:none; margin:0 0 5px 0; padding:0 0 5px 15px; line-height:18px; }
#sidebar .widget .twitter_post #twitter li a { display:inherit; padding:0; }

.sidebar_speical_products { padding-bottom:33px; padding-top:10px; display:block; }

#sidebar .sidebar_speical_products p.title { margin:0 0 3px 0; padding:0; font-size:13px; text-align:center; font-weight:bold; }
#sidebar .sidebar_speical_products p.price { margin:5px 0 12px 0; font-size:18px; text-align:center; }
#sidebar .sidebar_speical_products a.highlight_button { margin-left:45px; }

a.special_pro { width:195px; height:180px; overflow:hidden; display:block; margin-left:14px; }

/*---------ARCHIVE PAGE --------- */
.arclist ul{ padding:0; margin:0 }
.arclist ul li{ color:silver; font-size:14px; padding:5px 0; margin:0; }
.arclist ul li ul{ border-bottom:0; padding:0 0 0 5px }
.arclist ul li ul li{ border-bottom:0; padding:10px 0 0 5px }
.arclist .archives-time{ float: left; font-size:12px; text-transform: uppercase; width:90px; margin:0 15px 0 0 }
.arclist ul li a:hover { text-decoration:underline; }

/*---------COMMENTS --------- */
#comments h3{ font-size: 18px; padding:0 0 5px 0; margin:0 0 20px 0; }
#comments .commentlist { padding:0; margin:0 }

#comments .commentlist li p { margin:0; padding:0; }
#comments ol{padding:20px 0;}
#content #comments .comment { margin: 10px 0 30px 0; padding:0; width: 100%; background:none; list-style:none }
#comments .comment a{ text-decoration:none; padding:1px 0 }
#content #comments p.authorcomment { margin:3px 0 0 0; padding:0; line-height:normal; font-size:11px; font-weight:bold; }
#comments p.authorcomment a { text-decoration:none; }
#comments p.authorcomment a:hover { text-decoration:none; }

#comments .comment .meta-left { width: 90px; float:left;}
#comments .comment .meta-left p{ padding:0; margin:0 }
#comments .comment .meta-left .meta-wrap {width: 90px; overflow: hidden; padding-right: 7px; min-height:70px; }
#comments .comment small {font-size: 11px }
* html #comments .comment .text-right { height:70px }
#comments .comment .text-right { min-height:70px; margin:0; padding: 12px; margin-left:100px; float:none }
#comments .comment .text-right p { line-height: 18px; padding: 0 0 8px 13px; font-size:12px; }
#comments ul.children { margin:10px 0 0 20px; padding:0 }
p.commpadd{ padding:0; margin:0 0 10px 0 }
span.comm-reply{ float:right; padding:5px 0 0 0; font-size:11px; }
span.comm-reply a:hover{ font-size:11px; text-decoration:none; }
.cancel-comment-reply{ padding:0 0 10px 0 }
#respond { padding:10px 0 0 0; margin:0 }
#respond textarea, .commpadd input{ font:14px Arial, Helvetica, sans-serif; }
#respond textarea { margin:0; padding:5px; }
p.commpadd input{ line-height:25px; height:25px; padding:5px 0 0 5px; width:300px }
#content p.commpadd label{ padding:0 0 0 5px; font:12px Arial, Helvetica, sans-serif; }
input#submit{ font:bold 14px Arial, Helvetica, sans-serif; text-align:center; padding: 7px; margin:0; cursor:pointer; }
* html #commentform label { margin:-8px 0 0 0; position:relative; top:-8px; }
*+html #commentform label { margin:-8px 0 0 0; position:relative; top:-8px; }

.avatar { padding:3px;}


#footer p { line-height:18px; }
#footer .copyright , #footer .copyright a {text-decoration:none; }

#footer .designby { padding:5px 8px 0 0; float:left; }
#footer p span.templatic { width:80px; display:block; overflow:hidden; float:left; }
#footer p span.templatic a { text-indent:-9009px; padding-left:120px; height:30px; display:block; background:url(images/templatic.png) no-repeat left 5px; }

.fnav { margin:0px 0 32px -20px; padding:0; list-style:none; float:left; }
.fnav li { margin:0 5px 0 0; padding:0 10px 0 18px; font:11px Arial, Helvetica, sans-serif; float:left; line-height:12px; }
.fnav li a { text-decoration:none; }
.fnav li a:hover { text-decoration:none; }

/* clearfix -----------*/
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
.clearboth { clear:both; }

/* product details --------------------- */
#content .fav_link { margin:0 0 5px 0; padding:20px 0 20px 0px; clear:both; height:100%; overflow:hidden; }
#content .fav_link li { margin:0; float:left; padding:8px 10px 8px 30px; font:bold 12px Arial, Helvetica, sans-serif; display:inline; }
#content .fav_link li a { text-decoration:none }
#content .fav_link li a:hover { text-decoration:none }
#content .fav_link li span { text-decoration:none !important; }
#content .addtocartformspan { padding:10px; height:100%; overflow:hidden; font:14px Arial, Helvetica, sans-serif; }
#content #addtocartformspan, #content #addtocartformspan2 { margin-bottom:20px; clear:both; margin-top:10px; display:block; line-height:20px; font-size:12px; }
#content #addtocartformspan small, #content #addtocartformspan2 small { font-size:12px; }

.no_image{height:140px; width:140px; float:left; vertical-align:middle; text-align:center; font-weight:bold; }

#content .realated_product_section h3 { font-size:16px; margin-bottom:10px; font-weight:bold; }
#content .realated_products { margin:0 0 0 -30px; _margin:0 0 0 -68px; padding:0; _height:200px; min-height:100px; }
#content .realated_products li { margin:0 0 0px 35px; padding:0; width:130px; float:left; font-size:12px; line-height:normal; text-align:center; position:relative; }

#content .realated_products li .sale_img { position:absolute; top:0; left:0; }

#content .realated_products li a.product_thumb { overflow:hidden; width:130px; height:125px; display:block; }


/* ----------------------------------------
product listing view
------------------------------------*/

.options { padding:4px 10px; height:100%; overflow:hidden; margin-bottom:20px; }
.print { float:left; margin-top:3px; padding:2px 0 2px 18px; }

#content .options h4 { margin:0; padding:4px 0 4px 0; font:bold 12px Verdana, Geneva, sans-serif; float:left; }

.view_more { float:right; font-size:11px; margin:4px 0 0 0; }

.products_box { overflow:hidden; }
#content ul.display { float: left; min-height:200px; margin:0; padding:0; list-style: none; }
* html #content ul.thumb_view { height:200px; margin: 0 0 0 -30px; width:660px; }

#content ul.thumb_view { margin: 0 0 0 -12px; }


#content ul.display li { float: left; padding: 10px 0 20px 0; width:650px; margin: 0 0 20px 0px; }
#content ul.display li a { text-decoration: none; }
#content ul.display li .content { margin:0; padding:0; width:450px; float:right; }
#content ul.display li .content p { margin-left:0; font:12px Verdana, Geneva, sans-serif ; }
#content ul.display li h3 { font:12px Verdana, Geneva, sans-serif; font-weight:bold; line-height:normal; }


#content ul.display li .content #addtocartformspan { margin-top:5px; display:block; }
#content ul.display li .content_block a img{ padding:0px; margin-bottom:5px; float:left;}
#content ul.thumb_view li{ width: 185px; padding-left:20px; margin-bottom:0; margin-left:10px; min-height:318px; _height:340px; float:left; text-align:center; }
#content ul.display li h3 { display:none; }
#content ul.thumb_view li h3 { display: inline; text-align:center; font-size:13px; font-weight:bold; }
#content ul.thumb_view li .content { width:auto; float:none; }


#content ul.display li h3.title { display:inherit; margin:0 0 10px 0; font-size:18px; font-weight:normal; }
#content ul.thumb_view li h3.title { display:none; }

#content ul.thumb_view li .content p.contentp { display:none; }
#content ul.thumb_view li .content p.contentp2 { clear:both; }
#content ul.thumb_view li .viewdetails { margin:10px 0 0 30px; }
#content ul.display li .viewdetails a, a.btn_viewdetail { float:left; display:block; width:108px; padding:3px 10px 5px 10px; cursor:pointer; font-size:13px; text-align:center; }
a.btn_viewdetail { padding:8px 10px; }



#content ul.thumb_view li .content_block a.product_thumb { height:145px; margin-top:8px; overflow:hidden; display:block; position:relative; }

#content ul.display li .content_block a.product_thumb { margin-bottom:5px; overflow:hidden; height:145px; display:block; float:left; position:relative; }

#content ul.thumb_view li .content_block a img { margin: 0 0 10px; }

#content ul.display .content ul { margin:0; padding:0; list-style:none; }
#content ul.display .content ul li { margin:0; padding:3px 0 3px 12px; list-style:none; }
#content ul.display li p.regular_price { width:auto; float:none; margin:0; padding:0; font-size:12px; }
#content ul.display li p.sale_price { width:auto; float:none; margin:0 0 15px 0; padding:0; font-size:18px; }
#content ul.display li .sale_img { position:absolute; left:0px; top:0px; }



#content ul.thumb_view li .sale_img { position:absolute; left:0px; top:0px; }
#content ul.thumb_view li p.regular_price { width:auto; float:none; margin:0 0 0 10px; padding:0; font-size:12px; }
#content ul.thumb_view li p.sale_price { width:auto; float:none; margin:0; padding:0; font-size:18px; }

#content a.switch_thumb { width:125px; height:26px; margin:0px 0; padding:0; float:right; line-height:26px; display:block; outline:none; }
#content ul.spacer_none li { margin-bottom:0; }

#content ul.display li.product_sepretor { display:none; }
#content ul.thumb_view li.product_sepretor { height:10px; min-height:10px; padding:10px; display:block; margin-top:25px; width:640px; border-top:1px solid #e2e2e2; clear:both; }


.specialpirce { text-decoration:line-through; font-size:12px; font-weight:normal; }
.msg { float:left; margin-right:10px; }
.size_spacer { margin-top:10px; }
.color_spacer { padding-bottom:10px; }

a.viewcart { font-size:14px; }
a:hover.viewcart { text-decoration:underline; }

.product_thumb { overflow:hidden; }
.top_menu{ float:right;};

/* content ---------------------------- */
#content h3 { margin:0 0 10px 0; padding:0; font:22px Arial, Helvetica, sans-serif; }
#content p { font-size:14px; }
#content ul { list-style:none; }
#content li { margin:0 0 8px 0; padding:0 0 0 12px; line-height:20px; font-size:14px; }
#content ol { margin:0 0 0 18px; padding:0 0 10px 5px; list-style-type:decimal; line-height:18px; }
#content ol li ol { margin:8px 0 5px 18px; padding:0; }
#content ol li { margin:0 0 5px 0; padding:0; }

/* view cart page --------------- */
#content .order_info p { font-size:13px; }
#content .order_info p span { width:100px; float:left; }

#content a.normal_button { padding:7px 10px 8px 10px; line-height:10px; cursor:pointer; font-size:12px;
line-height:10px; text-decoration:none; display:block; font-weight:bold; }
#content a:hover.normal_button, .normal_button:focus {text-decoration:none; }

a.highlight_button, .viewdetails a.highlight_button { padding:7px 10px 8px 10px; line-height:10px;
cursor:pointer; font-size:12px; line-height:10px; font-weight:bold; }
a:hover.highlight_button, .viewdetails a:hover.highlight_button { text-decoration:none; }

#content .normal_input_btn,.normal_input_btn { padding:3px 5px 4px 5px ; line-height:10px; cursor:pointer; font-size:12px;
line-height:10px; text-decoration:none; display:block; }
#content .normal_input_btn:hover,.normal_input_btn:hover {text-decoration:none; }

* html #content .normal_input_btn { line-height:13px; }

*+html #content .normal_input_btn{ padding:6px; }
html>body #content .normal_input_btn { line-height:13px; margin-top:0px; }


#content .highlight_input_btn, .highlight_input_btn { padding:3px 10px; line-height:10px; font:bold 13px Verdana, Geneva, sans-serif;
cursor:pointer; margin-top:5px; }
#content .highlight_input_btn:hover { text-decoration:none; }



#content .product_details p, .product_info p { margin-left:0; }
html>body #content .coupon_code a.normal_button { margin-top:1px; }
html:first-child #content .coupon_code a.normal_button { margin-top:1px; }
*+html #content .coupon_code a.normal_button { margin-top:-0px !important; position:relative; }



#authorizenetoptions { margin-left:25px; }
#authorizenetoptions input, #authorizenetoptions select{ padding:4px; }

#mycart_content { width:620px; float:left; }
#mycart_sidebar { width:280px; float:right; padding-left:20px; }
#checkout_content { width:615px; float:left; }
#checkout_sidebar { width:280px; float:right; padding-left:20px; }

#content .help h5 { margin:0; padding:0; font-size:12px; }
#content .help p { margin:0 0 8px 0; padding:0; font-size:11px; line-height:16px; }
#content .help ul { margin:0 0 8px 0 ; }
#content .help li { font-size:11px; margin:0; }
#content #mycart_sidebar .payment_info { padding-top:15px; text-align:center; margin-top:10px; clear:both; }

.table { width:100%; margin-bottom:10px; }
.table_td_align { vertical-align:top; padding:0; margin:0; }


.table td { padding:5px 10px; vertical-align:top; }
.table td.title { font-size:14px; font-weight:bold; }
.table .row1 { font-size:12px; }
.table td a { text-decoration:none;}
.table .row2 { padding-top:10px; font-size:14px; }
.table .row3 { padding:8px; font-size:12px; }
.table a { text-decoration:underline; }
.table a:hover { text-decoration:underline; }
.table .tprice { padding-left:22px; font-size:14px; text-align:left; }
.table .remove { font-size:12px; }
.table .total_price { padding-left:22px; font-size:22px; text-align:left;}
.table .pro_des { font-size:12px; }
.table .qty { padding:2px; width:60px; }
.table_spacer { margin-bottom:30px; }

.qty_input { width:50px; }
.remove_item { padding-left:18px; margin-top:15px; display:block; font-size:11px; }
.product_thum { padding:5px; }

.button_bar { height:100%; overflow:hidden; margin-bottom:50px; padding-top:10px; }
.button_bar2 { height:100%; overflow:hidden; margin-bottom:50px; }

.coupon_code { padding:10px 10px 10px 120px; }

.coupon_text { padding:5px; margin:0 5px; }
* html .coupon_text { width:110px; }


.coupon_code table td { vertical-align:middle; }

.total_amount {padding:10px 5px; font-size:18px; }
.total_amount_title { padding:8px 5px 0 5px !important; font-size:16px; }
.order_info { height:100%; overflow:hidden; padding:10px; padding-bottom:5px; margin-bottom:10px; }
.continue_spacer { margin-left:20px; margin-top:17px; }
.checkout { margin-top:10px; width:85px; }
.recalculate {width:80px; }
.help { width:45%; }

/* Login Form ------------------------------------------------ */
#page h5 { margin:0 0 12px 0; padding:0 0 5px 0; font-weight:bold; }
#page p.forgetmenot { font-size:11px; margin-left:85px; }
#page p.mandatory { position:absolute; right:15px; top:15px; font-size:12px; text-align:right; }
#page .lostpassword_form h3 { margin-top:0; font-size:14px; font-weight:bold; }
#page .login_form h3 { margin:-5px 0 5px 0; padding:0; }
#page .form_col_2 h3 { margin:-5px 0 5px 0; padding:0; }



#reg_passmail { clear:both; padding:4px; margin-bottom:12px; font-size:12px; }


#page .form h5 { margin-bottom:15px; }
.form_col_2 { position:relative; }

#page .form { clear:both; padding:20px; height:100%; overflow:hidden; margin-bottom:20px; }
#page .form_row { margin-bottom:10px; height:100%; overflow:hidden; }
#page .form_row label { float:left; width:85px; padding-top:5px; font-size:13px; }
#page .form_textfield { padding:4px; width:150px; }

.login_form { margin-bottom:20px; clear:both; }
.lostpassword_form { padding:20px; padding-top:15px; clear:both; }
.login { margin-left:90px; }

.forgot_pass { font:bold 14px Arial, Helvetica, sans-serif; text-align:center; padding:5px; cursor:pointer; }
.lostpassword_form label { font-size:13px; margin-bottom:5px; display:block; }
.lostpass_textfield { padding:6px 4px 5px 4px; width:250px; margin-bottom:8px; }

.reg_row { margin-bottom:10px; height:100%; overflow:hidden; width:46%; margin-right:20px; float:left; }
.reg_row label { display:block; margin-bottom:5px; }
.reg_row_textfield, .inquiry_row .reg_row_textfield { padding:5px 4px; width:240px; }
.row_hide { display:none; }

#checkout_sidebar .checkout_address .reg_row_textfield { width:230px; margin-bottom:5px; }


.inquiry_row { margin-bottom:10px; height:100%; overflow:hidden; margin-right:20px; }
.inquiry_row label { display:block; margin-bottom:5px; float:left; width:120px; }

.inquiry_row .reg_row_textarea { padding:4px; width:290px; height:250px; font:12px Arial, Helvetica, sans-serif; }
.send_inquiry { margin-left:120px; margin-right:10px; }

.sucess_msg { padding:5px; margin-bottom:15px; text-align:center; font-size:12px; font-weight:bold; clear:both; }
.error_msg { padding:5px; margin-bottom:15px; text-align:center; font-size:12px; font-weight:bold; clear:both; }
.registration { font:bold 14px Arial, Helvetica, sans-serif; text-align:center; float:right; padding:5px; cursor:pointer; }

.myorders { height:100%; overflow:hidden; margin-bottom:20px; }
.myorders_col { width:43%; padding:10px 15px 15px 15px; margin-bottom:20px; }
.myorder_form { padding:20px; height:100%; overflow:hidden; margin-bottom:20px; }
.myorder_form_row { margin-bottom:10px; height:100%; overflow:hidden; }
.myorder_form_row label { width:322px; display:block; padding-bottom:5px; float:left; font-size:13px; }
.myorder_text { width:240px; padding:4px; }

/* size chart popupwindow -------------------*/
#info { width:600px !important; margin:0 auto; padding:10px; display:none; text-align:left; font-family:verdana, sans-serif;}
#info p {font-size:11px; line-height:1.6em;}
#info img { margin:0 10px 10px 0; display:block; float:left; }
#infoHolder { top:100px !important; position:fixed !important; }
* html #infoHolder { top:50% !important; position:absolute !important; }
#infoBacking { width:auto !important; }



/* product big image----------------*/
div#photos { width:340px; float:left; position:relative; }
div.photo { float:left; display:inline; margin:0 10px 25px 0; }
p#turtles_caption { margin:5px 0 0;}

div.photo a.small_thumb { width:90px; height:65px; overflow:hidden; display:block; float:left; }

.product { height:100%; overflow:hidden; }
.product h1.head { margin-bottom:10px; font-size:20px; }

.main_photo { width:300px; position:relative; text-align:center; height:289px; overflow:hidden; }
.zoom a { position:absolute; right:10px; bottom:10px; text-indent:-9009px; display:block; width:36px; height:36px; }
.product_info { width:400px; padding:15px 15px 5px 15px; margin-bottom:20px; }
.row { height:100%; overflow:hidden; margin-bottom:8px; }
.pfield { float:left; width:55px; padding-top:4px; }
p.tax_type { display:none; }
.price { font-size:26px; }

#sidebar .current-cat .children, #sidebar .current-cat-parent .children { display:inherit}
#sidebar li.current-cat a { font-weight:bold; }
#sidebar li.current-cat ul.children li.cat-item a { font-weight:normal; }


.i_excel { background:url(images/i_excel.jpg) no-repeat; padding-left:20px; }
a.i_excel { text-decoration:underline; }

/* Checkout -----------*/
#content .sign_in_l h3, #content .registernchekout_m h3, #content .checkout_r h3 { font-size:19px; }
#content .sign_in_l p { font-size:12px; }
.sign_in_l { float:left; padding:10px; height:170px; margin-left:20px; margin-bottom:20px; text-align:center; position:relative; z-index:0; }
.registernchekout_m { float:left; padding:10px; height:170px; margin-bottom:20px; text-align:center; position:relative; z-index:0; }
.checkout_r { float:right; padding:10px; height:170px; margin-bottom:20px; text-align:center; position:relative; z-index:0; }

.common_button { width:128px; border:none; cursor:pointer; font:bold 13px Arial, Helvetica, sans-serif; text-align:center;
padding:6px 0 8px 0; }
.common_button:hover { cursor:pointer; }
.terms_condition { text-align:right }

.sign_in_l .common_button, .registernchekout_m .common_button, .checkout_r .common_button { position:absolute; bottom:25px; }

.coda-slider-wrapper { overflow:hidden;}
.container_message { min-height:400px; }

2011-07-29 by iwannabe

Answers (4)

2011-07-29

Clifford P answers:

Quick answer: "Anywhere you see a{ or a:____{"
Example from your "Header" part of CSS:
.blog-title a{ font:30px Arial, Helvetica, sans-serif; padding:0; margin:0; text-decoration:none; }
.blog-title a:

Tips:
1) From [[LINK href="http://www.w3schools.com/css/css_link.asp"]]http://www.w3schools.com/css/css_link.asp[[/LINK]]:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
2) You see the warning at the beginning of your CSS file? It says DO NOT change this CSS stylesheet. Here's what you do:
Create your own stylesheet, like mine.css, based on this: [[LINK href="http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme"]]http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme[[/LINK]]

iwannabe comments:

Thank you, Cliff.... I'll go throught the link

2011-07-29

derekshirk answers:

Hi iwannabe

Looks like your link colors are probably decalred in your 1-default.css or your text.css file. Looks like these css files are both located in your library/css direction within your team. Open up those files in your code editor and look for a link declaration.

You are looking for an a {}

For example a {color:#454545;}


/* Import TEXT styling for grid framework*/

@import url('library/css/text.css');



/* Import GRID styling for grid framework*/

@import url('skins/1-default.css');

If you haven't already I would use firebug, a plugin for firefox to inspect the link element you want to change. This tool will let you know which line number in your css file you will need to change as well as which css stylesheet you need to look for.

let me know if you have any questions or send me a direct message if you want more personalized help.

iwannabe comments:

Thank you very much, Derek. I have just installed firebug and I am just learning how to use it. I'm not sure if I should be changing anything on that page because of the "DO NOT EDIT THIS FILE" warning. Here is the custom.css file. I wonder if the notice in it means that any code inputted here would override whatever is in the stylesheet file?

/*
File: custom.css
Description: Custom styles for Your Theme

HOW TO USE THIS FILE:

Override any class you want and it will change default styling to suit your needs.

For example, if you wish to change the default text blog title to grey, you would add the
following declarations to this file:

#header .blog-title a{ background:#cccccc } <--- This makes blog title background grey

*/

derekshirk comments:

The reason that comment appears that the top of your css file is because in cause you ever want to upgrade your theme, you can avoid overwritting any changes you made by creating your own style sheet. For example, once you get the hang of using Firebug, you could create a new stylesheet, for example custom.css and then at the top of your style.css file where it decares all of those other stylesheets, just add this:

/* Import YOUR VERY OWN CUSTOM styling for grid framework*/

@import url('library/css/custom.css');

just make sure that you place your new custom.css file in the library/css directory located inside your theme folder.

Have you identified the link you want to modify the color of and what line number you need to edit in the proper css file yet?


derekshirk comments:

You can kind of ignore my last comment - I didn't understand that you already had a custom.css file for your theme. You can just make your edits in that file and you will be fine - nothing to worry about.

iwannabe comments:

Wow, it's not that much of a straight forward job then is it? Thank you for the tips though!

derekshirk comments:

I'm sorry if I have made this sound more confusing then it really is. It is very easy and straight forward.

1. Use firebug to identify which line you need to edit.
2. Overwrite it by adding a new declaration to your custom.css file
3. Enjoy your success

iwannabe comments:

Awesome. I think I get the gist now. Thank you very much!

2011-07-29

Daryl Lozupone answers:

The simple answer is:

a { color: #CCCCCC; }

This would make ALL links in the site grey.

If you want to only change the link colors in the content area, and not the sidebar (for example), you have to be more specific:

#content a { color: #CCCCCC }

would only effect links in the elements (div, p, etc) whose id is 'content'.

If you could be more specific as to which links you want to change, and a link to your site, I could give you more specific answers.

You can also study the following resource: [[LINK href="http://www.w3schools.com/css/"]]W3 Schools CSS tutorials[[/LINK]].

I hope that helps.

iwannabe comments:

Thank you very much, Daryl. I presume all this needs to be done in the custom.css file, and it overrides whatever is already existing?

2011-07-29

Ivaylo Draganov answers:

Hello,

If you want to understand how your website's HTML/CSS work you should use a browser with a developer's tool. All major browsers have something like that (even IE). For Firefox you should install the Firebug extension, for Chrome you can simply press "Ctrl+Shift+I" to bring up the web inspector, for Opera there is Dragonfly and so on.

These tools let you inspect every element of the page and see which rules exactly affect its appearance. You can also edit the CSS rules and even the HTML markup and see how that will look right there on the page. It's the ultimate WYSIWYG web-page editor :--)

All you need to get started is right-clicking an element and selecting "Inspect element".

Google around for the stuff I mention and get rollin'!
Good luck :--)