I am using the new Gui Builder and would like to change the color and size of the Material icons in a button.
Is there a way to do this? I couldn't find anything related on the net and changing the button's font color does not seem to affect the color of the icon ...
Thanks in advance.
What I have so far is the css style :
mybutton {
background-color: lightgray;
border-radius: 4pt;
border: none;
box-shadow: 2pt 2pt 2pt 0px gray;
color: #ff0000;
font-family: "native:MainRegular";
font-size: 7pt;
margin-top: 5pt;
margin-bottom: 12pt;
padding-bottom: 2mm;
padding-top: 2mm;
text-align: center;
}
The material icons get the color and styling of the component they apply to including changing their color on press/disable. To change their color just customize the UIID of the component e.g. if the component UIID is MyButton just style the MyButton UIID in the designer to match the color you want for the icon.
Another way to change the color of the material icons is by adjusting the foreground color of Default Style, in the theme editor. But this only works when you don't activate the CN1 internal ccs support.
Related
Short version: What CSS selector can be used to style the background of a GTK TreeView header?
Long version: I've tried treeview header, treeview header .button, .button, button, label, GtkTreeView header, header and * as selectors for the header of a Gtk.TreeView. Of these, button works to change the colour of the text in the header (the color attribute) but not the background (background-color). label changes the colour of the background behind the header text, but leaves a big area around the text at the default. * works, but of course changes everything else, too.
I've tried to use Gtk Inspector on a simple python example and it reported the treeview class as .view and the button on the header as .button. Setting a custom css provider to the application with:
cssProvider = Gtk.CssProvider()
cssProvider.load_from_path("custom.css")
Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(), cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_USER)
and the custom.css file with the following content:
.view .button { color: Red; background: Cyan; font-weight: bold; text-shadow: none; box-shadow: none; }
The result was:
Here you can see the treeview header with font color as Red and backgroung as Cyan.
Tested on Fedora 23.
EDIT
On Fedora 26, it's as documented. you should use:
treeview.view header button { color: Red; background: Cyan; font-weight: bold; text-shadow: none; box-shadow: none; }
and the result is similar.
I am using the CSS Plugin for codename one and I am trying to customize the look of Tabs.
Here is my entry for the Tab:
Tab {
background: none;
cn1-background-type: none;
color: white;
background-color: #005EA8;
font-weight: bold;
font-size: x-large;
}
Tab.selected {
background: none;
cn1-background-type: none;
color: white;
background-color: #005EA8;
text-decoration: underline;
font-weight: bold;
font-size: x-large;
}
This works perfectly for IOS, see here:
But not at all for android:
I have already tried by overriding all the styles, unselected, selected, disabled and pressed
.
I also tried by customizing TabbedPane and Tabs, but that did not work as expected either.
What am I missing here? Additionally, the size (height) should be the same on both devices, which is not the case for now. Another point I could not figure out is, how to stretch the tabs onto screen size?
The Android native theme defines a default background color of #f0f0f0 on ALL styles. This is an annoyance when you are trying to create themes that look the same across all platforms. Luckily, I think this is the only style that it defines in default so you can easily combat it by explicitly setting your own default background color for your theme.
In CSS, you can define a default background with
* {
background-color: transparent;
}
Alternatively, just keep this default in mind, and explicitly set the background color for any style you are defining.
You need to override the border and declare it to be "empty". I'm not sure how something like that is done in the CSS syntax as I don't use that myself.
I've created (copied and edited from online tool) a little box with a text here on the botton right corner
I would like to change also the color of the text in the box. But there's the command a:link, a:visited.
How could I bypass these commands and giving the color I would like to to the text, maintaining the link?
Thanks
Pseudo-selectors as a:link and a:hover (and many more) change the default behavior of the browser. You may omit them, but I'm pretty sure you don't want to.
a:link sets style of the anchor so it is not the default blue underlined.
a:hover sets style of the anchor when you move your mouse over the link.
Use search engine of your choice to learn more, try 'css pseudo selector'
Read the code, the color settings are all there:
.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #28A26B;
border-radius: 8px;
background: transparent
linear-gradient(to bottom, #FFF, #FFF)
repeat scroll 0% 0%;
// this is what you're probably
// looking for - the color of the button body.
// It's set to transparent.
font: bold 20px arial;
color: #28A26B; // Color of the content
text-decoration: none;
}
.button:hover, .button:focus {
// these pseudo classes just make the js events onmouseover
// and onclick obsolete...
color: #28A26B;
text-decoration: none;
}
Set background to the color of your choice, remove the gradient part and you're done. Do NOT copy blindly.
After rule on line 77 of styles.css file put this one:
#call-to-action a:link, #call-to-action a:visited {
color:yellow ;
}
I have seen a few blogs where the blogger would add an outline and a grey background around small one-liners commands or key presses.
For example for ALT + F2, 'ALT' and 'F2' would be displayed with an outline, a different font and a grey background to emphasize that they are keys.
How do I do this in Wordpress ?
This will be down to a style set in their CSS, StackOverflow uses:
<kbd>Control</kbd>
To generate: Control as an example.
In Wordpress you can edit the stylesheet(s) using the appearance editor and add something along the lines of:
kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial,Helvetica,sans-serif;
background-color: #f7f7f7;
color: #333;
}
To style the <kbd> elements.
I'm trying to overide the default appearance of cflayout tabs.
By putting an edited background sprite into the website images folder I can alter the hover appearance, but I cannot seem to get the text to turn white on hover by referencing the built in .x-tab-strip-over class.
In action here
<style type="text/css">
div.x-tab-panel-header, ul.x-tab-strip-top {
background-image: none;
background-color: transparent;
padding-bottom: 0px;
}
div.x-tab-panel-header {
border: 0px;
}
.x-tab-strip-active, .x-tab-strip-text {
font-weight: normal !important;
font-size: 14px !important;
font-family: arial !important;
}
.x-tab-strip-over {
color: white !important;
}
.x-tab-right, .x-tab-left, .x-tab-strip-inner {
background-image: url(images/xd-tabs-sprite.gif) !important;
}
</style>
<cflayout type="tab">
<cflayoutarea title="Mouse">
Mickey Mouse
</cflayoutarea>
<cflayoutarea title="Duck">
Donald Duck
</cflayoutarea>
</cflayout>
Any clues appreciated
CF9 uses ExtJS 3.x while Cf8 uses ExtJS 2.x
How to use:
Click Ext Theme Builder.
Select Template (blue or gray) in the top toolbar (i recommend - gray)
Select Base Color, Header Color, Background color, Border color, Header
Font, Font, Window transparency,
Toolset (Default, Vista,
TargetProcess, Graphite) and ExtJS
version. Unselected Border color will
be assigned automatically according to
base color
Click Apply
Enter Theme name
Click Download Theme. It will be xtheme-Theme name.zip file
http://extbuilder.dynalias.com/springapp/mainpage.htm
Use:
.x-tab-panel-header .x-tab-strip-over span {
color: white;
}
.x-tab-panel-header .x-tab-strip-over.x-tab-strip-active span {
color: red;
}
There's a lot going on in there, so I just tested until I found something that worked.