I want to change the color of the social icons (on the left side of the screenshot). Since I have no clue how to change it in WordPress, I tried it with CSS. But now I noticed that I have to change the element. style and I don't know how... I tried just changing the color in the element. style and copying into the additional CSS in WordPress, but it doesn't work. On the screenshot, you can see what I mean. Is there a solution to this problem?
This is what I tried:
element.style {
--wpz-social-icons-block-item-color: #FF0000;
--wpz-social-icons-block-item-color-hover: #FF0000;
}
Please try with this following code in wordpress customizer > Additional CSS
.social-icon-link{
--wpz-social-icons-block-item-color: black !important;
--wpz-social-icons-block-item-color-hover:
red !important;
}
I think that what makes color is the element inside a <span class="social-icon socicon socicon-icon-instagram">
But anyway you are trying to change something via style, and if you want to do like this you´ll hace to use something like
style="background-color:#000"
or wathever, color, font-size etc
But in this case I will use a new style, like
.socicon-icon-instagram {color:#000;}
And maybe depends of the template you´ll need to add !important to CSS class to get the color...like this
.socicon-icon-instagram {color:#000!important;}
It is not a good practice but sometimes is necesary
Related
I am using a plugin on a wordpress site which operates in light/dark mode where I can set the colours manually. However the headers are automatically inheriting the theme colours.
I have tried inspecting the code on the grid to try and isolate the class and create a custom CSS code to remove the inherit property.
The code that the issue exists in is
.tg-barking-mouse a:not([class*="tg-element-"]),
.tg-barking-mouse a:not([class*="tg-element-"]):active,
.tg-barking-mouse a:not([class*="tg-element-"]):focus,
.tg-barking-mouse [class*="tg-element-"] *:not(del) {}
Within this bracket, the margin, padding, color etc exist. When I remove color it does exactly what I would like it to.
However when I paste the same code listed above in CSS and write color:none within the bracket, it doesn't seem to add to the element and overwrite the current color settings.
I believe there is a simple solution which will allow me to isolate the correct element but I'm not too sure what I'm missing.
Is it only the header that has the issue?If it is then you can use css to set your preferable color choice. try include important property like color: #000 !important; or any color of your choice to see if it can do the trick.
Thanks everyone for your help, I was able to work it out by targetting h2 within the class and resolved the issue with the inherit property:
h2.tg-item-title {
color: inherit !important;
}
And it has inherited the plugin's text style rather than the Wordpress theme.
I'm learning External CSS.
I have a CSS file that is working. The pages use a background image and a content color.
I want to use a different content color as the background for photos--- about 1/2 of the pages in the site. I want it to be in Ext CSS (not a page style), in case I want to change the color in the future.
What is the best practice when everything else in the CSS will be the same for all pages, except for the content color?
Please give a 'grade school' answer telling me exactly what I'll need to do. I'm still learning terminology, so your clarity will really help me.
Thank you.
The best way is use SASS and variables.
Another solution (pure css) is to create a body class to determine your theme.
Example:
<body class="theme1"> or <body class="theme2">
And set your css:
.theme1 .my-div
.theme2 .my-div
With your theme colors
Keep it in this way:
.color1{
color: #000000;}
.color2{
color: #ffffff;}
You can name color1 and color2 as anything you want and save these styles in your css file. Use these classes where you want like:
<button class="color1">Good Button</button>
You can change color values and will reflect everywhere.
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
I am using Wordpress template Simple market and the default text colour is green but I want to change it to black. Even the widgets I install go green. Is there a way to change the whole color rather than changing it in css one by one?
You can put some CSS in your theme's style.css file to override its green text-color with black text-color, for example:
body {
color: black;
}
if the above not work, try something like:
body {
color: black !important;
}
This is just a quick patch but not a final solution. When your have better understanding in the theme you mentioned, you can use some tools like Firebug to locate the actual CSS codes and to search and replace them in style.css file which they belong to. That will be better.
Go to Style.css
replace green color(you will find it using colorpix) to black(i.e #000000) using find and replace feature in any stylesheet editor.
Simple enough and no other way.
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.