Is there a way to change all background colors of this control. Styles property has like 50 parts that can be changed, and although I think I changed all of them, I still have few parts with default color.
Is there a way to have ASPxGridView in one specific color, for example, I need it all blue.
I had a similar issue where I wanted to format the DEVX Grid to match the boostrap theme of my site.
Here is what I came up with at this link. Posted below..
<style>
table
{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
font-size: 14px !important;
color: #262626 !important;
}
tr:nth-child(even) {background: #EEEEEE}
.dxgvDataRow_DevEx:hover { background-color: #C0E0FF; }
</style>
<script>
$(function () {
var Grid = $(".dxgvTable_DevEx");
Grid.attr('style', "min-width:300px;max-width:750px;");
});
</script>
Related
I have a v-btn that I am using inside a component. The problem is that I need to remove the overlay from the button. In terms of the API the closest that I can find is the ripple, which is not what I am looking for. When I view the source I can see that I am getting the overlay from here:
.v-btn--plain:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover) .v-btn__content {
opacity: 0.62;
}
I am implementing the view button such as:
<v-btn plain class='yellowButton' id='ResourceBtn' #click="SubmitForm()" >Submit</v-btn>
I have tried the following CSS, and have had no luck:
<style scoped>
.v-btn--plain:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover) .v-btn__content{
opacity: 1 !important;
}
.yellowButton{
background-color: #FFD007;
color: #0033A1 !important;
font-size:16px;
font-weight: 600;
letter-spacing: -.25px;
opacity: unset !important;
}
.yellowButton span.v-btn__content{
opacity:inherit !important;
}
</style>
Any suggestions about what I am missing would be greatly appreciated.
I built a website with a WYSIWYG website builder using a template provided by the program. I have since abandoned the template and use CSS to style everything, but for some reason I cannot change the default text color of the whole site.
I thought that simply changing the body color in the CSS would change the default color:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #ff9900;
background-color: #750204;
So I tried changing the color: #ff9900 to "b6b6b6" but that didn't work.
Then I literally replaced every instance of ff9900 in the CSS file to b6b6b6 and still the website shows the color ff9900. I don't get how that's possible.
Obviously I don't really know what I'm doing so be gentle. Thanks for any advice.
EDIT: here is what I see when I inspect the live page:
Why your code is not working
Although your code logically is correct, you must take into account how CSS works, especially in how it sets styles. If you have a certain element with that has color: blaa;, then it will always set that after what it inherits. So when you use body {blaa...}, you will only be able to see the results if nothing else later on overrides that. Here is a diagram to show you this:
For an element with the ID of "ID" in something like: body > nav > #ID then the styles will be applied like this:
BODY STYLES:
NAV STYLES
#ID STYLES or .CLASS STYLES
* STYLES
In this, if you specify a rule like: body { color:red }, and then #id { color:blue } then the color will be blue as it is the latest out of the 2 in the list above.
Why dooj sahu's answer has been down voted
This is because !important is not the best to use when there are other ways to go without it.
The way to do it
The best way to solve your problem is by using;
* {
color: #b6b6b6
}
* {
color: #b6b6b6
}
If you are begineer, i add a precision:
"*" target entire website, you can change background-color for example and whatever property you want.
Simply use !important:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #b6b6b6 !important;
background-color: #750204;
}
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);
`
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.
I am using a condensed font in Cufon. When the page loads, my menu is too wide and wraps. Then Cufon replaces the font and it looks fine. To reduce the visual distraction, I want to set the font size smaller and then have Cufon change the font size when it displays.
Currently the font size is set by the div containing the menu. Here is the CSS for the menu container:
.header_menu_block
{
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
/*margin-left: 238px; ie 6 can't handle, see margin block below*/
float: left;
text-align: left;
font-weight: normal;
font-size: 14px;
color: #FFFFFF;
height: 41px;
width: 991px;
}
The Cufon replacement code looks like this:
<script type="text/javascript">
Cufon.replace('.header_menu_block_col_menu ',
{ color: '#ffffff',
hover: {color: '#204966'}
} );
</script>
I've tried setting the CSS font size to 12px and then using the following Cufon code, but it does not work:
<script type="text/javascript">
Cufon.replace('.header_menu_block_col_menu ',
{ color: '#ffffff',
hover: {color: '#204966'},
font-size:'14px'
} );
</script>
Does anyone know how to do this?
You could try using the set() method. I find that this works.
<script type="text/javascript">
Cufon.set('fontSize', '14px').replace('.header_menu_block_col_menu ',
{ color: '#ffffff',
hover: {color: '#204966'}
} );
</script>
Although the manual explicitly suggests not using the font size.
https://github.com/sorccu/cufon/wiki/API
Let me guess, you never see the underlying font in non-IE browsers, right? The non-cufon appears briefly first in IE? I've been dealing with the same issue and I solved it by having the div with the text fade into view with jQuery. The fade time can be set to appear very fast--200ms in this example, I think you can make it fade-in even faster.
$(window).load(function(){$(".header_menu_block_col_menu").fadeIn(200);});
Don't forget to set the CSS for that div to display:none for the fade-in to work...
Of course, if your viewer has Javascript disabled, then nothing will appear--but what percentage of visitors to your web site have js disabled?
And, worried about your Google ranking with display:none? Read more on Google Groups.
I did it changing my CSS as below
.cufon-active h1 { /* for Cufon.replace(‘h1′) */
font-size: 3em;
color: #FF0000;
}