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.
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.
The TinyMCE 4 button for Remove Formatting is , which is certainly not intuitive to me. I'd like to make the button face something more obvious, like by, say assigning an image to it. But I'm not finding anywhere to change the button face. The markup assigned to the button is
.
I'm not sure how that gets that Tx symbol on the button, but there it is.
Thanks for any help.
In skin.min.css change
.mce-i-removeformat:before {
content: "\e01d";
}
to something like
.mce-i-removeformat:before {
background-image: url("http://i.stack.imgur.com/0rzf2.png");
background-size: 15px 15px;
background-repeat: no-repeat;
}
You can probably remove the background-size and background-repeat if you make your image the right size
If you don't want to edit the css directly, you could just make a new css file and load it after the default one to override the settings. If you did this, you would have to override the contents to remove the original icon
These icons come from the tinymce font. for me in the tinymce source i have the fonts at
tinymce/skins/lightgray/fonts/tinymce.woff|ttf|etc
If you added your own font file withyour own icon it should allow you to change the icon
If you inspect the css you'll notice there are two parts that control the icons being used
On the ::before inside the tag
.mce-i-italic:before {
content: "\e02b";
}
on the i tag itself
.mce-ico {
font-family: tinymce, Arial
}
both comefrom skin.min.css
What do you say that instead of new image you use :after pseudo element and remove :before one.
This is how it would look
https://jsfiddle.net/nj6yn4bq/4/
And the code
<button><i></i></button>
i:before { display: none; }
i:after {
content: 'FMT';
text-decoration: line-through;
font-style: initial;
font-size: 15px;
}
button {
background: linear-gradient(#FFF,#E0E0E0);
padding: 0.7em;
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
}
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 using Disqus external comment system with Wordpress (as a WP plugin) and I'm trying to customize it with my custom CSS.
Everything works great, but I have problems with replacing the default text color in the form textarea.
I tried it with:
#dsq-content .dsq-textarea .dsq-textarea-wrapper, #dsq-content .dsq-input-wrapper { color: red !important }
but I was not successful, even when I targetet just "textarea" it not worked.
It seems that javascript is playing together because there are 2 events: when the textarea is focused and blurred. When there is a "blur" then .placeholder-grey CSS class is added to the textarea, but targeting that with CSS not worked as well.
Disqus has very poor documentation, so I figured out all this with code inspection.
Any ideas would be really appreciated.
P.S. I don't have a working example online, you can see it on any blog/website where Disqus is used, for example on their own blog at: http://blog.disqus.com/post/974280725/achievement-unlocked-merging-profiles#disqus_thread
Depending on how the theme is laid out, Disqus may inherit a different text color which may be the same as the background. You can change it using the following override:
#dsq-content { color: #ffffff !important; }
If the text color still does not change, you will need to target comments more directly. This can be done with the following CSS:
.dsq-full-comment { color: #ffffff !important; } /*for Narcissus theme users*/
.dsq-comment-body { color: #ffffff !important; } /*for Houdini theme users*/
If you didn't solve it yet I found a solution that worked for me. Just a bit after the body{} tag in the style sheet of wordpress, you will find the ul{} in there change the color:#FFFFFF to color:#000000 (or what ever color you like). It worked for me and I hope it will work for you to.
body{
text-decoration: none;
background-color: #000000;
}
a:hover{
color: #FFFFFF;
}
a {
color: #CCCCCC;
text-decoration: none;
font-size: 14px;
}
li {
padding: 10px 10px 0px 10px;
}
ul {
list-style:none;
>>> color: #000000;
margin-left: 25px;
}
The site you link to has a css style block just before the textarea, if you edit this to add color: #f90; it'll change the color from the usual black to orange (in this example). Presumably you could also add this in the head of the document instead.
If you use something like Chrome's developer tools or, I imagine, Firebug for Firefox you can edit the html/css in place to see the effect live (although it won't persist) to see what changes you can, or need to, make.
The website you weblink to has a css design prevent just before the textarea, if you modify this to add color: #f90; it'll modify along with from the regular dark to lemon (in this example). Presumably you could also add this in the go of the papers instead.
Spybubble Free