I'm designing a website with react, and it's requested that it has an infinite number of themes.So I know how to set a few themes in the CSS or SCSS files and then switch the classes to get the themes whenever wanted. But my problem here is , now I have to get a palette of colors from an API. Now I don't know how I can assign these colors which I fetch in the js file, to a CSS file, since that's where I need to define the classes.
If you're trying to create themes, one way to do this would be to use CSS variables. Set each of your colored elements to use var(--some-variable) and then define it in your JS using document.documentElement.style.setProperty(name, value) after you fetch it from your API. This is roughly equivalent to using the :root{ } rule in CSS. In fact, you could use :root to set a default theme and then overwrite it in your JS after the fact.
In this snippet, I dynamically change the color of the <p> element from red to cyan after the window loads using this exact method.
window.onload=function(){
document.documentElement.style.setProperty("--myColor", "#0CC");
};
:root{
--myColor: #f00;
}
p
{
color: var(--myColor);
}
<p>Hello</p>
Related
I am trying to create a tree structure list for one of my tasks. I am planning to use JS-TREE plugin for this purpose. Still the plugin comes with lot of features, I have to do few styling changes to match the given design.
This is the code pen link which I tried so for,
1. Change the plus-square with angle-down icon
2. Change the minus-square with angle-up icon
3. change the square-filled-grey icon(will come if any few of child nodes selected) with minus-square icon
4. Hover blue highlighting not needed
Any way to customize this? OR Any super hit plugins from your experience?
So, it looks like they're using a sprite map and changing the background position to select which icon appears
I was able to move this
.jstree-proton .jstree-anchor > .jstree-undetermined {
background-position: -38px -5px;
}
This satisfied #3. If you inspect any of the icons (jstree-icon class), you'll see a background assigned to 32.png. You'll have to change the positioning for icons that exist there. For the angle up and down you'll have to hide the background image they supplied and insert your own icons
Why don't you try to create a css file and overwrite the jstree class setting "!important" at the end of the rules you want to change? For me it worked because I needed to change the jstree-rename-input class like this.
.jstree-rename-input {
border: none !important;
width: 250px !important;
}
As far as i investigated, this is also the official answer provided by jsTree creator.
I have a page where the user inputs a twitch username. It then creates an iframe using javascript with the persons twitch details (name, online or offline etc..) they can then use this iframe on their own website.
However, the style of the frame is determined from a CSS file. What I want is that for the user to use a color picker to pick the background and font color so they can have the iframe match their own website theme.
How would I go about this? I wouldn't want to edit the CSS file because this will change it for everyone using the iframe on their website.
I have seen a website where they create a directory specifically for the colors chosen e.g www.mysite.com/01234/098766/username. But don't know how this is achieved.
How would i go about this?
The style can be modified from js, or you just ship another css file with userspecific colors that overrides the other one:
<link type="stylesheet" href="yourstyle.css" />
<style>
* {
color: #333 !important;
}
</style>
I have seen a website where they create a directory specific for the colours chosen e.g www.mysite.com/01234/098766/username
They arent directories, thats routing. The server takes the requested path, splits it up and takes the parts as arguments. How that can be done depends on your backend.
You can use a input color picker
function colorSelected (element) {
document.body.style.background = element.value
}
<div>
Pick a color <input onchange="colorSelected(this)" type="color">
</div>
I have a button, which when clicked loads an additional CSS file, that overrides a great part of the basic CSS files. (this is for accessibility purposes if you wonder)
Let's say I have a background and background-color properties used in multiple selectors for input[type='text']. I want to reset/delete those. I DON'T want to set a new value for those background properties, I want to remove them, so that the browser will render everyting as it would by default.
The reason for this is because in high contrast mode with black background color to the body in Firefox, any background set to input or button will override it with a value equal to the text color which will make the value of the input or the button unreadable. But that's another story...
EDIT: Since everybody so far is telling me to set some new property to those, I'm writing it in bold big letters - I DON'T NEED TO SET NEW PROPERTY FOR background. :) The reason behind that if that property is present Firefox defaults it to black if the background set in the high contrast mode is black as well. To test this, go to Preferences -> Content -> Colors and check Allow pages to choose their own colors, instead of my selections above. Here's how my options look.
You can remove the original stylesheet. Just assign it an id and use jQuery.remove(...).
The alternate solution is to alter the first stylesheet to use some kind of namespace+, for example:
/* these are the rules that you want to be removed */
.stylesheet1 { }
.stylesheet1 h1 { }
.stylesheet1 p { }
.stylesheet1 a { }
.stylesheet1 input { }
/* these rules can co-exist with the next stylesheet */
nav { }
article { }
aside { }
section { }
Inside your HTML add the stylesheet1 class to body. When you load the other CSS file (presumably via JavaScript) then you remove this class. All namespaced rules will become ineffective.
* CSS preprocessors e.g. SASS and LESS make it easier for you to manage these rules.
Do a css reset/normalize at the beginning in your first css file. Then at the beginning of the second one do it again.
You can leave out the first reset, but this will give you consistent results.
It sounds like the best solution for you is to have two different CSS classes targeting a single input, and toggle back and forth between the two. There are several ways to do this:
CSS:
input[type="text"].a {...}
input[type="text"].b {...}
Here we have two different classes, a and b. When defining the input initially, set class="a". We'll then swap that with b when the button is clicked. Again, there are several ways of doing this:
jQuery:
$('.a').click(function(){
$(this).removeClass('a').addClass('b');
});
Plain JS
var button = document.querySelector('.a');
button.addEventListener('click', function(){
button.classList.remove('a');
button.classList.add('b');
});
This is the generally preferred method for achieving this kind of behaviour. It adheres strictly to standards, in that it separates logic, markup, and presentation into their respective pieces.
Note: The plain JS method listed above uses some pretty modern native JS code. Take a look at You Might Not Need jQuery to find suggestions for making this functionality cross-browser.
Instead of adding or removing properties to elements, I think the better way to do it is to put these extra properties in a CSS class and then add or remove this extra class to the elements as needed. And if you need override, then use !important. Now it's just about add/removing classes.
Here's an example in jQuery
.MyControl{background: blue;}
.MyControlAccessibility{background: red !important;}
$(SomeControl).click(function () { $(this).addClass('MyControlAccessibility'); }
$(SomeControl).click(function () { $(this).removeClass('MyControlAccessibility'); }
Using a global class on the body is good as mentioned.
Another way could be to put your light and dark "theme"-specific styles into separate stylesheets from the common CSS and then disable the one you do not want. This will avoid conflicts and needing to use !important, and you can keep things clean without having to hack away at various bits of jquery.css().
For example
base.css
a { text-decoration:none; }
dark.css
body { background-color:#000; }
a {color:#fff; font-size:1.2em;}
light.css
a {font-size:1.5em;}
Note that light.css has no properties for background-color etc. so when they switch from dark to light, the defaults will be used again.
To do the switch, you can do something along these lines:
for (var i = 0; i < document.styleSheets.length; i++) {
var ss = document.styleSheets[i];
// some browsers store in url, others in href
if((ss.href || ss.url || '').indexOf('dark.css') > -1) {
ss.disabled = true;
}
}
By disabling instead of removing the current one, it should be easier to switch between the two.
I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC
I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:
There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }
Hey, so I'm trying to apply some custom css to a ToolbarView in SproutCore. I've managed to get a CSSE file loading by saving it in layouts/english.lproj but the styles I write are being overridden by the ones provided by SproutCore. This only happens for styles provided by the framework. In my case this would be the background-image element. If I view the page in Chrome's developer tools (below) you can see that both styles are being applied but because my stylesheet loads afterwards it is overridden. If I uncheck the background-image element in Chrome, my background can be seen.
Here are the things that I have tried:
Giving my Toolbar an extra CSS class and targeting that (in my case AppToolbar)
Targeting every CSS class including app-toolbar (.sc-view.sc-toolbar-view.AppToolbar)
CSS !important
Lots of Googling and Reading Documentation
Has anyone else had this problem? any help/suggestions would be greatly appreciated.
Screenshot posted here
Try using the background property instead of the background-image property.
A quick solution is to give your mainPane a layerId of "myApp" and prefix all your css properties with "#myApp":
#myApp.sc-toolbar-view { ... }
A cleaner solution is to give to your app a theme: http://guides.sproutcore.com/theming_app.html.
After that, you will have to prefix your css class with $theme:
$theme.sc-toolbar-view { ... }
Don't forget that you can use scss which is integrate to Sproutcore. This way you can encapsulate all your rules like this:
$theme {
.sc-toolbar-view { ... }
.button { ... }
...
}
This allow you to write $theme only once (per file) and all your css rules will have priority over the one provided by SC.