I am in the process of creating a module for a WordPress theme which allows users to change the primary colour. Rather than doing an overkill and implementing a LESS compiler, I will do it this way:
Here's the original stylesheet:
.header a:hover
{
color: #fff;
width: 123px;
height: 456px;
}
.header
{
background-color: #000;
width: 100%;
height: 200px;
}
Now, I need a way to parse a stylesheet like the above and extract all styles that contain a certain colour. Maybe a tool where I can enter the colors "#fff" and "#000" which then extracts the following:
.header a:hover
{
color: #fff; // matched (removed the rest)
}
.header
{
background-color: #000; // matched (removed the rest)
}
This way, I could simply include the above in a PHP file and render the respective primary colours dynamically to override the default stylesheet.
Does anybody know if there's a tool for this? It would make it a lot easier than searching the colours manually and extracting the styles.
I would create a dynamic file in PHP and specify the header as CSS:
header('Content-Type: text/css');
Use echo to add lines to the current CSS file! Make variables for all the colors you want. You can pass the selected colors with GET or POST requests. Notice that if you browser-cache the CSS files you should exclude the dynamic ones!
Related
I want to add a couple of themes on my Angular app and I would like to let users to do it by theirselft.
I just want to make some changes to colours, so this should affect just few rows of my SCSS files:
styles.scss
html, body {
background-color: black;
}
app/app.component.scss
.title {
color: green;
}
.subtitle {
color: grey;
}
.text {
color: white;
}
How to make it changeable by the user at runtime?
I searched and searched on Google and even here on SO (for example this question), but all the answers deal with loading different style files at compile time, but this could not let users to change the theme when the app is running.
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 did a little research on this but wasn't able to find what I needed, as I probably don't understand the answers.
I need to be able to define a base color for two specific pages.
Page one uses #brand-color
Page two also uses #brand-color.
Page two has a different body class. I need to make suer that #brand-color on .page-2 is different than on page 1.
I'm not quite sure how to do this, or if it's even possible.
All of the styles are already in the sheet for page 1, I really only need to change he brand-color for it all to update on page 2, I'd prefer to do that then to go through all the css and add extra declarations and duplicates for page 2.
Is this possible?
I don't think this is possible, but you can do something like this:
#brand-primary: #ff0000;
body{
&.page-2{
#brand-primary: #00ff00;
.yourclass{
color: #brand-primary;
}
}
.yourclass{
color: #brand-primary;
}
}
so .yourclass has a different color on body.page-2 but this is only possible within the scope.
but in this case it probably makes more sense to define a second variable.
You should use mixin with changing selector order technique instead of variable.
#brand-color-1: #ff0000;
#brand-color-2: #00ff00;
.brand-color() {
color: #brand-color-1;
.page-2 & {
color: #brand-color-2;
}
}
.my-brand-header {
.brand-color();
}
will be compiled to css:
.my-brand-header {
color: #ff0000;
}
.page-2 .my-brand-header {
color: #00ff00;
}
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 :)