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.
Related
Rails 5.2
Bootstrap
I have the folliwing style:
.app-card-header {
.card-header:first-child {
background-color: white;
text-align: right;
font-size: 16px;
font-color: green;
}
}
That I am trying to apply to this view:
.app-card-header
.card
.card-header
= 'This is a test header'
.card-text
= 'This is test text'
However, I am not getting the results I'm expecting.
The header background color is white, and the header text alignment is right, but the font color is black and the size looks about 12.
I tried different font sizes and colors to no avail, but it's not changing. Why would parts of the styling work, and other parts not? Any ideas?
You should just use color but not font-color:
color: green;
And if this still doesn't work for you, then your element could be overridden from other rules. You may simply try adding important rule:
font-size: 16px !important;
color: green;
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 ;
}
This is specifically with the selectBoxIt jQuery plug-in, using the jQueryUI theme.
I have this set up for the hover action:
/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
That works fine. When I hover my mouse over the options, I get a red background with white text.
However, when I do this...
.selectboxit-option:focus .selectboxit-option-anchor:focus {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
...nothing changes.
I see that all the demos on selectBoxIt's main web page DO have changing background colors with keyboard focus...so what am I missing?
Technically, each option doesn't use the focus event, which is why the focus pseudo selector is not working for you. For the jQueryUI theme, the "active" option adds the ui-state-focus class, so to change the "focus" CSS style, you could have a rule like this:
.selectboxit-option.ui-state-focus {
background: #CCC;
}
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.