define a custom css class that uses bootstrap classes - javascript

All,
Is there any way to define a custom CSS class that uses existing bootstrap classes?
For example, consider the following HTML snippet:
<div class="text-primary center-block">Here is some text</div>
Bootstrap will automatically make it blue and centered and displayed block. But adding all of those classes is a lot to remember. Can I just use my own class:
<div class="my_class">Here is some text</div>
And somehow in a CSS file add those Bootstrap properties?
The only solution I can think of is using JQuery like this:
$(document).ready(
function() {
$(".my_class").each(function() {
$(this).addClass("text-primary center-block");
});
}
);
But is there a better solution?

Hi yes there is a better way, if you are using the Less Source version of Bootstrap you can setup Bootstrap's Classes as Less Mixins by importing the Less files as a Reference
Which would mean you could setup something like this:
.custom-class { .text-primary; center-block; }
This post discusses the technique in detail:
http://transmission.vehikl.com/using-bootstrap-as-a-semantic-mixin-library/

You can do the following: but this is work with SCSS not with the standard CSS
.my_class
{
#extend .text-primary;
#extend .center-block;
}
Hope it helps!

Related

If element has class, apply class to body

I have a website where each section displays as a full screen panel.
I would like to style all the other elements on the page according to what panel is displaying.
For example, if the panel with the class .style-reality-green-bg is active, I would like to style the navigation and other items to compliment the green.
Currently when you scroll, the full screen panel has a constant class called .onepage-section. When you scroll between panels, a second class is added depending on which panel is currently on screen.
This is handled by the theme, but I set the panel classes
At the moment I have a few sections which have classes such as...
.style-reality-green-bg
.style-rebel-red-bg
.style-rethink-blue-bg
I can't style all the elements I need to because they are not children of these panels so I was trying to find a way to add the same class to the body when each panel was active. So - if .onepage-section has a class of .style-reality-green-bg add the class .style-reality-green-bg to the body as well.
I have done some digging but I can mostly only find examples for 'click' actions
My latest attempt is
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$(this)body().addClass('style-reality-green-bg');
}
But it just returns an error saying
$ is not a function
****** EDIT
To clarify
What I am trying to achieve is...
If the full screen container has a class of
.onepage-section
AND a class of
.style-reality-green-bg
add
.style-reality-green-bg
to the body, and so on
I'm not sure if that was clear
The reference to body seems malformed, the code should be
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
if $ is still undefined, do you have jQuery included? https://jquery.com/
Your error means that you dont include the external Jquery Library. You can use for example a cdn to include jquery. Add this line above your closing body tag. Good would be to inlcude jquery before your Jquery command is calling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
It looks like you're trying to use jQuery but haven't imported the library. For that, see https://jquery.com/download/
Additionally, in your code snippet you should select the body with $('body').
Alternatively, if you want to use vanilla JavaScript, you can use the following snippet:
if (document.querySelector('.onepage-section').classList.contains('style-reality-green-bg')) {
document.body.classList.add('style-reality-green-bg');
}
For information on classList, see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
$(this)body() doesn't exists. Better write this instead:
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
And rememer to include jquery library.

How to set css rules for combination of class?

I have a div tag as
<div class="one two three">foo<div>
<div class="one two four">bar</div>
i am setting the css by using javascript,I can set styles as
.one.two.three{color:red;}
.one.two.four{color:blue;}
But can any one tell me how can i use $(.class).css({"color":"blue"}); for combination of class
Make sure you have loaded jQuery, as the $(selector).css(...) function you say you'd like to use is jQuery-specific.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Set the style – making sure to wait until the DOM is ready before you try manipulating the styles:
<script type="text/javascript">
$(document).ready(function() {
$(".one.two.four").css({"color":"blue"});
});
</script>
You can read all about everything I've described in the jQuery Getting Started guide.
Working demo: http://jsfiddle.net/4b2n97hq/
If something isn't working, open your browser's console and look for error messages that will help work out the problem.
same as with css selector:
$('.one.two.three').css({"color":"blue"});
will select all elements that have all 3 classes.
You can also select just by the classes they have in common:
$('.one.two').css({"color":"blue"});
check this fiddle.

