• Resolved Pezomi

    (@pezomi)


    Hello, I am looking for some help in where I can change the colors of text and search button for this theme, along with the headers in another page/post.

    For example, on this page I’d like to be able to change the color of the header, the hyperlinks, and the buttons. I can’t seem to find where to change the colors in the editor.

    Also, when you originally load the main page, sometimes there is a big flash of the green color that is throughout this theme, if you don’t see it initially try refreshing the pages a couple times and you’ll see it. How would I go about changing that?

    Any help would be greatly appreciated, I’ve been looking around for probably an hour now and I feel pretty stupid.

Viewing 6 replies - 1 through 6 (of 6 total)
  • .

    (@techievous)

    You can use custom CSS for those.

    For your header:

    .content-header {
    background-color: #596D85; /* background color of header */
    color: #fff; /* text color of header */
    }

    For your submit button:

    input[type="submit"] {
    background-color: #596D85; /* submit button background color */
    color: #fff; /* submit button text color */
    }
    input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
    background-color: #B2C2D4; /* submit button background color when hover, active, or focus */
    color: #222; /* submit button text color when hover, active, or focus */
    }

    .

    As for your links, do you want to change the color globally or just on a particular type of link?

    .

    Also, when you originally load the main page, sometimes there is a big flash of the green color that is throughout this theme, if you don’t see it initially try refreshing the pages a couple times and you’ll see it. How would I go about changing that?

    I refreshed your home page on both Firefox and Chrome over 10 times each but don’t see any “flash of green color” that you spoke of. Could you please tell me on which browser this occur?

    Theme Author Tim Nicholson

    (@timnicholson)

    To remove the “flicker” of green on the home page, change the background color here in style.css to whatever color you want. For example, looking at your site you probably want to set it to blue.

    /* Style cover, section, and content-header images and backgrounds */
    .cover-image,
    .section-image {
    	background-position: center center;
    	background-color: #1abc9c;
    }

    Hi all,

    I am really loving the Link theme, it’s wonderful. However, the answer I’m searching for is still lost.

    As for your links, do you want to change the color globally or just on a particular type of link?

    I really want to change the hyperlink colour for the ‘© 2014 ‘Website’. Theme by XtremelySocial and Blacktie’ section, the header of the floating menu and the mailto: hyperlink on the contact text widget section that I’ve customised in ‘Page Bottom’.

    Any tips on what style.css to use/edit would be most helpful.

    My site url for more info: http://visitsarajevo.info

    Thanks in advance…

    Theme Author Tim Nicholson

    (@timnicholson)

    It looks like you may have figured out some of this already, but here is some guidance. For the copyright section, that css class is called “site-credits”. If you want to change the colors of the footer nav menu to left of that as well, you can target the whole css class of “after-footer”.

    So to change the link color, you can do something like:

    .site-credits a,
    .site-credits a:active {
    color: whatever;
    }
    .site-credits a:hover {
    color: whatever;
    }

    For the email link color, that is in a css class called “contact-footer” and you’d change it the same way as above.

    That’s great, Tim, thanks for that. However, the ‘Top’ and ‘Home’ links at the bottom still turn green when hovering, and I’d like to adjust the hover colour of the floating side menu at the top right of the page.

    One further thing; I can;t figure out how to add a hyper link to the ‘Click to Subscribe’ button on the call to action widget.

    Thanks in advance,
    Hannah

    Theme Author Tim Nicholson

    (@timnicholson)

    I’m sorry I missed your reply here. With all the fancy categorizing of email that Gmail now does, this didn’t appear in my inbox. I see you’ve moved on to a different theme, but wanted to respond here to you and/or if others are following the thread.

    The best way to determine how to change link colors is to use “developer” mode in your browser. I use Safari, but IE and Chrome, etc. all have a mode like that. It likes you right click on any element on a web page and select “Inspect element”. It then shows you the HTML and CSS for that element and even lets you alter them dynamically in the browser. Once you work out what changes you want to make, you can put that edited CSS into the themes style.css or better yet use the Jetpack Custom CSS plugin to add it there and not worry about your changes getting lost when the theme gets updated.

    To change the hover color of the footer nav menu, you add CSS like this:

    .footer-nav-menu a:not(.btn) { color: #f2f2f2; }
    .footer-nav-menu a:hover:not(.btn), .footer-nav-menu a:focus:not(.btn) { color: #ffffff; }

    To change the hover color of the top navbar toggle, you add CSS like this:
    #menuToggle:hover { color: black; }

    The call to action widget is just a sample when you first install the theme. You could edit the sidebar-pagebottom.php file, but I wouldn’t do that. Once you add any widget to the Page Bottom widget area, the sample is no longer displayed. So you’d just add a text widget with the text and button code that you want.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing Colors’ is closed to new replies.