Help with changing colors

Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #20701
    glascala
    Member

    Hello Theme Support!

    I am currently working on a website using your Extinct Theme for WordPress.
    I have really found the tools useful in this theme for sure. The only issue that I seem to have run into is changing of Font Colors in the theme. I cannot seem to change any of the “Heading” colors,
    Seen Here
    Headings

    more specifically the “fancy heading”
    Fancy Heading

    As well as the picture descriptions in the portfolio.
    Image Descriptions

    Basically anything that is on the demo theme that is orange, I would like to change to blue, I have found some of the changes but not the ones listed above I know that it does involve editing the style.css files in the NON CHILD theme of EXTINCT so I just really want to know which pieces of code I have to change.

    Thanks in advance!!

    #20715
    Veena
    Moderator

    You can copy the CSS from css/skins/default.css and paste it to themeoptions > custom CSS tab and substitute the required hex color instead of default one .

    #20747
    glascala
    Member

    ive added this to the custom css but it doesnt seem to change anything… im changing all the colors that are orange to #101C58 color hex code.

    Please advise on how to get the custom css to work properly ๐Ÿ™‚

    #20754
    Veena
    Moderator

    Pls use the below custom CSS in themeoptions –

    a, a:active, a:visited { color: #101C58 !important; }
    a:hover { color: #888; }
    ul.post-list .byline a, ul.post-list .byline a:active, ul.post-list .byline a:visited { color: #101C58 !important; }
    ul.post-list .byline a:hover { color: #888 !important; }
    .post-snippets .hentry .entry-title a:hover, ul.post-list .entry-title a:hover { color: #101C58 !important; }
    th { background: #101C58 !important; }
    #primary-menu .hover-bg, #primary-menu > ul.menu > li:hover > ul.sub-menu { border-color: #c1432f; }
    #content .hentry h2.entry-title a:hover { color: #101C58 !important; }
    .byline span i { color: #101C58 !important; }
    .entry-meta span i { color: #101C58 !important; }
    .entry-meta span:hover a { color: #101C58 !important; }
    .loop-nav a:hover { color: #101C58 !important; }
    .page-links a, .pagination a, .page-links a:visited, .pagination a:visited { background: #101C58 !important; }
    .sidebar li:hover > a { color: #101C58 !important; }
    #title-area { }
    #title-area a, #title-area a:active, #title-area a:visited { color: #101C58 !important; }
    #portfolio-filter a:hover { color: #101C58 !important; }
    .header-fancy span { background-color: #101C58 !important; }
    h3.fancy-header { background-color: #101C58 !important; }
    .top-of-page a:hover { color: #101C58 !important; }
    .tabs .current, .tabs .current:hover, .tabs li.current a { border-top: 2px solid #101C58 !important; }
    .read-more a { color: #101C58 !important; }
    ul#recentcomments li.recentcomments a { color: #101C58 !important; }
    .tagcloud a:hover, #footer .tagcloud a:hover { background-color: #101C58 !important; color: #fff;}
    div.service-box2:hover h2 a { color: #101C58 !important; }
    div.service-box1:hover { background-color: #101C58 !important; }
    .service-box3:hover { border-color: #101C58 !important; }
    #services-rounded .service-box4:hover h2 { color: #101C58 !important; }
    .heading1 h2, .user-invitation h2 { color: #101C58 !important; }
    #column-shortcode-section p { background: #101C58 !important; }
    .team-member:hover h3 a { color: #101C58 !important; }
    .pricing-table .pricing-plan h4 { color: #101C58 !important; }
    .pricing-table .plan-details li.free-plan-desc span { color: #101C58 !important; }
    #home2-heading .heading2 h2 { background: #101C58 !important; background: rgba(220, 70, 55, 0.7); }
    .image-info, .team-member .team-member-hover { background: #101C58 !important; background: rgba(192, 68, 47, 0.8); }
    span.action-link a:hover { color: #101C58 !important; }
    a.more-link:hover { color: #101C58 !important; }
    .service-box4 [class^="icon-"] { color: #101C58 !important; }
    
    #footer a:hover, #footer-bottom a:hover { color: #101C58 !important; }
    .about-us-text a, #footer .contact-info a, #footer a.rsswidget { color: #101C58 !important; }
    .sidebar a.rsswidget { color: #101C58 !important; }
    
    #flickr-widget .flickr_badge_image img:hover { border-color: #101C58 !important; }
    #footer .widget_text a.small, #footer .widget_text a.small:visited { color: #101C58 !important; }
    a.comment-reply-link, a.comment-reply-link:visited, a.comment-edit-link, a.comment-edit-link:visited {
        background-color: #c1442f;
     }
    .tp_recent_tweets li a { color: #101C58 !important; }
    #footer .tp_recent_tweets li a { color: #101C58 !important; }
    #footer .button.trans:hover { border-color: #c1432f !important; }
    .heading2 .title {
        color: #101C58;
    }
    
    #20755
    Veena
    Moderator

    For client section –
    You need to change the image background –

    .fancy-heading span {
        background: url(images/fancy-label.png) no-repeat left top transparent;
    
    #20777
    glascala
    Member

    Thanks for doing this ๐Ÿ™‚ I got it working now for the most part.
    The only thing that I seem to cant find now is why on the Contact Us Page the Submit button is still orange when you hover over it?

    I tried creating the custom CSS on a seperate line for

    .contact-form.button:hover {color: #888 !important }
    Did I do it wrong?

    #20809
    Veena
    Moderator

    You can use the below custom CSS –

    input[type="submit"]:hover {
        background: #888;
        border-color: #F5DBD7;
    }
    
    #20881
    glascala
    Member

    Thanks for this I got it working ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Help with changing colors’ is closed to new replies.