I'm using PyGI to build a GUI for an app I've written in Python 3.4, and I'm using GTK+3's CSS implementation to style the interface.
In my .css file, I've specified that all text by default should be white:
* {
color: #fff;
}
as I'm mostly working against dark/black backgrounds.
The app I'm building has text boxes, however, and GTK automatically gives them context/right-click menus. Unfortunately the default white text styling I've applied also works on the menu, and so the user can't see anything.
If I try to override those settings with:
.menu {
color: #000;
background-color: #f3f3f3;
}
it just turns out like this. The text colour doesn't change, and it doesn't seem to respond to any :disabled pseudo-classes either.
How can I style or customise the context menus of these text fields using GTK+3's implementation of CSS?
I styled the context menu to look the way I want with these lines in the CSS file:
.menu {
border: 1px #444 solid;
background: #0d0d0d;
font: light 12px;
}
.menu .separator {
color: rgba(68, 68, 68, 0.1);
}
.menuitem {
padding: 8px 0px;
}
.menuitem:hover {
background: rgba(255, 255, 255, .1);
}
.menuitem:insensitive .label {
color: #555;
}
It now looks like this.
Related
I have been modifying the gtk.css file and managed to change the look of mi windows. For the most part i have been able to figure what certain components i must modify to change the look of certain things. however I have not been able to find a way to modify the window's minimize, maximize, and close buttons certain properties and I have been trying for a good while now.
I was able to modify the background-image of the search button in my terminal as you can see in the picture to make it blend in into the headerbar color.
I was able to modify the color of the minimize, maximize, and close buttons color but I can't seem to figure out two remove the background color for these three buttons.
I used the following to modify the regular buttons properties.
button{
/* min-height: 0px;
min-width: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;*/
/* border: 1px pink; */
/*border-radius: 0px; */
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: blue;
outline-color: rgba(229, 112, 132, 0.7);
border-color: pink;
background-image: image(pink);
text-shadow: 0 1px rgba(255, 255, 255, 0.769231);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
I used the following to change the close and others buttons colors as well, But i can't make the background color disappear.
button.minimize, button.maximize, button.close{
color: blue;
border:0px;
border-radius: 0px;
border-color: pink;
background-image: image(pink);
background-color: pink;
border-radius: 0px;
}
I used all the following components but i just can't seem to make it work, I used one by one, they are not all active at once. These modify the color but won't modify the background color like it did with the search button or menu button from the terminal.
headerbar .close{
color:yellow;
}
.tab-close-button{
color:red;
}
button.titlebutton.minimize{
color: red;
background-color: pink;
background-image: :image(pink);
}
button.headerbutton.minimize{
color: red;
background-color: pink;
background-image: image(pink);
}
button.header.minimize{
color: yellow;
background-color: pink;
background-image: :image(pink);
}
I know its been 3 months since this post but I have an answer.
Even if you had already found it, might as well send it for those coming from google.
windowcontrols button image:not(:hover) {
background-color: transparent;
}
How do I change link and background colours of a.btn.btn-default / btn.btn-default? I can’t find these in any CSS.
See here: https://www.webhosters.co.za/client/whois . There are two buttons at the bottom of the 404 error page. These buttons (home page and contact support) are in white text and white background. they are only visible when one hover over. How do I change the background and text?
Here is the small css snippet you can go through
section#main-body a.btn {
color: #fff;
background-color: #6aaf08;
border: 1px solid #6aaf08;
}
We are here inheriting button class Hope this helps
Happy coding!!
You can give class to that buttons and apply css on that like change in btn background and color
.contact-btn, homepage-btn{
background-color: #6aaf08 !important;
color: #fff !important;
}
or
you can add more parents to .btn-default so your css will be applied first and will be replace .btn-default property
#main-body .btn.btn-default {
background-color: #6aaf08;
color: #fff;
}
/* ------------------ or ------------ /*
if you don't want to add parents class in css you need to give important to that css property..
.btn.btn-default {
background-color: #6aaf08 !important;
color: #fff !important;
}
Great place for styling links is here
so, basically you would be looking for something like:
/* unvisited link */
a:link {
color: red;
background-color: white
}
/* visited link */
a:visited {
color: green;
background-color: white
}
/* mouse over link */
a:hover {
color: hotpink;
background-color: white
}
/* selected link */
a:active {
color: blue;
background-color: white
}
I have the following CSS:
.point.active,
.point:active {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
Example: http://jsfiddle.net/7zmjvaxL/
This is working. But when the element is active and I hover over it, it loses the CSS colors. How I can keep the color if the element is active and if I hover over it?
Thanks.
Bootstrap comes with a number of default settings for certain elements.
In your case it is forcing this rule:
.btn-default.active:hover {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
Which is overriding your own rule set.
The best bet is to remove the class btn-default, because its not really a default button, its a customised one, and then add CSS rules for your element.
For example, this jsfiddle demo:
.btn-point {
color: #333;
background-color: #fff;
border-color: #ccc;
}
Try this :
.point.active,
.point:active,
.point:active:hover{
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
Do you have .point:hover{} somewhere ?
I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button onclick?
.btn-success {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #1F2838;
border-color: #494F57;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #161617;
border-color: #494F57;
}
.btn-success .badge {
color: #161617;
background-color: #ffffff;
}
The :active selector is what you need for the click.
.btn-sample:active {
// click styles here
}
It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:
.btn-sample:active {
box-shadow: none;
}
Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:
.btn-success:active:focus {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.
You have to use the !important declaration to do that correcly.
.btn-success:hover, .btn-success:active, .btn-success:focus {
color: #ffffff !important;
background-color: #1F2838 !important;
border-color: #494F57 !important;
}
I fixed this behaviour with this css code:
.btn-primary {
background-color: #8ed3cc;
border: 0 !important;
padding: 1rem 5rem;
border-radius: 0;
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
box-shadow: none !important;
}
.btn-primary:hover {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
.btn-primary:focus {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
Some inspiration from the bootstrap source for overriding these various button states where $off-white and $brand-black are defined by us:
.btn-success {
&:hover,
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
&:active,
&.active,
&.disabled,
&:disabled {
color: $off-white;
background-color: $brand-black;
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
}
}
That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
Just add the following code in your CSS
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617;
border-color: #494F57;
}
If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:
.btn-success {
color: #ffffff !important;
background-color: #161617 !important;
border-color: #494F57 !important;
}
Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).
If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.
Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.
There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).
if you want remove the box-shadow just add box-shadown:none and make it important or if you want add box-shadows just add color values.
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: none !important;
}
or
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: 0 0 0 0.2rem #c9cbfa !important
}
to trigger any class whenever a button is clicked, you need :active selector and to fix the default behavior of the bootstrap button on click, you need to set the background-color to any color you want to along with !important. It will then override the default styling of the bootstrap class.
.btn-outline-primary:active{ background-color: [your color] !important}
In Chrome, I can set the background-color of a text input field and all that changes is the background color. In this way I can highlight fields that need to be paid attention to (make the background light red so that the user knows there's a mistake there). In Firefox, and I suspect other browsers, the background color is changed, but the text field also looks more plain. Inset shadows disappear and when focused on the field there's no blue glow around it. It just looks different.
Is there a way to highlight a text field without changing the look and feel of it in Firefox (and other similar browsers)?
UPDATE: Example code:
<ul>
<li><input type="text" style="background-color: red"/></li>
<li><input type="text"/></li>
</ul>
You can see the difference between the 2 text fields. Hovering and focusing on the normal text field feels native to the OS. But the text field with a red background isn't as good anymore.
Here's the jsfiddle link.
I got the same issue back then, seems that if you want to change the background-color, you must change the border style for Firefox, 2px solid and the color of your choice.
No, I do not believe so. Opera has the same behavior as Firefox. The best solution I came up with was to only style the elements if they required the user's attention (the element has focus or contains invalid data).
This is what I use as part of my Sass bootstrap:
#mixin background($image, $bgcolor) { background: $bgcolor url(#{$imagedir}#{$image}) no-repeat scroll right center }
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
// background-color background-image background-repeat background-attachment background-position
&:required:valid, &:required:in-range {
//border: 1px solid #0f0;
&:focus { outline: 1px solid #0f0; #include background("tick.png", transparent); }
}
&:invalid, &:out-of-range {
#include background("asterisk_orange.png", $required-bg);
border: 1px solid $required-color;
&:focus {
background-image: url("#{$imagedir}exclamation.png"); outline: 1px solid $required-color;
}
}
}
This is what the generated CSS looks like:
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:valid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:in-range:focus, textarea:required:valid:focus, textarea:required:in-range:focus, select:required:valid:focus, select:required:in-range:focus {
outline: 1px solid #0f0;
background: transparent url(icons/silk/tick.png) no-repeat scroll right center;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range, textarea:invalid, textarea:out-of-range, select:invalid, select:out-of-range {
background: #fef8b4 url(icons/silk/asterisk_orange.png) no-repeat scroll right center;
border: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range:focus, textarea:invalid:focus, textarea:out-of-range:focus, select:invalid:focus, select:out-of-range:focus {
background-image: url("icons/silk/exclamation.png");
outline: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus + .tip, textarea:focus + .tip, select:focus + .tip {
display: inline;
position: absolute;
border: 1px solid red;
background: #fef8b4;
margin: 0;
padding: 2px .5em;
}
It's worth noting that for Opera, outline does not cause the element to lose its default styling like border/background does.