I'm trying to override a particular widget's style using UiBinder. What am I overlooking?
<ui:style>
/*************
* Note #1
*************/
.btnVote {
display: inline-block;
width: 50px;
height: 50px;
background: #fff;
margin: 5px;
text-align: center;
outline: none;
cursor: pointer;
}
/*************
* Note #2
*************/
.btnVote-up-hovering, .btnVote-down-hovering {
background: #ddd;
}
.btnVote-up-disabled, .btnVote-down-disabled {
border-shadow: inset 0 1px 3px #aaa;
}
.lblName {
line-height: 50px;
font-size: 40px;
padding: 5px 10px;
}
.clear {
clear: both;
overflow: auto;
}
.floatLeft {
float: left;
}
</ui:style>
<g:HTMLPanel styleName="{style.clear}">
<g:FlowPanel styleName="{style.floatLeft}">
/*************
* Note #3
*************/
<g:PushButton ui:field="btnVoteUp" stylePrimaryName="{style.btnVote}">
(+)
</g:PushButton>
<g:PushButton ui:field="btnVoteDown" stylePrimaryName="{style.btnVote}">
(-)
</g:PushButton>
</g:FlowPanel>
<g:FlowPanel styleName="{style.floatLeft}">
<g:Label ui:field="lblName" stylePrimaryName="{style.lblName}"/>
</g:FlowPanel>
</g:HTMLPanel>
Note 1: This rule is being applied and works fine
Note 2: This other rules seem to be getting ignored (they don't take effect)
Note 3: The default naming for the widget is being reset, hence Note 1 works fine. The base class is set to GOGXR1SCFI instead of gwt-PushButton
Why aren't they other rules working? When I hover the widget, the class GOGXR1SCFI-up-hovering is indeed set to the widget, but no accompanying CSS.
Thanks for your help.
Update
Something I ran into that gave me a hard time for a while: when you use the #external keyword, you must place a semi-column at the end of the #external statement, as in:
<ui:style>
#external .btnVote;
.btnVote {
...
}
</ui:style>
<g:FlowPanel styleName="{style.btnVote}"/>
One thing you could do is to create your CSS using ClientBundle, define all the different states there, then handle the various states manually. This way you don't need to define classes as #external, and GWT will optimize the CSS for you (shorten the names, only ship what gets used, etc.). This is especially beneficial for custom widgets and such.
The easiest way to deal with this is to write #external .btnVote, .btnVote-up-hovering, .btnVote-down-hovering, .btnVote-up-disabled, .btnVote-down-disabled at the top of your <style> section.
The original GWT widgets do not work well with CSS resources (like the one you have in your UiBinder). They depend on a primary style name that they append things like "up-hovering" to. This is terrible for CSS resources and UiBinders because when you type "up-hovering" it becomes things like SDLFJKS.
The button styles do NOT get obfuscated (so you can read "up-hovering"). Your UiBinder styles DO get obfuscated. You can never make them match as long as obfuscation is going on.
So, the #external keyword tells UiBinder and CssResource not to obfuscate certain styles. Now, when you use {style.btnVote-up-hovering}, that will actually come through to the final HTML, which is where these old-fashioned GWT styles will be applied.
I suspect you have CSS stylenames being obfuscated by GWT in your UIBinder. Reference - garbled css name when styling within UiBinder
Chose the approach you find easier to integrate in your proces. Cheers :)
Related
I currently am styling my social sharing buttons using groupings (all Facebook buttons have a set style, all Twitter buttons do, etc.). Currently, I achieve this using a massive grouping of YUI's for each button type - this makes creating new sharing buttons extremely tedious, as I have to inspect each button to find its ID. Below is the code that stylizes my Facebook share buttons. The format is identical for my other button types, just with different YUIs - woefully lengthy. However, my code is functional as is:
#block-yui_3_17_2_1_1486492076694_136568, #block-yui_3_17_2_1_1486492076694_229456, #block-yui_3_17_2_1_1486492076694_301518, #block-yui_3_17_2_1_1486492076694_346464, #block-yui_3_17_2_1_1486492076694_390386, #block-yui_3_17_2_1_1486497764071_38998, #block-yui_3_17_2_1_1486497764071_84939, #block-yui_3_17_2_1_1486497764071_127888, #block-yui_3_17_2_1_1486497764071_167750, #block-yui_3_17_2_1_1486497764071_210706, #block-yui_3_17_2_1_1486762828716_16671, #block-yui_3_17_2_1_1487613145787_165402, #block-yui_3_17_2_1_1488578082993_168899, #block-yui_3_17_2_1_1489175439402_256947, #block-yui_3_17_2_1_1489873739917_158023, #block-yui_3_17_2_1_1490053051323_201623, #block-yui_3_17_2_1_1490837162453_152647, #block-yui_3_17_2_1_1491429139219_249912, #block-yui_3_17_2_1_1491948942477_176351 {
display: inline-block;
padding-bottom: 0;
padding-top: 0;
}
Ideally, I'd like to target each button type using their respective classes to REALLY consolidate the amount of code I have written (and make future additions much more efficient). I've tried everything I could think of, but nothing seems to work.
I'm currently working on the Squarespace platform.
Your problem might be because of Squarespace's default styles. When targeting elements, CSS prefers the more precise selector:
.social-icon {
background-color: red;
/* Less preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* More preferred */
}
You can override this by using !important:
.social-icon {
background-color: red !important;
/* More preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* Less preferred */
}
so when you style your social icons, use !important to override Squarespace's default styles.
.social-icon {
display: inline-block !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
Hope this helps!
I'm creating a chat widget and I want to overwrite a bunch of CSS. For example if this is the website theme's CSS:
textarea {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea {
padding: 5px;
}
then only my widget's CSS should work. However, it adds both CSSs to textarea by default - how can I prevent the website's CSS from being added?
As Marc B stated, you can put your chat in an iframe, in which case you can have its own completely separate stylesheet.
If you must use it inline, then you can use all css property to unset what has been set elsewhere:
Widget CSS:
textarea {
all: unset;
padding: 5px;
}
Further, as pointed out in comments elsewhere, the best way is to create different classes for text area and use them where necessary, for example:
textarea.main {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea.chat {
padding: 5px;
}
And then use
<textarea class="main">
or
<textarea class="chat">
depending on what you need.
Well I guess it is really easy to write !important to all your css rules. Just replace ";" with "!important" if that's an easy way for you OR if you really want to change then you can use iframe really
I've tried to find the answer, and can't seem to do so, which is leading me to believe that it isn't possible. With my minimal knowledge of how CSS works, I also don't think it would be possible, but I just want to ask before I start working around a problem that may or may not exist.
Basically what I'm trying to do is use a previously defined attribute in a new class in my CSS stylesheet. For instance, say I had a couple of classes that just held background or font colors, like this:
.black { background-color: #000000; color: #000000; }
.white { background-color: #FFFFFF; color: #FFFFFF; }
Now if I was defining a new class (or using any selector for that matter), would it be possible to use the value of an attribute from an already existing class? Here is what my idea would look like:
.newClass {
width: 100%;
height: 100%;
background-color: .black; /* this would just get the background-color attribute from the .black class definition */
}
background-color: .black; is basically just a placeholder for "get the background-color attribute from the .black class definition". Is that possible using purely CSS? I'm aware of a ton of alternatives with PHP/JS, but I'd like to know if CSS can tackle this by itself. Thanks guys.
SASS is a thing to go. Your code will be like
#mixin black-theme {
.black { background-color: #000000; color: #000000; }
}
.newClass {
width: 100%;
height: 100%;
#include black-theme;
}
SASS
PHP compiler for SASS PHPSASS
There are javascript based solutions too like LESS but I generally don't recommend them as if Javascript load slow then presentation becomes jerky.
No, this is not currently possible in CSS. CSS does not have variables or the ability to reference values from previous rules. You would have to look for a CSS preprocessing language that gets processed into plain CSS before going onto the web site.
If you're willing to go the preprocessed way, you can look at SASS or LESS.
Yea possible using SASS or LESS css
#bgcolor : black;
.newClass {
width: 100%;
height: 100%;
background-color:#bgcolor;
}
I've been educating myself. Reading this:
The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)
For example:
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...]
Now, some example code SASS outputs for me:
#content #blog {
/* ... */
}
/* line 85, ../sass/screen.scss */
#content #flickr {
/* ... */
}
#content #flickr div p {
/* ... */
}
This seems a bit awkward.. am I doing something wrong? Is this a communication problem between me and Sass? Are we losing it?
Edit:
Some SCSS code:
#flickr {
#include columns(5,8);
background: url('../img/ipadbg.png') no-repeat;
#ipod-gloss {
z-index: 999;
position: relative;
}
div {
margin-top: -80px;
margin-right: 20px;
h2 {
color: $white;
font-size: 24px;
}
p {
margin-top: 40px;
}
}
}
Side Bonus!: The article says browsers (or at least Firefox) search the selectors from right to left. I couldn't understand why this is a more efficient why. Any clues?
You have to find your compromise between maintainability (nesting makes it easier to find your way around in the stylesheet) and rendering performance.
A rule of thumb says you should try to restrict yourself to a three-level nesting and you should avoid to nest IDs if it's not necessary.
However, I think nesting too much is not the biggest issue. As soon as I became aware of the power of mixins, I used them a lot.
For example, this is my often used button mixin:
#mixin small-button($active-color: $active-color, $hover-color: $button-hover-color, $shadow: true)
display: inline-block
padding: 4px 10px
margin:
right: 10px
bottom: 10px
border: none
background-color: $button-color
color: $font-color-inv
+sans-serif-font(9px, 700)
text-align: center
text-transform: uppercase
cursor: pointer
#if $shadow
+light-shadow
&:hover
text-decoration: none
background-color: $hover-color
&:last-child
margin-right: 0
a
color: $font-color-inv
&, &:hover
text-decoration: none
&.disabled
+opacity(0.75)
&:hover
background-color: $button-color
&.active
background-color: $active-color
&.disabled:hover
background-color: $active-color
You see, quite a bit code. Applying such mixins to many elements on your page will result in a big CSS file which takes longer to be interpreted.
In the old fashioned CSS-way you would give each button element e.g. the class .small-button. But this method pollutes your markup with unsemantic classes.
Sass provides a solution though: selector inheritance via the #extend directive.
If you set defaults for your parameter of the mixin, you can also provide a simple class, which uses the mixins with your default:
// Use this mixin via #extend if you are fine with the parameter defaults
.small-button
+small-button
And then you can just inherit from this class in various contexts:
#admin-interface
input[type=submit]
#extend .small-button
The resulting CSS statement aggregates all usages of .small button into one rule with comma-separated selectors:
.small-button, #admin-interface input[type=submit] {
display: inline-block;
...
}
Concluding, a naive usage of Sass can effect your CSS performance. Used wisely, however, it is maintainable thanks to well-structured and DRY code, it leads to proper separation of markup and styling (semantic classes only) and allows for smart and performant CSS code.
SASS is only a language that compiles down to CSS. If you're concerned with SASS' performance in terms of how it runs in the browser, then SASS doesn't enter the equation -- it'll be compiled and served to the browser as regular CSS.
From what I can see of your usage of SASS, there's a couple of things I could suggest:
You don't have to nest everything.
The ability to nest rules inside each-other in SASS is a language feature, but you don't have to do it if it doesn't make sense to do so.
In terms of your general CSS usage:
If the nesting gets too severe/unwieldly, consider using classes where it makes sense.
When it's necessary to use the hierarchy of DOM elements, consider using the [child combinator]: .foo > .bar.
IDs are meant to be unique, thus should always only reference a single element. Most of the time, they can be CSS rules unto themselves -- #content #flickr would become just #flickr, for instance -- and browsers will optimise the lookup for a single ID. The only time you would need something like #id1 #id2 is if #id2 needs to appear in different contexts on different pages.
If your selector contains things like #id div p, that div is either superfluous or serving a specific purpose.
If it's superfluous, change the rule to #id p, which selects any <p> that occurs as a descendant of #id.
If it serves a specific purpose, consider classing the <div> with a class name that describes its purpose -- perhaps <div class="photos-list">. Then your CSS could become .photos-list p, which is far more maintainable and reusable.
I have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars