Hello,
Recently all the links on our site turned to white instead of the blue colour they were intended to be. I decided to deactivate each of our plugins and it turns out after Page builder was removed, the link’s colour returned to normal, but the layout of the pages were obviously messed up as the page builder plugin was deactivated.
Please can you help me resolve this issue!
http://fundamentallychildrenhq.co.uk/app-development-support-mcdonalds-happy-studio/
Hi Oomar Mauthoor
Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread. If this is still an issue can you please post a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
This is a private message.
Hi Oomar Mauthoor,
So just to confirm; the links are the buttons (design wise – this as an example)? If so, it’s actually quite easy to set the link color to whatever hex you desire. Open up the button widget and click design and layout and then scroll down to Text Color. Then select your color, or input a hex. It defaults to white due to the default button colour.
Please note you’ll have to remove the css provided to you by your themes developers as that overrides any design changes made to the buttons text colour.
Hey Alex,
The issue is that prior to the theme dev overriding the css, none of the linked text displayed in the colour we wanted it to, it only appeared in white, so passages of text looked blank because of this.
The hex is currently set to white, but the issue remains that even if the Theme dev were to revert to the original css, the pagebuilder plugin would also revert the links back to white even if tried to use the widget/ or style css to change it to my desired colour.
I am currently awaiting the theme dev response to changing the homepage text from blue to white so it is visible
Hi Oomar Mauthoor,
So just to confirm. This is a theme issue? I guess I’m not really getting what the issue is due to my delayed initial response (sorry about that!) and it looking fine.
Hey Alex,
Originally, the links were displaying white instead of blue, so one by one I removed the plugins to see what caused this and after removing the site builder plugin – the links turned back blue. On re-activating the plugin, the went back to white. We did not have this problem until last week with the latest update for pagebuilder.
I sent a message last week, which you acknowdledged earlier and apologised for responding late. That’s cool. But in the mean time between last week and today we’ve had to look at alternative options in resolving this issue.
The theme dev has managed to override the CSS to display the links appropriately, which is why pages like this: http://fundamentallychildrenhq.co.uk/app-development-support-mcdonalds-happy-studio/ look absolutely fine now. Prior to this, the links all displayed white, including the section which says by & posted on.
But the issue which now remains is that as a result of theme dev overriding the css to display the links in blue, this has taken effect universally so that the homepage css is now overriden and the white links and social buttons we have purposely set to white have now gone to blue – This is now an issue which only theme dev must resolve.
At this point, I don’t think there’s anything else SiteOrigin can do, but provide us with some insight as to why the links were not displaying accordingly prior to the CSS being overridden.
Thanks,
Oomar
Hi Oomar,
I feel my previous answer in regards to the colors applies to the above mentioned issue (although with slight grouping changes as it would be under a different group of settings). If you don’t set a default colour for things buttons where it requires a background – SiteOrigin Page Editor makes a call and goes with what it knows will work with the button – it’s default.
If the theme developers are unable to fix the issue going forward please write back and I will go out of my way to ensure this issue is resolved as quickly as possible.
This is a private message.
Hi Oomar,
I’ve spotted the reason why this is. There seems to be CSS being applied to a number of issues with an !important (which I can’t override). Do to how the text is disabled I suspect this CSS is from a theme setting. Could you take a look at your design settings as it’s quite likely there?
Hey Alex,
Thanks for spotting this! I cannot understand why that piece is code is included!? I have only ever changed the CSS through the Simple CSS Editor in WordPress, or the CSS widget within Page Builder.
For instance, the I have purposely set the link and text colour to #05b1cc in the widget, but as you said the white is overriding any chances.
You mentioned checking the theme settings, could you explain how I could find this?
Thanks,
Oomar
Hi Oomar,
Typically a theme will have options in the customizer that will allow you to specify colours on the website. Now, not trying to put down other people but sometimes they will !important any selections made there to ensure that the styles are applied. Based on the full style block it looks to include nothing but colour values.
You…Are…A…Star!
Thank you so much! For now, this seems like what we needed!
It’s so frustrating that this was under my nose the whole time within the customiser!
I have changed it from white to #05b1cc
and it has worked: http://fundamentallychildrenhq.co.uk/2016-features-new-edit/
Huge Thanks again Alex!
Hi Oomar,
Great to hear! Is there anything else I can help you with today?
This may be a theme support question, but now that I’ve change the theme’s link colours to our brand’s colour, i’ve had to quickly change it to black (temporarily) as the navbar link colours now turn to the brand’s colour but I want it to be white.
I tried to add:
nav-bar li {
color: #FFF}
}
But this doesn’t seem to work, and it may be because the theme colour links is overriding it.
Any thoughts?
If not, that’s cool, I’ll check it with Theme support.
Thanks for you help!
Oomar
Hi Oomar,
No problem. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.navbar-nav a { color: #fff !important; }I would also suggest adding the following CSS to improve UX however that’s up to you.
.navbar-nav a:hover { text-decoration: underline !important; }You might also need to install the SiteOrigin CSS Editor.
Hey Alex,
Thanks for sending this over, I have installed SO’s CSS Editor and added the above code, but unfortunately this hasn’t changed the navbar as intended.
Any Thoughts?
Thanks,
Oomar
Hi Oomar,
Just had a look and it looks like your theme is outputting code that is set as important before we get a chance to output anything. What I suggest is checking over your theme settings to see if you’ve set any of them for your nav bar. If you have, blank them if possible. That should fix the issue and if doesn’t, you’re going to have to contact your theme developer about that also. :(
Hey Alex,
Really appreciating your support!
Here’s how all the CSS code we’ve used to amend the NavBar currently looks:
.navbar {
background: #05b1cc;
border: 0;
border-radius: 0 !important;
text-align: left;
-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
.navbar-inverse .navbar-nav {
color: #05b1cc;
}
.navbar-brand {
height: 100px;
line-height: 45px;
position: relative;
}
.navbar-nav a {
color: #FFF!important;
}
.navbar-nav a:hover {
color: #FFF!important;
text-decoration: underline !important;
}
Although since, I have dropped the !important for border-radius to see what impact it has made, where this is the only piece of code where ‘!important’ has been used in the NavBar and this does not seem to have impacted the navbar in aby way
Also, The css code changes have been made using both the SiteOrigin CSS plugin and the WordPress editor, but the code used is exactly the same, so neither are affecting the link colours.
Thanks,
Oomar
Hi Oomar,
Typically you only really need to add an !important if the styling already has styling applied to it that would override what you said. I would recommend giving the following article a read, Specifics on CSS Specificity.