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.
Related
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 succesfully implemented featherlight.js plugin on my wordpress blog to display some photos as a lightbox.
By default featherlight.js shows up the nextIcon and previousIcon only when the mouse hovers a certain area of the image.
But I would like the nextIcon/previousIcon to be always visible outside of the image when the lightbox is invoked.
Made some tests with "span.featherlight-next" resp. "span.featherlight-previous" so that the left/right icons are outside of the image...but until now I didn't find out how to do it.
Does someone know how to modify the CSS file so that the nextIcon and previousIcon to be always visible ?
Any help is greatly appreciated.
Thank you for your answer. Well, I came up with a solution which satisfies my needs. In fact I just moved the previous/next navigation icons inside the border of .featherlight-image, and the icons just are just visible on a mouse hover (which is the default).
First I set a bigger white border to the image:
.featherlight .featherlight-image {
max-width: 100%;
border: 32px solid #fff;
}
then I fine tuned .featherlight-next & .featherlight-previous and it's span classes based from featherlight.gallery.css, like this:
.featherlight-next,
.featherlight-previous {
display: block;
position: absolute;
top: 25px;
right: 0px;
bottom: 0;
left: 80%;
cursor: pointer;
/* preventing text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* IE9 hack, otherwise navigation doesn't appear */
background: rgba(0,0,0,0);
}
.featherlight-previous {
left: 0px;
right: 80%;
}
.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(0,0,0,0.0);
}
.featherlight-next span,
.featherlight-previous span {
display: none;
position: absolute;
top: 50%;
width: 80%;
font-size: 22px;
line-height: 50px;
/* center vertically */
margin-top: -40px;
color: #777;
font-style: normal;
font-weight: normal;
text-shadow: 0px 0px 3px #888;
}
.featherlight-next span {
right: 7px;
left: auto;
text-align: right;
}
.featherlight-previous span {
right: 0px;
left: 7px;
text-align: left;
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
display:none;
}
Putting the background to white could also help hiding the white image border / frame so that the navigation icons are more distinctive when hovering:
.featherlight:last-of-type {
background: rgba(255, 255, 255, 0.6);
}
Hope this helps someone ;-)
Check the source. You'll find how the hide/show is achieved:
.featherlight-next span,
.featherlight-previous span {
display: none;
// ...
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
So you simply need to override the display: none with your own custom rule.
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 am trying to give a div with class "left2" a border-radius when class "left1_sub" is hovered.
I´ve searched a lot of solutions, but nothing seems to work for me.
The html to it: http://web318.login-11.hoststar.at/ben/kleinraum/wp/menuimg/index.html
and the full css: http://web318.login-11.hoststar.at/ben/kleinraum/wp/menuimg/style.css
.left1_sub{
padding-top:2%;
padding-bottom:2%;
width: 100%;
float: left;
background-color: #cccccc
}
.left1_sub:hover ~ .left2 {border-radius: 10px;}
.left2{
float: left;
margin-right: 20px;
margin-top: 20px;
width: 500px;
height:600px;
background-color: #ccccff
}
Just introducing myself to css3 so sorry if there are failures.
ben
This can be done very easily with jQuery or something similar.
If are comfortable using jQuery something like this would work.
First, create a class in CSS with a border radius:
.rounded { border-radius: 5px; /* (or whatever) */ }
Then, in <script> tags:
jQuery(document).ready(function($) {
var obj = $('.left1_sub'),
target = $('.left2');
obj.hover(
//mouse in
function(){
target.addClass('rounded');
//mouse out
},function(){
target.removeClass('rounded');
});
});
http://jsfiddle.net/wGzgB/11/
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.