How can I create and load a color scheme on my HTML site using CSS?
I have base.css green.css and orange.css. Now, when site is loaded default color scheme is green, but how to change it to orange.css on the client side?
I want each user to choose color scheme suitable for him. Also the choice must be saved for next visit of this person on site. Something like this in that IPBoard skin (feature called "Color themes") http://www.skinbox.net/skins/velvet/
If you're looking to swap stylesheets on the frontend, and want to save the preference, you can do something like this (using jQuery for simplicity):
In the <head>
<link id='theme' href='green.css' type='text/css' />
In the <body>
<a id='green' href='#'>Click here for green theme</a>
<a id='orange' href='#'>Click here for orange theme</a>
In the javascript file
$(document).ready(function(){
if( localStorage.theme )
$('link#theme').attr('href', localStorage.theme);
$('#orange').click(function(){
$('link#theme').attr('href', "orange.css");
localStorage.theme = "orange.css;"
})
$('#green').click(function(){
$('link#theme').attr('href', "green.css");
localStorage.theme = "green.css;"
})
});
The above code would output two links which switch a CSS file's location on click, thus changing the theme. It also saves the last selected theme in localStorage so that it's remembered.
In general you should do this on the serverside end of things - memorize preferences using cookies or sessions (and/or database tables behind them) and then just generate the correct stylesheet reference in your HTML.
IPB does the same internally, it stores your preferences in a database table and then renders the correct <link rel="stylesheet"> element in its template engine.
Alternatively you could do it completely in Javascript, loading stylesheets on demand, but that is both an advanced topic and generally an inferior solution to a solid serverside implementation.
You could store the default css color scheme file path in a cookie when your index page is loaded, if it is not already set.
Then when you are declaring your css file, simply do;
<link rel="stylesheet" href="https://[YOUR_DOMAIN]/themes/[COOKIE VALUE].css" />
You could then have a change theme button which when clicked will access and change that cookie value to the new theme css file path.
Use Javascript to load selective css onClick.
OR
Use jQuery to change color scheme onMouseClick.
Related
I working on an ASP.NET Core project. Is there any way that I can manipulate html, css, or javascript that is in my wwwwroot file?
For example I have class Uptime, that only contain property that return true or false.
Is there any way that I can change for example css in my html page (if is true I want for example to change color to red of my element in html(css)).
One way to include the CSS files in #section in the View and set a condition on the model property value.
#model ColorViewModel
#section styles{
#if(Model.IsRed)
{
<link href="~/css/red.css" rel="stylesheet" />
}
else
{
<link href="~/css/green.css" rel="stylesheet" />
}
}
I beleive that there is no special API for manipulating wwwroot folder in asp.net core. So you can use a common System.IO.FileSystem package.
Note: I wouldn't recommend to use this approach for your needs. Static files should be static. You need to consider change css prop/class for element depending on Uptime property via javascript or return prepared markup/css/js from your controler.
I am a technical writer and in the process of importing our content (HTM) into a new platform (Still HTM format). During this process I also want to use Prettyphoto to give users the ability to click on screenshots to vew a bigger version.
I have this now in my html code:
<a rel="prettyPhoto" href="images/xxxxxxx"><img src="images/23456.png" class="screenshot" alt="some alt text" />
There are thousands of files and each file could have many such images in them. where the name of the image changes but the href="images/xxxxxxx is the same
I need the xxxxxxx for each instance to be replaced by the png filename 23456.png or whatever that may be.
Is there an easy way to do this and how?
Thanking all in advance
You could use jQuery for that. The function loops all items with the class screenshot. Read the src property and puts that in the parent href.
<script type="text/javascript">
$(document).ready(function () {
$('.screenshot').each(function () {
$(this).parent().prop('href', $(this).prop('src'));
});
});
</script>
However this is no SEO friendly. If you want the href to be available in the source you are gonna need a server side solution with some programming.
I'm working with materialize and I'm trying to not touch your code, so that I can just upgrade it when a new version arrives, but I want to change the primary color and I can't find an easy way to just switch the whole thing to say the blue palette.
I heard about sass but I don't know how to use it
This is my CSS and JS file how to reuse it
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="sass/materialize.scss">
<script src="js/bin/materialize.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Using sass is very easy, install sass cli in your system
gem install sass
The base color you want to change was inside the below folder
materialize-src/sass/components/_color.scss
Do the required changes
just run the below code in terminal
sass materialize.scss materialize.css
RUN while you are inside the scss folder of the materialize-src
materialize-src/sass/
replace the newly created materialize.css file in your existing project.
You could even create a minified version of your new file by using https://cssminifier.com/ and save file with name materialize.min.css
Fore more reference on sass please look into the following link SASS Simple DOC
UPDATE - as per request
Give me the color codes as per your requirement by replacing the below i will generate your file by the same procedure i have explained above.
$teal: (
"base": #009688,
"lighten-5": #e0f2f1,
"lighten-4": #b2dfdb,
"lighten-3": #80cbc4,
"lighten-2": #4db6ac,
"lighten-1": #26a69a,
"darken-1": #00897b,
"darken-2": #00796b,
"darken-3": #00695c,
"darken-4": #004d40,
"accent-1": #a7ffeb,
"accent-2": #64ffda,
"accent-3": #1de9b6,
"accent-4": #00bfa5
);
Did you try to use like this by defining it in head tags
<style>
* {
background-color: yellow;
}
</style>
IF you use this universal styling it will applied on your whole page in same way you should use if you using paragraphs heading tags or some thing else just define your tags in this curly brackets with your own styles .
i know that you can have style-sheets in the head of a page, but i like to have them in a separate file. Now i'm working with a single page application.
Well in an SPA the content is dynamic, right? so i didn't want to import all the style-sheets in the head section with the link tag. Can i somehow import style-sheets as-and-when i need them?
I mean, can i have a link in the body, such that whenever my SPA loads some dynamic content, a style sheet also gets loaded? Such that i dont have to load all the stylesheets even when the dynamic content is not loaded..
I stress again: Whenever the content loads, the styles load.
I know i can do it with the help of an inline style like this:
~PSEUDO CODE
<tagname style="somestyle"></tagname>
but can i have some dynamic file imports too? Can i have the link tag in the body too? Even if it works, is it standard?
You should look into asychronously loading assets, such as the famous google-analytics code. You can load external stylesheets using Javascript.
JavaScript
(function(){
var styles = document.createElement('link');
styles.rel = 'stylesheet';
styles.type = 'text/css';
styles.media = 'screen';
styles.href = 'path/to/css/file';
document.getElementsByTagName('head')[0].appendChild(styles);
})();
Lines 1 and 7 create a new scope for variables such that local variables do not collide or override with globally scoped variables. It isn't necessary just a best practice. This solution also assumes you have a <head> tag in your html.
You can add/remove/edit link tags in your head area with java script to add/remove stylesheet files.
Code example:
Add a stylesheet to the head:
var newstyle = document.createElement("link"); // Create a new link Tag
// Set some attributes:
newstyle.setAttribute("rel", "stylesheet");
newstyle.setAttribute("type", "text/css");
newstyle.setAttribute("href", "filename.css"); // Your .css File
document.getElementsByTagName("head")[0].appendChild(newstyle);
To remove or edit a stylesheet you can give every stylesheet an id attribute and access it with this:
document.getElementById('styleid')
Or you can loop through all link tags in the head area and find the correct one but I suggest the solution with the ID ;)
Now you can change the href attribute:
document.getElementById('styleid').setAttribute("href", "newfilename.css");
Or you can remove the complete tag:
var styletorem = document.getElementById('styleid');
styletorem.parentNode.removeChild(styletorem)
I just tried to give dynamic styling to my webpage. I used a button. On click of it, the CSS will get imported using a method in Javascript.
In my html, I have:
<button type="button" onclick="changeStyle()"> CLICK TO SEE THE MAGIC!! </button>
Then in Javascript, I have a method named changeStyle():
function changeStyle()
{
var styles = document.createElement('link');
styles.type="text/css";
styles.rel="stylesheet";
styles.href="./css/style.css";
document.head.appendChild(styles);
}
It worked perfectly.
I have a page 'foo.html' that populates a table via AJAX 'ajax.html?options=option1'(accesses a database.)
'foo.html' has a css linked to it that makes the table from ajax.html look nice. However, I'd like to have ajax.html also look nice with a css if it is directly accessed. if I add <link rel="stylesheet" type="text/css" href="/dev/css/default.css" /> then the AJAX inserts the link again in foo.html which I don't want. Is there any way I can make the css link code not show up in the AJAX call or only show up on non-AJAX calls?
Thanks.
an easy way i can think of to solve this problem is to pass an additional parameter that defines the calling context.
The easiest way to do this is to use jQuery.
Load the ajax.html page with jQuery.get()
on success, do :
Remove the stylesheet : $('link[rel=stylesheet]').remove();
If you then want to add another stylesheet :
var link = $("<link>");
link.attr({
type: 'text/css',
rel: 'stylesheet',
href: 'http://domain.com/stylesheet.css'
});
$("head").append( link );
Or change it later :
$("link").attr("href","http://domain.com/stylesheet.css");