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;
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'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 want to change the color of the text (link) in a box. This is the CSS code I'm using:
.boxed-1 {
background-color: #e8ecf4;
border: 1px solid grey;
padding: 15px;
margin-top: 1px;
margin-bottom: 10px;
margin-right: 25px;
margin-left: 0px;
}
When I call for div class boxed-1, all the text displays blue. How can I change it?
I've tried a bunch of different suggestions from my google search to no avail.
My site is: http://mikediane.com
Links are set to the color blue by the browser, thus they do not inherit from their parent like most other elements do.
You will need to apply a color: #?????? to the a itself, like this:
.boxed-1 a {
color: #??????;
}
See this JSFiddle for a demonstration.
Typically if you want to set the text in an element just apply the CSS style color.
In your case,
.boxed-1 {
color: /*Whatever color you want*/
}
The problem is that your anchor tag's color is being applied to the text. If you create a rule like
.boxed-1 a { color: #hexcode; }
I'd expect this to work.
UPDATE
In my style sheet I have a conflict with these snippets. If I keep this one
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
then, the gradient effect of the one below works, but the header banner is displaced towards the right. If I remove that, the header banner positions itself correctly, but the gradient effect of the code below does not work :/
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
a {
UPDATE II
These 3 lines
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
have a huge impact on the rest of the page
They make this code:
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
be effective. If I remove those 3 lines, the gradient effect will not take effect and the font letters will not be of that family but the standard times roman. However, the negative effect is, like I said, that it displaces to the right a banner that I have as header
I have one header page, one controller and one view and the style sheet to which I have a link in the View
Like the others have said the code doesn't affect the positioning of the elements. Only way that it can affect the header would be if that piece of code is not treated as css at all. Check if the code is in the correct style tags.
The moz is for Firefox and as stated already its for styling. Are you using IE? as if so Id suggest trying alternate browser as well as IE has issues with the double colon which is for css3(no suprise there). have a look here
as I used this when I first came across these and it described them well.
That code shouldn't affect what you're doing. It is code that will change the background colour and text colour of text when it is selected by the user using their mouse.
Could you give us an example link of this happening with it commented out, please?
EDIT
What is the center: attribute supposed to be doing? It isn't valid CSS...
I am new to GWT/uiBinder (latest version of GWT and testing under latest Eclipse) and really puzzled. My CSS for buttons is ...
/* --button-- */
.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00; /* this gets ignored */
}
The background does nothing, the rest works.
I have tested that this CSS entry does something by changing the color and seeing that it works. I have also tried "background-color" (I have seen both in various docs). The background never changes.
I also tested a gwt-TextBox as follows and it works just fine.
/* --text box-- */
.gwt-TextBox {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: Beige;
}
Note: I know that sometimes while testing you have to refresh the web page to see your changes.
Note: I can set the button background by using a CSS entry called "myButton" and using styleName='myButton' it in the uiBinder entry.
Note: The button is in a Layer in a LayoutPanel in a north:DockLayoutPanel in an east:DockLayoutPanel.
Help!
https://stackoverflow.com/a/7833358/635411
You can use a more specific selector like the other answer suggests:
/* --button-- */
button.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00;
}
Personally, I try to avoid overwriting the default styles because of the precedence issues.
I think this should solve your problem
.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00 !important;
}
You need to include this line before you make any changes to the background of gwt-Button
background-image:initial !important;
The problem you're having is that you're trying to set a background color, when gwt-Button uses a background image, so the image goes over your background color, making it seem like your css is being ignored.
there is a simpler way
you need to remove the gwt-Button style and then add whatever color you like
`
Button button=new Button();
button.removeStyleName("gwt-Button");
button.getElement().getStyle().setbackgroundColor("#F00");
//incase you need to remove the default border style aswell
button.getElement().getStyle().setBorderStyle(BorderStyle.NONE);
`