Hyperlink Colors

14 posts from 5 voices

• Started 8 months ago by acleverly
• Latest reply from Ismael
• This topic is not a support question

Tags:

No tags yet.

1. 

   acleverly
   Member

   How do I change the hyperlink color in the css? I went through the whole style sheet and I'm not seeing the color for the hyperlinks anywhere. I know this must be an easy thing.

   Also how do I do a quick search in the Editor area?

   Posted 8 months ago #
2. 

   acleverly
   Member

   Here is my style sheet I tried adding a hyperlink and hover color and it's not working. It must be so obvious but I'm not getting it. I just want to change the hyperlinks in the body to Aother color.

   Edit: Removed by Devin for less scrolling.

   Posted 8 months ago #
3. 

   Mya
   

   Hi,

   Links are actually set in several places so you may have to change multiple classes or IDs. The file you want though is either style1.css or style2.css located in the /css/ folder of theme's directory. The one you use depends on if you have a light scheme or dark scheme.

   As far as your second question, "Also how do I do a quick search in the Editor area? " I'm not sure what "Editor" you're referring to. The one Visual Editor in Pages or Posts or the Editor in Appearance > Editor?

   Regards,
   Mya

   Posted 8 months ago #
4. 

   acleverly
   Member

   Hi mya, I don't see the Style1 etc sheet where is it located? Do I have to do that in the FTP?

   Posted 8 months ago #
5. 

   Ismael
   Moderator

   Hi acleverly,

   Yes, if your site is hosted on a remote server, you would surely need to use filezilla or other ftp softwares. The directory should look something like public_html > wp-content > themes > newscast > css > style1.css.

   Regards,
   Ismael

   Posted 8 months ago #
6. 

   acleverly
   Member

   Almost there...
   I added the following to overwrite the hyperlinks to this
   a {
   color: #008295!important;
   text-decoration: none !important;
   }
   a:visited {
   color: #008295 !important;
   text-decoration: none !important;
   }
   a:hover, a:active {
   color: #888F96 !important;
   }

   However now I just want the actual hyperlinks in the post and page body to have the color 008295, how do I do that?

   Posted 8 months ago #
7. 

   acleverly
   Member

   Or if that doesn't work to change the font hyperlink color only in the accordion slide area

   Posted 8 months ago #
8. 

   Devin
   Moderator

   Hi acleverly,

   Can you provide a link to a page with an example of exactly the link color you are trying to change. That way we don't have you adding or modifying any incorrect css.

   Regards,

   Devin

   Posted 8 months ago #
9. 

   acleverly
   Member

   Thanks
   http://www.susdcommunityed.org

   Posted 8 months ago #
10. 

    Ismael
    Moderator

    Hi,

    You can edit this element

    #top .heading_clone {
    position: absolute;
    z-index: 4;
    bottom: 20px;
    left: 20px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    }

    Just add the color style

    #top .heading_clone {
    position: absolute;
    z-index: 4;
    bottom: 20px;
    left: 20px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    color: red;
    }

    Regards,
    Ismael

    Posted 8 months ago #
11. 

    acleverly
    Member

    Will that change the top menu or the slider font color?

    Posted 8 months ago #
12. 

    Nick
    Moderator

    Hi,

    This selector that deals with the top slider font color is below, just add the font color to it:

    #top .sliderheading{
    display:block;
    font-size: 26px;
    }

    and top menu is deal with by the following, also you can add the color there as well as any other modifications:
    

    #top .nav{
    position: relative;
    height:36px;
    list-style-type: none;
    list-style-position: outside;
    margin:0;
    z-index: 6;
    font-size: 12px;
    float: left;
    }

    Thanks,

    Nick

    Posted 8 months ago #
