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.
Related
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
Recently I decided to switch to SVG icons from font icons. I used Illustrator to draw my SVGs and I exported the artboards (containing an individual icon) with the following settings:
Styling: Inline Style
Font: SVG
Images: Embed
Object IDs: Layer Names
Decimal: 2
I used the Icomoon app to generate the SVG icons. The problem though is, all the SVGs have a fill, stroke or style property inline everywhere. I can’t update the icon color with CSS while those styles are there in the SVG.
Am I missing something? Is there an option in Illustrator to save the SVG’s without the fill / stroke / styles properties? Or do I have to use something like Remove SVG Properties to remove the properties?
If Remove SVG Properties is the way to go, can someone tell me how to use it in my Angular CLI project? I’m very new to this.
Yes, you can.
Just select the svg in CSS then apply:
selector {
fill: red;
stroke: blue;
/* etc */
}
It seems to work fine for me.
Optionally, add !important if needed.
Another thing you can do to update inline CSS is by jQuery, using .css() method.
One way to use free icons from that place is (link):
.lnr-home {
color: red;
font-size: 40px;
/* To get crisp results, use sizes that are
a multiple of 20; because Linearicons was
designed on a 20 by 20 grid. */
}
body {
font-size: 40px;
font-family: sans-serif;
color: #red;
}
<!-- Add the following <link> to the <head> of your HTML. -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!-- To insert the icon: -->
<span class="lnr lnr-home"></span> lnr-home
<!--
Cheat Sheet:
https://linearicons.com/free#cheatsheet
-->
You can use online tool
this is automatically convert inline style.
use this android developer
http://inloop.github.io/svg2android/
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.
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.
In IOS it looks like this:
In Android it looks like this:
It should look like it does in IOS for all devices.
In the Css file, I have this entry for Button:
Button {
cn1-derive: Button;
background-color: #005EA8;
color: white;
}
Button.unselected {
cn1-derive: Button.unselected;
background-color: #005EA8;
color: white;
}
Button.pressed {
cn1-derive: Button.pressed;
background-color: white;
color: #005EA8;
}
Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.
In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.
What am I missing here?
This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.
Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:
Background color
Background (image)
Border (9-piece borders effectively set the entire background).
If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.
So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.
There are a couple of solutions to your problem:
Solution 1: Override the other "background" properties
Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:
Button {
background-color: #005EA8;
color: white;
border: none;
cn1-background-type: none;
}
NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.
Solution 2: Create your Own Button classes from the ground up
If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.
e.g.
MyButton {
...
}
And in your Java code:
btn.setUIID("MyButton");