Link color

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.

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/

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.

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.

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.

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: http://purothemes.com/support/topic/full-width-pages/

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

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);
  	}
}

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);
}
}

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.

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

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

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;
}

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

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

Awesome, glad that helped. A common challenge with updates can be browser or WordPress caching. If you’re running a caching plugin you’ll need to keep that in mind when making changes. A quick test is to open your browser in private browsing mode, that way you’ll be seeing an un-cached version of the site.

Chat soon. Cheers.