13. 

    acleverly
    Member

    Hi Nick,
    This is old but I want to fix this how do I change the hyperlink colors for all hyperlinks here is the style sheet 1
    I thought I changed it to color #0699BB, but it is not showing that.

    body{
    background: #fff url(../images/skin1/bg.png) repeat-x 0 0;
    color:#666;
    }

    #top .logobg a{
    background: transparent url(../images/skin1/logo.png) no-repeat left top;
    }

    #headwrap{
    border-bottom:1px solid #aaa;
    }

    #headextras{
    background: #131313;
    border: 1px solid #333;
    }

    .social_bookmarks .rss a{background: transparent url(../images/skin1/rss_16.png) 0 0 no-repeat;}
    .social_bookmarks .facebook a{background: transparent url(../images/skin1/facebook_16.png) 0 0 no-repeat;}
    .social_bookmarks .twitter a{background: transparent url(../images/skin1/twitter_16.png) 0 0 no-repeat;}
    .social_bookmarks .flickr a{background: transparent url(../images/skin1/flickr_16.png) 0 0 no-repeat;}
    .social_bookmarks .email a{background: transparent url(../images/skin1/email_16.png) 0 0 no-repeat;}

    #submit_news{
    color:#fff;
    background: transparent url(../images/skin1/submit_news.png) top right no-repeat;
    }

    /*head searchform*/

    #head #s{
    background: #fff;
    color:#555;
    }

    #searchsubmit {
    background: transparent url(../images/skin1/search.png) 2px center no-repeat;
    }

    /*nav pages*/
    .nav li a{
    color:#aaa;
    }

    .nav .current a, .nav li a:hover, .nav .currentli_item a{
    color:#fff;
    }

    #top .nav li ul a{
    border:1px solid #484848;
    border-top:none;
    color:#aaa;
    background: #222;
    }

    #top .nav li ul a:hover{
    background:#262626;
    color:#fff;
    }

    #top .nav li ul {
    border-top:1px solid #484848;
    }

    /*nav categories*/
    .catnav_wrapper{
    border-left:1px solid #aaa;
    border-right:1px solid #fff;
    }

    .catnav{
    border-right:1px solid #aaa;
    border-left:1px solid #fff;
    }

    .catnav li{
    border-right:1px solid #fff;
    }

    .catnav li a{
    color:#666666;
    border-right:1px solid #aaa;
    text-shadow:1px 1px 0px #fff;
    }

    .catnav .current a, .catnav li a:hover, .catnav .currentli_item a, .catnav .current-menu-item a, .catnav .current-menu-item a{
    color:#464646;
    }

    #top .catnav li .sub-menu a{
    border:1px solid #aaa;
    border-top:none;
    color:#666;
    background: #f9f9f9;
    }

    #top .catnav li ul a:hover{
    background:#fff;
    color:#464646;
    }

    #top .catnav li ul {
    border-top:1px solid #aaa;
    }

    /*Featured Area*/

    #featured{
    border:1px solid #aaa;
    border-top:none;
    }

    .featured{
    border-left:1px solid #aaa;
    background: #fff url(../images/skin1/preload.gif) no-repeat center center;
    }

    .preloading_background{
    background: transparent url(../images/skin1/preload.gif) no-repeat 50% 50%;
    }

    #top .fadeout{
    background: transparent url(../images/skin1/overlay.png) repeat-y right top;
    }

    .bottom_left_rounded_corner{
    background: transparent url(../images/skin1/rounded.png) no-repeat left bottom;
    }
    .bottom_right_rounded_corner{
    background: transparent url(../images/skin1/rounded.png) no-repeat right bottom;
    }

    #top .feature_excerpt{
    border-top:1px solid #eee;
    }

    .position_excerpt, #top #featured .feature_excerpt {
    background:none repeat scroll 0 0 #FFFFFF;
    }

    #top #featured a{
    color:#444;
    }

    #top .slidecontrolls span{
    background:transparent url(../images/skin1/slide_controlls.png) no-repeat top right;
    }

    #top .slidecontrolls .active_item, #top .slidecontrolls span:hover{
    background:transparent url(../images/skin1/slide_controlls.png) no-repeat top left;
    }

    .newsselect{
    border-left:1px solid #e1e1e1;
    background: #fff;
    }

    .newsselect .single_item{
    border-bottom:1px solid #e1e1e1;
    }

    .newsselect .single_item:hover, .newsselect .active_item{
    background-color: #f1f1f1;
    text-shadow:1px 1px 0 #FFFFFF;
    }

    /*CONTENT AREA*/
    .entry-previewimage{
    border:1px solid #E1E1E1;
    }

    .entry-head, .entry-head a, .entry-bottom, .entry-bottom a{
    color:#0699BB;
    }

    .entry-head .date{background: transparent url(../images/skin1/icon-date.png) no-repeat -3px top;}
    .entry-head .comments{background: transparent url(../images/skin1/icon-comment.png) no-repeat -3px top;}
    .entry-head .author{background: transparent url(../images/skin1/icon-author.png) no-repeat -2px top;}

    .more-link, .entry-bottom .categories, .widget_tag_cloud a{
    background: #f6f6f6 url(../images/skin1/highlight.png) repeat-x left top;
    border:1px solid #e1e1e1;
    }

    .widget_tag_cloud a{
    text-shadow: #fff 1px 1px;
    }

    .more-link:hover, .widget_tag_cloud a:hover{
    background: #eee url(../images/skin1/highlight.png) repeat-x left top;
    border:1px solid #aaa;
    color:#666;
    }

    /*pagination*/

    #top .pagination span, #top .pagination a{
    border:1px solid #e1e1e1;
    }

    #top .pagination a:hover{
    border:1px solid #666;
    }

    #top .pagination .current{
    background: #666;
    border:1px solid #222;
    color:#fff;
    }

    /*sidebar*/

    .sidebar{
    border-left:1px solid #e1e1e1;
    }

    .sidebar .box li a, .box .recentcomments, .entry ul li {
    background:transparent url(../images/skin1/bullet1.png) no-repeat scroll 0 12px;
    border-bottom:1px solid #D6D6D6;
    }

    .box li a, #footer .box .recentcomments{
    background:transparent url(../images/skin1/bullet1.png) no-repeat scroll 0 12px;
    border-bottom:1px solid #333;
    }

    #top .entry ul li {
    background:transparent url(../images/skin1/bullet1.png) no-repeat scroll 0 9px;
    }

    body .gallery li a, body .flickr li a{
    background: transparent none;
    border:none;
    }

    #main ul{
    border-top:1px solid #D6D6D6;
    }

    #top .box_entry, .community_news h3, .link_list h3{
    border-bottom:1px solid #E1E1E1;
    }
    #footer h3, #top #footer .box_entry{
    border-bottom:1px solid #333;
    }

    .box img, .entry img, .wp-caption{
    border:1px solid #E1E1E1;
    }

    .box a:hover img, .entry a:hover img, .entry-previewimage:hover{
    border:1px solid #999;
    }

    /* footer */
    #footerwrap, #wp-calendar th, #prev, #next{
    background: #222;
    }

    #footer .box img{
    border:1px solid #333;
    }

    #footer .box img:hover{
    border:1px solid #555;
    }

    /*comments*/

    #top #social_icons ul{
    border-top:none;
    border-bottom:1px solid #e1e1e1;
    }

    #social_icons .twitter{background: transparent url(../images/skin1/twitter_32.png) 0 0 no-repeat;}
    #social_icons .fb{background: transparent url(../images/skin1/facebook_32.png) 0 0 no-repeat;}
    #social_icons .digg{background: transparent url(../images/skin1/digg_32.png) 0 0 no-repeat;}
    #social_icons .stumble{background: transparent url(../images/skin1/stumbleupon_32.png) 0 0 no-repeat;}
    #social_icons .deli{background: transparent url(../images/skin1/delicious_32.png) 0 0 no-repeat;}
    #social_icons .techno{background: transparent url(../images/skin1/technorati_32.png) 0 0 no-repeat;}

    #author-box, .comment_nav{
    border-top:1px solid #E1E1E1;
    border-bottom:1px solid #E1E1E1;
    }

    .comment_content {
    border:1px solid #E1E1E1;
    }
    .odd .comment_content{
    background: #F6F6F6 url(../images/skin1/highlight.png) repeat-x scroll left top;
    }

    /*CONTACT FORM*/

    .text_input, .text_area{
    border:1px solid #e1e1e1;
    color: #777;
    }

    #send, #submit{
    background: #f6f6f6 url(../images/skin1/highlight.png) repeat-x left top;
    border:1px solid #e1e1e1;
    color: #777;
    }

    #submit:hover, #send:hover{
    background: #eee;
    color: #444;
    }

    .valid .text_input, .valid .text_area{border:1px solid #70A41B;} /*#70A41B*/
    .error .text_input, .error .text_area{border:1px solid #FF9000;}
    .ajax_alert .text_input, .ajax_alert .text_area{border:1px solid #ffb628;}

    /*generic*/

    h1, h2, h3, h4, h5, h6, legend, #top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a{
    color:#222;
    }

    #top h1 a:hover, #top h2 a:hover, #top h3 a:hover, #top h4 a:hover, #top h5 a:hover, #top h6 a:hover{
    color:#0699BB;
    }

    #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer legend, #footer h1 a, #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a{
    color:#eee;
    }

    #top h1 a:hover, #top h2 a:hover, #top h3 a:hover, #top h4 a:hover, #top h5 a:hover, #top h6 a:hover{
    color:#0699BB;
    }

    a{color:#0699BB;}
    a:hover{color:#333;}
    #footer a:hover{color:#fff;}

    blockquote {
    border-left:5px solid #D6D6D6;
    }

    .entry li {
    list-style-type:none;
    padding-left:10px;
    }

    .entry ul ul{
    border:none;
    }

    pre {
    background-color:#FEFEFE;
    border:1px solid #DDDDDD;
    }

    .lightbox_video{
    background:transparent url(../images/skin1/video.png) no-repeat center center;
    }

    #top .lightbox_image{
    background:transparent url(../images/skin1/magnify.png) no-repeat center center;
    }

    Posted 1 week ago #
14. 

    Ismael
    Moderator

    Hi,

    Everything with the "a" selector is considered as hyperlink. Some example are.

    #top .catnav li .sub-menu a.

    a{color:#0699BB;}
    a:hover{color:#333;}

    body .gallery li a, body .flickr li a

    They are all over the place, please take time to find them all and add the css modification you desire.

    Regards,
    Ismael

    Posted 1 week ago #

RSS feed for this topic

Reply

You must log in to post.