I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');
Related
I have multiple css classes that make up a button using SCSS.
.ghost-button {
// CSS goes here
}
.ghost-button-label {
// CSS goes here
}
.plus-circle {
//CSS goes here
}
Using Angular I can control the disabled state using the following feature.
[class.disabled]="booleanFlag"
I wanted to have a disabled state for this button with out having multiple disabled classes like so,
.ghost-button.disabled {
// CSS goes here
}
.ghost-button-label.disabled {
// CSS goes here
}
.plus-circle.disabled {
//CSS goes here
}
This is an example of what I am trying to do. This did not work for me.
.ghost-button .ghost-button-label .plus-circle-position .disabled {
//CSS goes here
}
Here is the markup I use for the button,
<div style="padding-top: 10px" (click)="handleClickAdd($event)">
<div class="ghost-button ghost-button-label icon-custom icon-margin plus-circle plus-circle-position" [class.disabled]="blockAdditions">
<div>
<div>Add</div>
</div>
</div>
</div>
Is there a way to do this? Thanks.
This doesn't work because it means each class is a descendant of the previous:
.ghost-button .ghost-button-label .plus-circle-position .disabled {
//CSS goes here
}
If you're trying to just select that one div with all four classes, just remove the spaces:
.ghost-button.ghost-button-label.plus-circle-position.disabled {
//CSS goes here
}
If you're trying to select any elements that have the disabled class plus one of the three other classes, then you use commas to separate the different combinations:
.ghost-button.disabled,
.ghost-button-label.disabled,
.plus-circle-position.disabled {
// CSS
}
Of course you could just select .disabled if you want this CSS applied to every element with the disabled class:
.disabled {
// CSS
}
Just be sure to take into account View Encapsulation. You may need to put this CSS in the global style file styles.css if this class exists in more than one component.
Just a note, you are not setting the disabled state here, you are adding a class with the name "disabled". disabled is a boolean attribute you can set via HTML, which you can then select with the pseudo-class :disabled.
button:disabled {
color: red
}
<button>Not Disabled</button>
<button disabled>Disabled</button>
If this is what you were actually trying to do then in Angular it would be:
[disabled]="booleanFlag"
You can target a disabled element with the :disabled pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
So depending on the relationship between your button/label/plus-circle you should be able to target those as well based on whether the button is disabled. For example, if the button and label are siblings you could do this:
.ghost-button:disabled,
.ghost-button:disabled + .ghost-button-label,
.ghost-button:disabled + .plus-circle {
// CSS goes here
}
That would only work if the label and circle were siblings that come after the button, if they are before the button, you can't select them that way.
I designed a site so that changing two user inputted colors should change the color scheme of the entire site.
What is the best way to accomplish this. I know that I would have to save the items in the database and pull every time the user logged in in order to implement the color scheme with every login.
But at the moment I am more worried about a live change as soon as the user changes the html color value.
I know of an option to where I add a CSS class to every component that would change such as ... .primaryColor and .secondaryColor. And then alter all of the elements with that class. Is there a better way with React or another CSS/Javascript solution?
Also another complication is that it would have to be in a way that when the user loads other components that have not rendered yet, the change is still in affect.
One possible solution is to use the <style> element coupled with dangerouslySetInnerHTML, like this. (Notice the backticks ` around the CSS - it's an interpolated string literal.)
const Theme = props => {
<style dangerouslySetInnerHTML={{__html: `
.styled { color: ${props.userColor} }
`}}
/>
}
Then a component that used the theme would simply be <div className="styled" />
I got the idea for this solution here.
If you use this method, be very careful you're using sanitized variables to create your CSS theme. Otherwise, there's potential problems with injection attacks.
I would use an event listener on the input, read the value, and if it matches whatever you want to trigger the color scheme change, apply the theme value to a data attribute on a root element and use CSS to control the color schemes.
var input = document.getElementById('input'),
body = document.getElementsByTagName('body')[0];
input.addEventListener('keyup',function() {
var val = this.value;
if (this.value == 'foo') {
body.setAttribute('data-theme','secondary');
} else if (this.value == 'bar') {
body.setAttribute('data-theme','primary');
} else {
body.setAttribute('data-theme','');
}
// ajax request to save theme pref in db
})
/* defaults */
body {
color: #333;
}
/* primary theme */
[data-theme="primary"] {
color: red;
}
[data-theme="primary"] p {
background: yellow;
}
/* secondary theme */
[data-theme="secondary"] {
color: blue;
}
[data-theme="secondary"] ul {
background: grey;
}
<input id="input" placeholder="enter 'foo' or 'bar'">
<p>
paragraph
</p>
<ul>
<li>list</li>
</ul>
you can easily do this using js.
just add your class .primaryColor, .secondaryColor with jQuery addClass() Method.
select the element
example :
$(selector).addClass(classname,function(index,currentclass))
more example :https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_addclass
How to customize the Semantic UI buttons(background-color, border-radius and all)
<button class="ui button create-new-menu-btn">Create New Menu</button>
. create-new-menu-btn {
border-radius: 0;
background-color: red;
}
The above code is not working
You need to make your custom properties more specific than the ones semantic is using. How specificity works (simply) is that when there are competing property values on the same element, the one that is more "specific" is chosen.
Read this to know more about CSS specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
For your particular problem:
One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:
Method 1
#bodyid .create-new-menu-btn {
//Properties
}
Another way is to simply add an id to the element you want to select
Method 2
#create-new-menu-btn {
}
Method 1 is preferred when you want to apply the properties on multiple elements (hence the use of a class) (Like multiple comment buttons on a page)
Method 2 is preferred when there is a single element to be selected. (Like a login/signup button in the header)
You can also add semantic ui's classes before your own for specificity.
For example : if your className is .create-new-menu-btn you can add in css or scss before ui.button or any other semantic ui specific clas that you neeed. So in the end, your class definition in css would look like this:
ui.button.create-new-menu-btn {
....
}
If using JSX, you can use inline styling for the targeted elements
Example:
<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>
#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;
}
It will target all button with ui class.
Hope It will be useful :)
Put .ui.button infront of your class name create-new-btn. It should look like below
.ui.button.create-new-btn {
//Your css code
}
Then in your html/jsx template you can use the class name create-new-btn like below:
<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>
I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.
One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.btn-red{
background-color:red;
.radius;
}
.btn-green{
background-color:green;
.radius;
}
...
When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.
I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?
<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>
The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.
// Abstract placeholder.
%radius {
border-radius: 5px;
}
// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {
// Color modifier.
&-red {
#extend %radius;
background-color: red;
}
&-green {
#extend %radius;
background-color: green;
}
}
The CSS output will be:
.btn-red, .btn-green {
border-radius: 5px;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.
Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.
Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.
That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.
So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.
There are several benefits.
You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.
You can avoid repeating yourself.
#radius-size: 5px;
-webkit-border-radius:#radius-size;
-moz-border-radius:#radius-size;
border-radius:#radius-size;
You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts.
.radius(#radius-size) { ... }
Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.
for example:
you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:
#myinput {
&:valid { .has-success; }
&:invalid { .has-error; }
}
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});