https://developers.google.com/fonts/docs/material_icons
I tried to change the color of google Icon, however, it shows just black.
I added below code in header.php
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
And I added the below css code in style.css
.material-icons.orange600 { color: #FB8C00; }
And I used the below code in the page where I wanted to show the icon
<span class="material-icons orange600">face</span>
However, it just shows a black colored icon.
It would be appreciated if you can help me.
By the way, I know that google now has introduced material symbol which I can customize a lot. However, on the description page, I can't find how can I change color.
Is there a way to change color?
https://fonts.google.com/icons?icon.style=Rounded
I faced a similar problem and use a weird way to solve it.
html code:
<span class="orange600"><span class="material-icons">push_pin</span><span>
css code:
.orange600 { color: #FB8C00; }
It seems that the color of an icon is the "color" property of its container.
Related
I embedded a form from Flodesk on to my site and would like to edit the focus outline border, which is currently blue, but can't find the correct css selector for it. The form editor did not have any 'custom css' input areas or customization of the focus outline. Is the best way to edit the outline by adding in some html syle css in the embedded html code?
For example :
<div id="fd-form-6362f1a99bbdd5d8546029aa" style="width:300px;padding:0px !important;margin-right:100px;"></div>
<script>
window.fd('form', {
formId: '6362f1a99bbdd5d8546029aa',
containerEl: '#fd-form-6362f1a99bbdd5d8546029aa'
});
</script>
This is my embedded code for the form. How would I add the css in here so that I can remove/edit the focus outline border?
So far, I've tried opening dev tools and copying the css selectors there and adding in
example_selector:focus{ outline: none !important; }
Hi I am new on here first of all nice to meet you all
I am facing a problem on wordpress
I am using "Quick Download Button" Plugin which the link is https://wordpress.org/plugins/quick-download-button/#description
after I have install it on my site I tried to change the button colour by css but I never ever success to change it. I have checked the button in inspect and I copied it but it didn't work.
what I tried was
.g-btn.f-l
{
color: #3c1c1c;
}
but it never worked.
please anyone help will be awsome thanks and sorry for my bad english
Like #jared said - it shouldn't be too hard to find the right selector and change the color within your browsers dev-tools. If you see the color change, bingo! Then if that doesn't work within your css file itself, you might have an ordering issue with your sites css files (i.e. your css is loading before the plugins). Quick way to test this is add the !important selector to that rule on your file - e.g:
color: #3c1c1c !important;
the css color-parameter is not defining the color of the button, but from the text of the button. if you want to change the color of the button, you need to look after "background" or "background-color".
example:
.g-btn.f-l{
color: #FFFFFF;
Background-color: #3c1c1c;
}
Visible example:
Source of example: Kryptonews Lexikon
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
I am using a trix editor such as <%= f.trix_editor :body, class: 'trix-content form-control', rows: 15 %>
Currently the buttons are black and obviously translated english (as well as the alt texts).
How am I supposed to change the colors of the buttons? Everything Ive tried didn't seem to work.
Is there any way to provide german translations? I need my full application to be completely german.
Best regards
You can change the background color of the buttons with css.
trix-toolbar .trix-button-group button {
background-color: green;
}
The button icons are images, so you would have to replace them in order to customize icon color, etc. For example, to remove the bold button icon with css:
trix-toolbar .trix-button-group button.trix-button--icon-bold::before {
background-image: none;
}
You can change the button tooltips (for translation or otherwise) with javascript by referring to the data-trix-attribute for the button you would like to change. For example, to change the bold button where the data-trix-attribute is set to "bold" (due to browser inconsistencies, it is best to set both the Trix.config.lang and the element title attribute):
Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');
Following snippet illustrates the various changes above.
// hover over the now blank bold button in the toolbar to see the tooltip
Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');
trix-toolbar .trix-button-group button {
background-color: green;
}
trix-toolbar .trix-button-group button.trix-button--icon-bold::before {
background-image: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
<trix-editor></trix-editor>
I know that I'm really late to the conversation but I was looking at doing this very issue this morning. There are solutions about replacing the icons that Trix utilizes (Material Design Icons by Google). Someone has a really neat idea replacing them with FontAwesome icons.
These are SVG images so color cannot be changed. For my particular situation I used a webkit filter to change the color from black to gray:
trix-toolbar .trix-button--icon {
-webkit-filter: invert(50%);
}
This should go in the application.scss. For a reason I have not tracked down yet, putting this in the actiontext.scss file is not working, even though it's being imported into the application.scss.
I'm trying to customize my disqus link colors which as you may know, inherit the link color from the wordpress theme. The problem is my current theme I think hasnt specified any main color so disqus inherit the default blue link color for all the links. This is my stylesheet: http://goo.gl/p8cA9
Could anyone tell me how I could specify a link color in the style sheet? I'm just beginning to learn css and when I add the a {color:purple;text-decoration:none} class it deforms the rest of the sites style.
Thank you
You need to be specific, look in the source code of your WP webpage (if you use chrome press f12 and then go to the elements tab, press the magnifying glass and select the A tag you want to style on the webpage).
With:
a {
color:purple;
text-decoration: none;
}
You are saying that all the a tags should be this color. You need to look where the a is located.
Example:
<div class="content">
<p class="scribble">
Lorem ipsum google
</p>
</div>
In the example above the way I would style this a tag would be.
p.scribble a {
color:purple;
text-decoration: none;
}
The "."-in the CSS selector refers to a class. So I am saying I want a tag in the p with class "scribble". Good luck with your adventures.
PS. If you are using chrome and you selected your element successfully you can also see the CSS selector it is responding to now (right window).