I would like that a visitor on my site could change values of some LESS variables that I defined in my LESS stylesheets.
For example if I declared the following rule:
#color-of-text: blue;
body
{
color:#color-of-text;
}
Obviously, website has blue text. But I would like that a user could select (is not important in which way... a dropdown, or checkbox or whatever) a different value, changing for example #color-of-text from 'blue' to 'red', like I wrote "#color-of-text: red;" directly in my less file.
Obviously this change should happens on the fly, withour reloading the page.
How to obtain this?
You can't edit the LESS. LESS gets compiled down to CSS eventually and that's what's sent to your browser.
To answer your question though, you would use javascript and have it change the style property of the element on the page you wanted to change color based on user input.
If you want that color choice to persist over multiple pages loads / visits, that's another story.
This has nothing to do with less.
You could generate different css file changing color variables of same less and then ask to client which css it would see.
You can store the choice in a cookie and then print the desiderd file in PHP every request page of the visitor
$skin = isset($_COOKIE['skin'])? $_COOKIE['skin'] : 'default';
echo '<link rel="stylesheet" type="text/css" href="path/to/'.$skin.'.css" />';
During the select you can refresh the page or change the css via javascript.
Related
I wish to allow users to switch the entire color-scheme of my site with a buttonpress.
I have 2 separate .less files with the same global variables, but different colors. The problem seems quite simple.. "swap 1 .less file for the other". But how do I actually accomplish this?
Of course, I could alter the entire site element-by-element in the .js based on the state of a singleton, but that seems like a duct-tape-solution.
One possible solution by example: say you have a div element that you wish to color its background differently in each theme. Load both .less files and edit them like this (add the theme class to the body element that wraps the whole document):
theme-1.less
body.theme-1 {
div.address {
background-color: yellow;
}
}
theme-2.less
body.theme-2 {
div.address {
background-color: fuchsia;
}
}
Then provide a mechanism for the user to change the theme (e.g. drop-down menu). When the user selects from the menu - say for example changing from theme-1 to theme-2 - issue this JS:
document.getElementsByTagName("body")[0].classList.replace("theme-1", "theme-2");
Generically you can do it in more than one way:
document.getElementsByTagName("body")[0].classList.replace(<currently-selected-theme>, <newly-selected-theme);
or
document.getElementsByTagName("body")[0].classList.remove(<currently-selected-theme>).add(<newly-selected-theme>);
Because I'm using a logo in my header, I don't need the title-text. But I would like to have a browser-title.
So I need to set a title and have to hide it in the header - but how?
Possible also to hide the title text with a proper CSS display: none setting. It can be put into the conf/userstyle.css file, so it wont be overwritten by updates. The text resides still in the page but becomes invisible. It may improve the search-engine hits also, maybe.
Possible CSS code:
div.headings h1 span { display: none !important; }
I assume that your wiki looks like dokuwiki.org (meaning that you are using one of recent versions and default template). If not the approach still should be the same, search for $conf['title'] in your template.
There is a block in lib/tpl/dokuwiki/tpl_header.php:
// display logo and wiki title in a link to the home page
tpl_link(
wl(),
'<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
'accesskey="h" title="[H]"'
);
Remove <span>'.$conf['title'].'</span> from it.
Each update of Dokuwiki engine will overwrite this change. You'll need to repeat it manually after each update or copy paste doku template into a new one and update this new template manually.
Possible also to hide the title text with a proper CSS display: none setting. It can be put into the conf/userstyle.css file, so it wont be overwritten by updates. The text resides still in the page but becomes invisible. It may improve the search-engine hits also, maybe.
Possible CSS code:
div.headings h1 span { display: none !important; }
This is the good answer. It works for me.
For example, I have somewhat large amount of spans (over 300+) in one page, each span has {{expr}} binding to display its content:
<span>{{expr}}</span>
Right after page loaded, the literal {{expr}} will flash to display on the page before VueJS takes over and display the real binding value. This looks bad to client, is there a way to avoid it?
v-cloak is the HTML attribute you are looking for.
This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.
I am trying to implement a basic theme roller functionality using LESS CSS.
Suppose I have the following Less Code, which compiles to a .css file included in the page:
#main-background-color: #809BB8;
body
{
background-color: #main-background-color;
}
I would like to change the #main-background-color dynamically with javascript based on an user action (Color Picker) and compile the LESS code dynamically and refresh the styles of the page so that the user changes are reflected immediately in the browser.
Is this possible at all?
Please advise!
Thanks
you could try using less.js functions like:
less.refreshStyles()
or
less.modifyVars()
you can maybe read some more on this here: Dynamically changing less variables
Something along this lines with JavaScript and modifyVars might work:
var $picked-color = "#809BB8";
less.modifyVars({
'#main-background-color': $picked-color
});
Hello guys I have two small questions about my facebook application link and JS SDK. So let me explain:
1- Well as I understood from Facebook JS SDK, the should be left just empty. But still I am a little dizzy and I want to make sure whether we should put our page content into it or it should be left empty?
Please make me sure about it.
2- I have put some changes in my css and markup of my page but after one day I can not see some of the changes in my facebook application link.
How can I see the result of changes if there is such a way??
Thank you very much indeed.
Let me answer this for you:
1) Yes, It should be left empty and here's the info on why it's required quoted from JS SDK docs:
The JavaScript SDK requires the fb-root element in order to load properly and a call to
FB.init to initialize the SDK with your app ID correctly.
The fb-root element must not be hidden using display: none or
visibility: hidden, or some parts of the SDK will not work properly in
Internet Explorer.
The SDK inserts elements into fb-root which expect to be positioned
relative to the body or relative to an element close to the top of the
page. It is best if the fb-root element is not inside of an element
with position: absolute or position: relative. If you must place the
fb-root element inside of a positioned element, then you should also
give it a position close to the top of the body or some parts of the
SDK may not work properly.
2) It's most probably a cache problem, there's a similar question with an issue of css which has been answered previously: Caching for css content for iphone FB APP
Also to get your browser/visitors browser to re-fetch your CSS file, The trick is to pass a query param/variable at the end of the CSS file url like so: ?v=1
<link rel="stylesheet" href="css/style.css?v=1">
This will automatically make your browser or maybe even facebook to fetch your CSS file again with the new changes. Make sure to change the number everytime you update your files so you could see the changes instantly.