I've read the other questions on here about overriding inline style imported from Javascript and I feel like I'm missing something here.
The iframe and current code can be seen at
https://www.timedoutescape.com/waiver/
(you can put random first / last name and email to get to the signing interface I'm trying to style)
The current code is --
<div id="signingSpace" style="background-color: white; height: 300px; width: 819px;" class="kbw-signature"><canvas width="815" height="296">Your browser doesn't support signing</canvas></div>
And I'm trying to override it with
#signingSpace[style] {
height: 100px !important;
}
Any advice?
Related
I am using HTML dividers like this
<div class="divider-90"></div>
<div class="divider-180"></div>
and
.divider-90 {
height: 90px;
width: 100%;
}
.divider-180 {
height: 180px;
width: 100%;
}
instead of margins on elements.
I want to create a function that generates the div height depending on the class name.
Thank you in advance.
Since SASS generates CSS, and with CSS you can't have dynamic class name, SASS won't be able to do it, but you so something like this (i personally don't like this solution):
#for $i from 1 through 1000{
.divider-#{$i} {
height: #{$i}px;
width: 100%;
}
}
I personally don't like this solution because it will blow your CSS file size, and so it will takes a lot longer to be loaded and parsed, so please, consider using some "chunk based" version, something like every 10px instead every 1px
If you really really need this functionality, i think the best solution will be to use some JS script do generate this height automatically when the page is loaded
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'm new to advanced CSS and I've been following this tutorial for generating sprites using gruntjs, spritesmith and less. I'm stuck on how to solve the following problem. Firstly, I generate a .less file containing the information of each image inside the sprite. It looks something like this:
#mobile_logout-x: 1586px;
#mobile_logout-y: 0px;
#mobile_logout-offset-x: -1586px;
#mobile_logout-offset-y: 0px;
#mobile_logout-width: 256px;
#mobile_logout-height: 256px;
Using grunt-contrib-less I can now use the following to get the sprite into my target css:
Less template
.mobile_logout {
.sprite(#mobile_logout);
}
Result
.mobile_logout {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
}
This would be fine if I wanted to use this directly in the HTML, but I'd like to specify this as part of another CSS class. An example would be:
.myTestButton {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
color: white;
background-size: 1.3em 1.3em;
background-position: top right;
}
The problem is at this stage I can't find a way to get the width and height to be represented as background-width and background-height, which is where I am looking to get to.
I've tried changing the values in the sprite.less file to match what I'm looking for, but have found that was a hack that didn't work. Another option I have been considering is having a mixin to return the correct item with the width translated, but because these are generated from less I couldn't get that to fly either.
Just after posting this I looked into where the sprite function came from and found my answer in the generated sprite.less file:
.sprite-width(#sprite) {
width: ~`"#{sprite}".split(', ')[4]`;
}
.sprite-height(#sprite) {
height: ~`"#{sprite}".split(', ')[5]`;
}
The sprite.less file is generated using a mustache template. In order to solve my problem in Spritesmith you can specify a mustache template. It was also incorrect that I was looking at background-width and the property I needed was background-size. My attempts at inlining also failed, and I should have been looking at using a div rather than sizing the sprite component.
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'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 :)