How to include CSS for a specific part of the page

In my website, the users have to enter markdown in a textarea, for which I am using a markdown editor. The problem is: it uses icomoon font, and my websites too. Both uses the same class to define the fonts, but not both uses the same icons. The question is simple: is there a way to define the editor.css for a special div?
Like that:
<div css="editor.css"></div>
Give the DIV a Class and then add a CSS file like this:
.markdown
{
color: red;
}
If you import a new css dynamic, the old styles will be overwritten.
Some help, for dynamic css loading: How to apply inline and/or external CSS loaded dynamically with jQuery
Namespace your editor styles
You can add a selector that namespaces your editor and allows you to style it:
<div class="editor-style">
<div id="cool-custom-editor">...</div>
</div>
In your css:
.editor-style .icon-thumbs-up { color: green; }
Using Scoped Styles (needs polyfill)
As mentioned in #adeneo's comment below your question there is the option of using scoped style tags.
Supposing your editor looks like this:
<div id="cool-custom-editor">...</div>
You can apply a specific style using the scoped attribute like so:
<div>
<style scoped>#import url(editor.css);</style>
<div id="cool-custom-editor">...</div>
<div>
Caveats
According to can I use the scoped attribute is only natively supported by Firefox 26+.
If you want to use it you will have to polyfill:
Plain JavaScript polyfill
jQuery scoped plugin
Further Reading
HTML5 Doctor - The scoped attribute
CSSTricks - Saving the day with scoped styles
HTML5Rocks - A new experimental feature - Scoped Styles
You dont need multiple files. You can give the div an id or class like so
<div class="div1">
<span></span
...
</div>
and now in you css you do this
.div1 span{
font:(whatever font);
}
I don't think so, no. At least not without using any js workarounds. The best solution would be to use kind of namespace for user-specific css classes.
No you can't do that.. I think you should solve the conflit by changing the icomoon class names in this file.
OK solved: renaming the classes in editor for icomoon was a lot easier than I dared tough.
not a good way but it can help:
$("[css]").each(function(i){
var elm = $(this);
$.when($.get(elm.attr("css"))).done(function(response) {
var newresponse=response.replace(/(.+{)/gi,".customCss"+i+" $1");
elm.addClass("customCss"+i);
elm.before('<style>'+newresponse+'</style>');
});
});

Can I have a css div class mock a different css div class?

I just started using bootstrap for my site. I love the look and I want to make some changes to a ton of different blog post to include the bootstrap style. I don't want go through hundreds of post to change the div's class element. Can I do something like this:
<div class="important_note">
this is a old note that I want to use bootstrap styling on.
</div>
css:
<style>
.important_note{
mimick(.alert)
}
</style>
alert is a bootstrap styling.
I apologize if this is a simple question, but web dev isn't much my thing. I also couldn't find any similar questions. Thanks for your help!
with css you can do the following:
.important_note, .alert{
//styling
}
this will apply the same styling to important_note and alert classes
Without "upgrading" your CSS, if it's just about adding a class to each affected element, you can use a small script:
[].forEach.call(document.getElementsByClassName('important_note'), function(node) {
node.classList.add('alert');
});
jQuery equivalent:
$('.important_note').each(function() {
$(this).addClass('alert');
}

styling external widget

My website has an external widget that displays a table.
The widget comes with some inline CSS. Is there a way to remove this CSS before appending the widget to my page, so that only my css file rules will apply?
The markup looks like this:
<div id="widgetContainer">
<script language='javascript' src='http://www.esake.gr/scripts/create_widget.php?pw=1&maw=242&fof=Verdana&tifs=14&tic=3A3A3A&tibc=FFFFFF&dafs=12&dac=3A3A3A&dabc=FFFFFF&ces=0&cep=1&langid=gr'></script>
</div>
You can do this using jQuery,
Assuming you'd have a parent container for your widget, you could do the following,
$("#parentContainer").children().removeAttr("style");
Just created a quick mockup here: http://jsfiddle.net/j3GPL/
your best bet will be to override the css. e.g.
td { background: #f00!important;}
see here for an example.

Categories

Resources