I'm developing my own site and it supports multi themes for example (light & dark) theme when you click on option it apply theme and no problem to face but when you reload page you have then to choose theme again.
I've tried to fix that by adding key and value for local storage and I saw a lot of tutorials about it and no progress.
HTML Code
Head
<link rel=stylesheet" href="view/light-view.css">
default theme it will changes after user choose theme and replace light-view.css with theme name.
Body
<span class="mode-toggler" data-value="view/light-view.css">Light</span>
<span class="mode-toggler" data-value="view/dark-view.css">Dark</span>
set data-value into css default theme after click I achieve this by jquery
jQuery Code
$('.mode-toggler').click(function() {
// Change attribute of css default theme by checking for statements with href attribute contains view keyword
$("link[href*='view']").attr("href", $(this).attr("data-value");
});
So firstly you need to set in localstorage, the user selected theme:
$('.mode-toggler').click(function() {
// Change attribute of css default theme by checking for statements with href attribute contains view keyword
$("link[href*='view']").attr("href", $(this).attr("data-value"));
// set localstorage
localstorage.setItem("selectedTheme", $(this).attr("data-value"));
});
And when you load the webpage next time, you will have to check for selectedTheme even before your page has loaded. Just include this script in you head tag.
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = localstorage.getItem("selectedTheme") || "view/light-view.css";
document.head.appendChild(link);
</script>
But I am afraid that this might lead to a flicker because at first, the raw html(without CSS) will get painted in your browser and then the whole of CSS gets inserted and DOM repaints with CSS. You can solve this by removing theme related CSS in a separate file(say darktheme.css) and put all other CSS in a constant css file(styles.css). While the page loads, load it with styles.css and load the *theme.css through script tag.
Related
I'm looking for a way to include parts of one page into another page. The issue that comes up is that the other page has different styling than my main page. Is there a way to use the other style for some of the content and keep the old style for the already existing content?
For example: I have a navbar that I want to keep on every page, but my blog.html page has different styling than my navbar. How can I keep my navbar styling without affecting the blog.html style?
Yes! you can maintain both styles in the same page. But condition is that both styles elements (tag classes and id) properties can't match each other style. you must have to custom style of the included page. This style may be inline or included like css file.
you can include css style file like this:
<link rel = "stylesheet" type = "text/css" href = "myStyle.css" />
and inlcude php file:
include('header.html);
Or
include('abc.html);
Create a stylesheet and refer to that on all the webpages you want to copy the style on. If you want to overide a part of the style, write a the new piece of code after reffering to the stylesheet.
<link rel = "stylesheet" type = "text/css" href = "myStyle.css" />
I am working on a shopping cart on Netsuite coded with nested tables... I know it sucks.
Because I only have access to fields to customize the website I need a JS snippet to be able to load a specific CSS file for the shopping cart (to avoid styling the rest of the website)
I have never done that before, here is how I would start:
<script type="text/javascript">
var path = window.location.pathname;
if(path.indexOf('/Cart') !=-1 {
// load css file
}
</script>
What code would do that for me?
Aside from closing your if(... with a ), this should get you going:
var styles = document.createElement("link");
styles.rel = "stylesheet";
styles.type = "text/css";
styles.href = "file.css"; // your file's URL
document.getElementsByTagName("head")[0].appendChild(styles);
While testing the url does work there is a better way to add tab and category specific markup.
In your website theme in the "Additions to Head" section add a tag <TAB_ADDONS> and add that to the site builder Tags but with a blank body
Then go to your list of tabs and find the shopping cart tab.
Edit it and select Tag Overrides
find TAB_ADDONS and enter:
<link rel="stylesheet" type="text/css" href="file.css">
you'd use the root relative url for the href.
This keeps your theme much cleaner and allows arbitrary code inclusions.
I have several CSS files generated in PHP.
I change the current CSS file with a click event.
But it make a nasty white flash effect between each change (only on the first load of them, the next times they are in cache and there is not bad effect).
How could I preload (but not display) this CSS file by the click event ?
$('.button').click(function(){
// Here I would like to preload the file
...
// Here I display it
$("#css").attr("href","css.php?id="+$(this).attr('id'));
});
EDIT > Solution
/* HTML File */
<link type="text/css" rel="stylesheet" href="css.php?id=1" id="css"/>
<link type="text/css" href="css.php?id=2" id="nextcss"/>
/* JS file */
$('.button').click(function(){
// Preload the file
$("#nextcss").attr("href","css.php?id="+$(this).attr('id'));
/* Here a lot of code with ajax...*/
// Here I display it
$("#css").attr("href","css.php?id="+$(this).attr('id'));
});
I'm assuming this "flash effect" means that, as the CSS is being loaded, the new rules are being applied incrementally, but you want all them to be applied at once. Is that right? Maybe you could append the newly created css element to the dom (ensuring it will start loading), but adjust its attributes so it won't be interpreted as a stylesheet (for instance, not using rel="stylesheet"). When it's done loading, you adjust it again with the right value, that should make the whole change appear instantly.
Another option (though that will require changing your css) would be creating a class, to be applied to the body, and making sure every rule references elements inside body.myclass. When the css is done loading, apply that class to the body.
I need to use an exotic font with tiny_mce, I edited the theme_advanced_fonts property and I am using the content_css property to link an stylesheets that defines my font family.
I can select the font from the menu but text is not displayed with that, so I have to edit the source html and the style property for the text to be rendered with the fontface I want.
Thats not a nice thing to ask to my clients.
What can I do?
I suggest you write your own plugin using a dropdown select list and updating the iframes head with the newly choosen css (font).
The code to set the css could look liek
iframe_id = ed.id;
with(document.getElementById(iframe_id).contentWindow){
var h=document.getElementsByTagName("head");
var newStyleSheet=document.createElement("link");
newStyleSheet.rel="stylesheet";
newStyleSheet.href="http:myerver.com/css/my.css";
h[0].appendChild(newStyleSheet);
}
Is it possible to have 3-4 CSS on a page, and then on any event, say click, change the css for entire webpage. This way we can give our user the ability to change the theme. I know we can change the css of an element by:
$("#myElementID").removeClass("class1").addClass("class2");
Yes, it is possible. Typically what you would do is write a JavaScript function that will change, or add, or remove a style sheet from the <head> of the document. To make the experience a little better you'll typically store the user's preference in a cookie. There's an article on A List Apart that show how to implement this.
And of course, you can do this with jQuery... you may want to check out the source of jStyler.
The CSS Zen Garden (see the fifth question) ended up deciding that the easiest way was just to refresh the page and set a new CSS server side.
CSS is emdeded to DOM over 'link' tag, so you can locate this link and add/remove
Following code shows how to remove and add new one (I'm using MS AJAX see method $get, but you can replace it with pure DOM or other dialect):
var head = document.getElementsByTagName('head')[0];
var oldLink = $get("nameOfLink", head);
if(oldLink!=null)
head.removeChild(oldLink); //remove old entry
var s = document.createElement('link');
s.id="nameOfLink";
s.type = 'text/css';
s.rel="stylesheet";
s.charset ='utf-8';
s.href = "http://your-provided-url";
head.appendChild(s);
Usually best to load an external stylesheet (append a <link>): http://snipplr.com/view/3873/failsafe-load-for-attaching-stylesheet/
But if you need to create a bunch of styles on the fly, you can also build and append a <style> node to the DOM: http://jonraasch.com/blog/javascript-style-node