I am trying to change the default css but nothing happens, even if I do
bar.setStylePrimaryName("gwt-TabBar");
Here is my CSS, even trying to change the Header does not work H1
Why isnt it changing?
/** Add css rules here for your application. */
/** Example rules used by the template application (remove for your app) */
body {
color: black;
font-family: Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
font-size: 10px;
margin: 20px 20px 20px 20px;
}
h1 {
font-size: 2em;
font-weight: bold;
border: 8px solid #C3D9FF;
background-color: #E8EEF7;
color: #000099;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-TabBar {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarFirst {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarRest {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarItem {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarItem-selected {
background-color: #C3D9FF;
}
I have some ideas: did you import the css into application? You can either do that in your application.gwt.xml or in your index.html.
is the css loaded? you can check this using firebug. check your target folder or war folder to find out the path.
the browser often caches the css; and you have to force its reload.
you can do this by pressing the shift key when you press the "reload" button.
I second checking if the css has changed in firebug as well.
Related
I have a contact form and I have it set exactly the way I like it, however the text is white, so when you type in it you cant see it. When you highlight it it is there so it is working, however people can't see what they are typing. I have it hosted here www.trutattoo.amdesigns.studio.com
and this is my CSS
form label,
form .label {
display: block;
margin-bottom: 20px;
}
input,
textarea {
margin-top: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 800;
font-color: #000000;
border: 1px solid #000000;
outline: none;
-webkit-transition: border-color 0.2s;
-moz-transition: border-color 0.2s;
-ms-transition: border-color 0.2s;
-o-transition: border-color 0.2s;
transition: border-color 0.2s;
}
input[type="text"],
textarea {
padding: 10px;
width: 100%;
}
input[type="text"]:focus,
textarea:focus {
border-color: #161616;
}
input[type="checkbox"] {
display: none;
}
textarea {
margin-top: 20px;
height: 200px;
}
Just change
font-color: #000000;
border: 1px solid #000000;
000000 to any color you want.
Example change to #ff0000 is you want RED.
Hope it helps!
I have a button with the following style:
.btn
{
width: 100px;
height: 40px;
float: right;
display: inline-block;
background-color: #555555;
border:1px solid #ffffff;
font-family:OpenSansRegular;
font-size:15px;
color: #ffffff;
}
As I reckon, using OOCSS principles, we should separate visual from structure.
Something like this (I would assume - correct me if I'm wrong):
.btn
{
width: 100px;
height: 40px;
float: right;
display: inline-block;
}
.skin
{
background-color: #555555;
border:1px solid #ffffff;
font-family:OpenSansRegular;
font-size:15px;
color: #ffffff;
}
But what if I want to use the exact same configurations for another button, except for the floating position which I would like to remove, how should I do it? Isn't OOCSS being restrictive by coupling the positioning in the structure?
This likely depends on what exactly the structure you actually have is, but I would likely do something like the following which still follows OOCSS principles:
.btn { /* Default button structure properties */
width: 100px;
height: 40px;
display: inline-block;
}
.float-right { /* More specific button structure properties */
float: right;
}
.skin { /* Default button skin properties */
background-color: #555555;
border: 1px solid #ffffff;
font-family: OpenSansRegular;
font-size: 15px;
color: #ffffff;
}
The actual class names could be different, but given you only have one more specific property, I think the specific name makes sense in this case.
I am working on an app using ionic and i want to reproduce something similar to this horizontal scrolling card but i am quite lost as is not my solution. I am wondering if someone has been able to do something similar should shed some light.
You can use ion-slide-box .
You can customize the border,width, etc. For example I make invisible for:
.slider-pager {
display:none !important;
}
And add border, fix the margin:
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
width: 200px !important;
border: 1px solid #000;
margin: 62px 56px
padding-left: 20px;
padding-right: 20px;
}
Have a nice coding and make your own custom style!
I have a ListBox:
ListBox lb = new ListBox();
this is my default css for a listbox:
.gwt-ListBox {
background: transparent;
padding: 5px;
border: 1px solid #222;
color: #555;
text-shadow:1px 1px 0px #ffffff;
text-decoration:none;
font-family:arial;
height: 40px;
font-size:16px;
font-weight:bold;
cursor: pointer;
}
I want to modify the background at runtime:
lb.getElement().getStyle().setBackgroundColor("#aaa");
this seems to remove all styling, and I get a really ugly listbox. What am I doing wrong?
Thanks
A working and more maintainable way of doing this is using a CSS client bundle, see:
http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html
and
http://www.gwtproject.org/doc/latest/DevGuideUiCss.html
Put the parts of the style that you want to vary in a CssResource and apply the extra style. To give you an idea of how to do this:
MyWidget.css:
.backgroundA {
background: #aaa;
}
MyWidget.java:
interface MyWidgetCssResource extends CssResource {
String backgroundA();
}
MyWidgetCssResource resource;
lb.getElement().addStyleNames(resource.backgroundA());
I have a GWT application with two TabPanels.
The TabPanel generates css-classes that has the prefix gwt-TabPanel.
Is there any way to change this prefix for one of the tables? I want to be able to style the two TabPanels independently.
To solve this I did:
Using setStylePrimaryName(String); This will change the prefix for the CSS class names that the TabPanel and TabBar uses.
tabPanel.getTabBar().setStylePrimaryName("myTabBar");
tabPanel.setStylePrimaryName("myTabPanel");
In your CSS file your add something like this:
.myTabBar {
}
.myTabBar .gwt-TabBarFirst {
width: 5px; /* first tab distance from the left */
}
.myTabBar .gwt-TabBarRest {
}
.myTabBar .gwt-TabBarItem {
margin-left: 6px;
padding: 3px 6px 3px 6px;
cursor: pointer;
cursor: hand;
color: black;
font-weight: bold;
text-align: center;
background: #3A3A3A;
}
.myTabBar .gwt-TabBarItem-selected {
cursor: default;
/* background: black; */
}
.myTabBar .gwt-TabBarItem-disabled {
cursor: default;
color: red;
}
.myTabPanel {
}
.myTapPanel .myTabPanelBottom {
border-width: 0px;
overflow: hidden;
padding: 6px;
}
For the second TabPanel you set a different with setStylePrimaryName() on both the TabPanel and the TabBar. Then you add a new section to the CSS file with the second primary name.
You can use the methods setStyleName() and addStyleName() to set or add css styles to GWT UI objects.