So i have a page and want to change a hyperlink into a button using css.
I found out that by using:
a {background-color: green} this changes the background colour of all the hyperlinks on the page, and across the site, to green, which makes them all look like buttons. I just want to target one specific hyperlink and also want to change the text colour.
a {color: green;} does nothing to change the text color.
So, how do i target a specific hyperlink and change text colour and background colour to make it look like a button?
I found div above it and it was awpcp-subtitle. So i tried awpcp-subtitle a { background-color: green;} nothing happened.
There is one hyperlink with html source: "Old Goriot", link - http://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/10/old-goriot/london/uk/books/
link rel="amphtml" href="http://adsler.co.uk/wp-user-test-
dashboard-2/awpcp-show-ad/amp/" /><link rel='dns-
prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml"
title="Adsler » Feed"
href="http://adsler.co.uk/feed/" />
<link rel="alternate" type="application/rss+xml"
title="Adsler » Comments Feed"
href="http://adsler.co.uk/comments/feed
How do I change this colour and background colour?
In addition, i want to turn the telephone label and number into button which just says" sms".
Also on this page, i want the picture to expand fit in the box. At the moment it's totally skewed to the right in mobile view and off centre desktop.
Also want another box to surround phone , email etc.
The solutions below are very good, but was wondering if there is a site wide solution for all the hyperlinks in that class. As it is, I have to change each one individually and it doesn't modify my theme to create this as an inherent styling configuration.
Thanks.
You can use an attribute selector for that. Take a look at the following:
a[href="google.com"] {
background: red;
color: black;
}
a[href="youtube.com"] {
background: blue;
}
a {
color: white;
text-decoration: none;
padding: 5px;
}
Google
YouTube
Related
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.
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.
Example template:
https://eamon-demo.squarespace.com/#overview-eamon
Is there any possible way to change the background color of a single white section with text in the Ethan / Eamon theme? I've had no luck with
<style>
.body {
background-color: lightblue;
}
</style>
in the Advanced section of the page editor. I am looking to change only one of the section's background colors, I do not want to change them all. Thanks.
Solution!
I was able to make it work on a section called "titles" adding the following to the CSS Editor:
section#titles {
background-color: lightblue !important;
}
Yes, it is possible by targeting via the CSS attribute selector. For example:
[data-url-id='titles-eamon'] .content, [data-url-id='titles-eamon'] .content-inner {
background-color: lightblue !important;
}
The above code would be inserted via the CSS Editor. The data-url-id value corresponds the URL Slug of the index page section (see image).
You can inspect the code of the page user your browser's developer tools (often by hitting F12 or CTRL+SHIFT+I). That will help you explore the code of the page for this and other similar issues/customization.
I'm working on an Unbounce project and I can't get the stylesheets to work.
I wanted to change the font-size of the labels of an option on the form. I saw (using inspect element) that the following CSS created affects the size: #lp-pom-form-55 .lp-pom-form-field .option label
So I created a stylesheet in Unbounce like this:
<style>
#lp-pom-form-55 .lp-pom-form-field .option label {
font-size: 16px !important;
}
</style>
And it just doesn't work. I also tried it without the style tag like this:
#lp-pom-form-55 .lp-pom-form-field .option label {
font-size: 16px !important;
}
It still didn't work. I even tried basic things like setting the background color of normal text field id's to black !important with no solution.
What is the correct way to apply styles to Unbounce pages?
I've realized that the code within the <style> tags is the correct way to do it. The problem was that the custom CSS doesn't display in the designer view, it only shows on the live page.
I'm trying to get conditional CSS to work in Blogger / Blogspot - might be missing something obvious and fundamental to make it work but here we go.
A number of tutorials I've found have provided instructions but when i follow them they don't work (nb: they work perfectly when used in the template body to hide certain widgets on certain pages but i can't get them to work to style different elements differently on different pages).
So, as an example I want to have a different date background color depending on what page you're on here.
The date header styling is:
.date-header span {
background-color: #FF8BBF;
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
I want the background color of the date to be different on another page, so as per various tutorials I've added the following code just above the template closing head tag.
<b:if cond='data:blog.url == "http://mgmmediaadditionaldemoblog.blogspot.com.au/search/label/Test2"'>
<style>
.date-header span {
background-color: #FF937E;
}
</style>
</b:if>
But it's not changing the colour on the page specified. I've tried variations - putting the conditional code in the b:skin or b:template-skin sections of the head but i can't make it work - any help on this would be greatly appreciated!
try this code:
<b:if cond='data:blog.searchLabel == "Test2"'>
<style>
.date-header span {
background-color: #FF937E!important;
}
</style>
</b:if>
Test2 is the label, and add !important to your color code to make browser load background-color: #FF937E instead of background-color: #FF8BBF;.
I wait for your feedback :)