Link color

This topic contains 15 replies, has 2 voices, and was last updated by  Andrew Misplon 3 years, 4 months ago.

Tagged: 

  • Author
    Posts
  • #1341

    cloudontap
    Participant

    Hey Andrew,

    Another quick question — how can I make the link colors change for all pages? I’ve tried in the stylesheet and it doesn’t appear to be responding to any changes. I want to make the link colors #1cc0e6.

    Thanks!

    #1342

    Andrew Misplon
    Keymaster

    Hi 🙂 Great to hear from you again. I hope you have a premium version out soon. It would follow the same model as my first theme, pay what you want from $5 upwards. It’ll have a full Customizer section. For now I’ll help out with whatever Custom CSS you need.

    (My usual reminder on editing files directly via Appearance > Editor. When themes update they overwrite themselves, so changes there will be lost.)

    Please try changing the link color in your Custom CSS plugin as follows:

    /* Gobal Link Colors */
    
    a {
      color: #0896fe;
    }
    a:visited {
      color: #0896fe;
    }
    a:hover, a:focus, a:active {
      color: #0896fe;
    }
    
    /* Entry Content Specific Link Colors */
    
    .entry-content p a,
    .entry-content li a,
    .entry-content dl a,
    .entry-content pre a,
    .entry-content code a,
    .entry-content blockquote a {
      color: #0896fe;
      border-bottom: 1px dotted #0896fe;
    }
    .entry-content p a:hover,
    .entry-content li a:hover,
    .entry-content dl a:hover,
    .entry-content pre a:hover,
    .entry-content code a:hover,
    .entry-content blockquote a:hover {
      border-bottom: 1px solid #0896fe;
    }

    Let me know how it goes. Thanks.

    #1344

    cloudontap
    Participant

    Awesome! I’ll definitely keep an eye out for the premium version.

    I did your suggestion — it appears to have changed the link underline on, but not the actual link text color. It also made all of the links on the blog page the correct color — progress, haha!

    Just having issues with the links on the homepage and contact pages: http://ccd.336.myftpupload.com/ | http://ccd.336.myftpupload.com/contact/

    #1345

    cloudontap
    Participant

    Oh, and one more thing — is there any way we can change the hover color for the social media buttons, too? I know this is picky, so if it isn’t possible, no biggie, haha.

    #1350

    Andrew Misplon
    Keymaster

    By all means, send away with the little stuff and I’ll get back to as soon as possible.

    Social Icons Hover Color:

     /* Social Links Menu Hover */
    
     .social-links-menu ul li a:hover:before {
     	color: #0896fe; 
     }

    Home Page/Page Builder

    /* SiteOrigin Features Widget */
    
    .panel-grid-cell .sow-features-list .sow-features-feature p.sow-more-text a {
      border: none;
      font-weight: 700;
    }
    .panel-grid-cell .sow-features-list .sow-features-feature p.sow-more-text a:hover {
      border: none;
      color: #0896fe;
      text-decoration: none;
    }
    /* SiteOrigin Post Carousel Widget */
    
    .panel-grid-cell .sow-carousel-wrapper a,
    .panel-grid-cell .sow-carousel-wrapper a:hover {
      border: none;
    }
    .panel-grid-cell .sow-carousel-wrapper .sow-carousel-title .widget-title {
      font-size: 1.1429em;
      text-transform: uppercase;
    }
    .panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 {
      font-size: 1em;
      font-weight: 700;
    }
    .panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 a:hover {
      color: #0896fe;
    }
    .panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a span.overlay {
      background: #0896fe;
    }

    Contact/Home

    Please can you correct one value in your Custom CSS. Near the bottom there is a remaining #0896fe left.

    #1351

    Andrew Misplon
    Keymaster

    Thanks again for being an early adopter and for all the great feedback. The headings:

    /* SiteOrigin Features Widget */
    /* SiteOrigin Post Carousel Widget */

    The rules underneath those headings that don’t contain a color value can be deleted after the next update. 0.9.4. Not a big deal if you don’t though.

    Let me know how it goes.

    #1352

    cloudontap
    Participant

    Hey Andrew,

    So close! The only thing left to change is the white navigational bar (the one with the logo). Also, not sure if you saw this, but I posted another thread: https://purothemes.com/support/topic/full-width-pages/

    Sorry for having so many questions, haha. So appreciative of your help!

    #1353

    Andrew Misplon
    Keymaster

    Ahh sorry, I did see that post earlier, did the usual thing were you see it on your phone and forget to check when you get back to your computer! I’ll jump in there now.

    Here we go:

    /* Site Header */
    
    .site-header {
    	background: #fff;
    }
    
    @media (min-width: 1024px)
    	.home.header-overlap .site-header {
      		background: rgba(255, 255, 255, 0.9);
      	}
    }

    Both need to be set. 255, 255, 255 is RGB for white, 0.9 is opacity. Let me know if I can look up a color for you. I’m online for a while longer.

    If for example you wanted to try #1cc0e6. These rules would look as follows:

    /* Site Header */
    
    .site-header {
    	background: #1cc0e6;
    }
    
    @media (min-width: 1024px)
    	.home.header-overlap .site-header {
      		background: rgba(28, 192, 230, 0.9);
      	}
    }
    #1355

    cloudontap
    Participant

    Hey Andrew,

    I tried plugging in the coding, and it didn’t work. It is telling me that the error is with “min-width:” and “{”

    /* Site Header */

    .site-header {
    background: #1cc0e6;
    }

    @media (min-width: 1024px)
    .home.header-overlap .site-header {
    background: rgba(28, 192, 230, 0.9);
    }
    }

    • This reply was modified 3 years, 4 months ago by  cloudontap.
    #1357

    Andrew Misplon
    Keymaster

    Sorry about that. I’m missing an opening bracket. Let’s try:

    @media (min-width: 1024px) {
    .home.header-overlap .site-header {
    background: rgba(28, 192, 230, 0.9);
    }
    }

    I’ll be online a bit later or tomorrow to resolve if you don’t come right. I’m on my phone so hopefully that formats correctly.

    #1358

    cloudontap
    Participant

    No problem. Still didn’t work. :/ Same error. Feel free to get back whenever — as always, thanks.

    #1359

    cloudontap
    Participant

    Just noticed it did make a change — it made the background of the header turquoise, not the actual text/underlines.

    #1360

    Andrew Misplon
    Keymaster

    Ahh sorry, I see what you meant now. Please remove the Site Header section of Custom CSS and replace it as follows below.

    Let me know how it turns out.

    /* Top Bar Navigation */
    
    .top-bar-navigation ul ul {
    	border-top: 3px solid #0896fe;
    }
    
    .top-bar-navigation ul ul li:hover > a {
    	background: #0896fe;
    }
    
    .top-bar-navigation div > ul > li > a:hover {
      border-bottom: 3px solid #0896fe;
    }
    
    @media (max-width: 1224px) {
      .top-bar-navigation div > ul > li.menu-item-has-children > a:hover, .top-bar-navigation div > ul > li.page_item_has_children > a:hover {
        border-bottom: 3px solid #0896fe;
      }
    }
    
    /* Main Navigation */
    
    .main-navigation ul li:hover > a {
      color: #0896fe;
    }
    
    .main-navigation ul ul {
      border-top: 3px solid #0896fe;
    }
    
    .main-navigation ul ul li:hover > a {
      background: #0896fe;
    }
    
    .main-navigation ul ul .current_page_item > a,
    .main-navigation ul ul .current-menu-item > a,
    .main-navigation ul ul .current_page_ancestor > a {
      color: #0896fe;
    }
    
    .main-navigation .current_page_item > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_ancestor > a {
      color: #0896fe;
    }
    
    .main-navigation div > ul > li > a:hover {
      border-bottom: 3px solid #0896fe;
    }
    
    .main-navigation .menu-search .search-icon:hover:before {
      color: #0896fe;
    }
    
    .main-navigation .menu-search .searchform input[name=s] {
      border-top: 3px solid #0896fe;
    }
    #1361

    cloudontap
    Participant

    Tried it with no such luck :/ Same color as before.

    #1363

    cloudontap
    Participant

    Nevermind — it seems to have worked, now! Oh, the world of coding, haha. Thanks for all of your help!

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

Scroll to top