Changing Colors
-
Some of the colors don’t match my color scheme. I am trying to find out how/where to change the color information for the boxes and the mouse hovers. I know you can change the text color information within the customizer, I am refering to icon colors and box colors.
Any help is appreciated.
-
If none of the color options within the customizer are effecting the elements you describe, then please provide a link to your site so I can provide you with some custom CSS code you can use that will change the colors to suit your needs.
Please be specific about which elements you want me to inspect.
ThemeSumo, You can’t miss the bright colored boxes all over the page. All the boxes have colors and each time you hover over an item it becomes colorized as well. The worse part is that they seem to randomize colors on the sliders.
Thanks for the help! Much appreciated, seriously. There hasn’t been a response in the themes support page for some months.
Okay each of those elements has 1 color class assigned to it
red, orange, light_red, blue, green, purple, pink, and lightgreen (no underscore)
.You can then use this CSS code to adjust the color of both the meta and overlay elements:
.entry-overlay.entry-block.red .entry-overlay-meta, .entry-overlay.entry-block.red:hover .entry-overlay-meta, .entry-block.entry.red .entry-media figure > a::after, .entry-block.entry.red .entry-media .item > a::after, .entry-block.entry.red .entry-media.embed-responsive::after { background: #00f; }
Just adjust the reference to the
red
class according to which color it’s using and implement your own custom color.The above sample code uses a solid blue color
#00f
, if you check the themes’ style.css file, from line #3061 you will notice the gradients that theme is using, it is these styles you are replacing, so if you want gradients you will have to create gradients that are compatible across browsers etc..You can simply copy/paste their gradient code but with your own custom colors in RGB format.
A quick example for you, converting the above solid Blue color into a RGB gradient, you would use this instead.
.entry-block.entry.red .entry-media figure > a::after, .entry-block.entry.red .entry-media .item > a::after, .entry-block.entry.red .entry-media.embed-responsive::after { background: rgba(0,0,255, 0.35); } .entry-overlay.entry-block.red .entry-overlay-meta, .entry-overlay.entry-block.red:hover .entry-overlay-meta { background: -moz-linear-gradient(top, rgba(0,0,255,0) 0%, rgba(0,0,255,0.65) 46%, rgba(0,0,255,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,255,0)), color-stop(46%,rgba(0,0,255,0.65)), color-stop(100%,rgba(0,0,255,0.65))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,255,0) 0%,rgba(0,0,255,0.65) 46%,rgba(0,0,255,0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,255,0) 0%,rgba(0,0,255,0.65) 46%,rgba(0,0,255,0.65) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,255,0) 0%,rgba(0,0,255,0.65) 46%,rgba(0,0,255,0.65) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,255,0) 0%,rgba(0,0,255,0.65) 46%,rgba(0,0,255,0.65) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000ff', endColorstr='#000000ff',GradientType=0 ); /* IE6-9 */ }
If you want all boxes to display the same colors at all times, you can duplicate the red classes and add the other colors to it, like so:
.entry-overlay.entry-block.red .entry-overlay-meta, .entry-overlay.entry-block.red:hover .entry-overlay-meta, .entry-overlay.entry-block.blue .entry-overlay-meta, .entry-overlay.entry-block.blue:hover .entry-overlay-meta etc..
Hope this helps.
Hi
I have the same issue. I am developing a Dutch news site and have these nasty colors, yellow, green etc on my news items which I want to change.I am not good at css is there another way? Where is this css in the ftp?
Thanks in advance for any help.
Here is the site: https://ijsselinfo.nl/
Rob
You can add any custom CSS code via your theme Customizer, visit the Appearance > Customize > Additional CSS menu, or by adding it to a Child Theme style.css file.
Your custom code will be preserved should you update your active theme too.
@robnieuwveld If that doesn’t solve it then per the forum welcome please post your own topic.
Thank you @themesumo I am checking these options out today.
Thanks Jan @jdembowski I will do that if the first option does not work.
Rob
ThemeSumo,
Very helpful, however I am having trouble. I am trying to remove the hover colors all together. I don’t want to have a hover color and I want all the other box colors to be a custom color, say, light grey or something of that nature, or maybe a very light green. Haven’t decided.I don’t know how to manipulate the code to remove the hover colors for the boxes.
I am using a plugin for this so that I don’t lose the changes should the theme be upgraded. The plugin I am using is “Custom CSS”.ThemeSumo,
Just a side note, I am using this theme because it came pre-setup. I like some of the MH Themes better, however they didn’t have a way to import the widget locations, etc for the setup and seemed like a lot of premium plugins were required for the themes. Is this accurate? Please let me know before I get too involved with this particular theme as I really do like the MH products, but can’t afford to pay for the plugins in addition to a paid theme at the moment.@outwardjourney: Thanks, we’re very happy that you like our WordPress themes and you don’t need plugins to create websites as shown in the theme demos.
However, this is a dedicated forum for the islemag theme and it would be a bit inappropriate to discuss other WordPress themes here. If you have any questions about WordPress themes from MH Themes, you could open a thread in the dedicated support forum of that particular WordPress theme and we’ll be more than happy to help you out there.
Each theme is different so you’re not going to be able to simply export/import your widgets and everything will drop into place for you. And no, you don’t require any premium plugins for those themes.
Hope this helps.
- The topic ‘Changing Colors’ is closed to new replies.