I am developing a website and i want to allow the user to switch themes (mainly colors,fonts etc, not layout).
My idea is to have a class on the body, say theme1, and then put all styling under that class:
.theme1{
//less code here
}
.theme2{
//less code here
}
That way, in order to switch theme, all I have to do is replace the class on the body.
Is that a good solution, is there a better way?
If you're using LESS then it's pretty straightforward to wrap all your styling in a
body.theme-class { }
selector.
This seems reasonable; it makes changing the theme a simple case of changing the class on the body tag.
Related
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
I have managed to embed my extjs4 panel inside an existing extjs3 application.
I want to inherit the existing css colour schemes for panel headers etc.
But my extjs4 components are 'sandboxed', therefore using the .x4-* namespace for css.
How can:
my-styles.css
.x4-tab { some-stuff }
inherit from:
existing-styles.css
.x-tab { foo: #FFF }
Is this possible? cheers
You can grab all the existing css rules that have '.x-' in the selector and create new rules using '.x4-'.
var newRules = [];
Ext.Object.each(Ext.util.CSS.getRules(), function(selector, rule) {
if (/\.x-/.test(selector)) {
newRules.push(rule.cssText.replace(/\.x-/g, '.x4-');
}
});
Ext.util.CSS.createStyleSheet(newRules.join(' '))
While this is technically possible to do, the results would not actually make sense unless you manually go through each component and override the classes to have the correct css references if they even exist (and you would have to create others manually). This is because Extjs 4 does not work the same way in a technical sense for css namespacing and classes as Extjs 3. You could manually change all the css classes the components are using by overriding their component classes, but this is just not worth the time. What you are trying to do can not be done without a huge amount of effort, and it is just not worth it.
In my site I am stick with some CMS. In my cms there is some sticky layout.
Now My client needs two different look on it.
So when I am on "homepage" my DIV class test show different and when I am on other page so that same class work different.
This is for home page
.test {
some data
}
This is for Other Page
.test {
some data
some data
}
So is there any way to make condition in css that if my URL is homepage so call this otherwise call this.
You should add a custom class on your body, like the page name.
<body class="home">
...
</body>
<body class="my_page">
...
</body>
Then you can have a different style for each one.
.home .test {
background: red;
}
.my_page .test {
background: blue;
}
You can't use CSS to detect the URL. So, you'll need to detect the URL with JavaScript (like this), or better, detect it on the backend.
Same css wont work differently for different pages(URLs), One way you can do is changing the inline styles with JavaScript. But it will be painful if you suppose to change a whole style-sheet.
Other way is, it is more than detecting the URL, you need to change the style-sheets dynamically for different pages. Different style-sheets may have same classes but with different styles.
Therefore, create separate style-sheets and apply dynamically.
You can get some idea about changing style-sheets dynamically here
You could use JavaSctipt to detect the URL, and then again use JavaScript to add an extra class to the body if you are on the home page. You then write separate CSS styles for elements contained within this new class.
How do I override the css of a fancybox?
I'm building a website that uses fancybox on two different pages, and I want to override the fancybox css on one of these pages so the arrows are pushed outside of the box.
IE I would like to impart these properties on the fancybox:
.fancybox-prev {
left: -80px !important;
}
.fancybox-next {
right: -80px;
}
I can't figure out how to accomplish this and solutions to other relevant stackoverflow problems don't work. I'm sure there's a simple way to do it.
Can anybody help me out?
$('.fancybox-prev').attr('style', 'left: -80px !important');
$('.fancybox-next').attr('style', 'right: -80px');
You have to remember about hirarchy of the CSS. Inline CSS are the most important ones, external CSS will be read second.
When it comes to the latter, they are read from the top of your CSS file. So writing the style, which you want to use to override a previous one, below, should do the work just fine.
Secondly, you can always use jQuery to do that. ShaggyInjun gave a good example. You should be able to do that by using $(selector).css();.
if using fancybox v1.3.4 check:
http://fancybox.net/faq No.8 .... it also might be useful to check this.
if using fancybox v2.x check :
https://stackoverflow.com/a/8672001/1055987
Basically, you have to set a CSS inline declaration AFTER you have loaded the fancybox css file in order to override those properties.
I'm currently developing a widget that can be embedded within a page. However, when embedded, it affects the style (font, text, layout, etc.) of the page it is embedded in.
I wonder how Clearspring and other widget frameworks encapsulate their widgets so as not to affect the embedding page.
Thanks.
Make your widget, say under one div with a unique Id (or class if there will be multiple) that is least likely to clash with others on the host page. A good example might be #company-widjet-name. See how jQuery UI does it (.ui-widget input).
Then you might need to perform a sort of localised reset, to avoid the parent page's CSS from stuffing up your design. Modify something like Eric Meyer's reset to suit. Please avoid the #uniqueId * { padding: 0, margin: 0 } as it can cause headaches.
As long as you do
#uniqueId a {
property: value;
}
The specificity should be strong enough to style the elements correctly without letting the host page's CSS from changing it unintentionally.