Possibility of creating Color palette for easy customisation [CSS]
Question
Context: I am creating a template HTML/CSS codes for various users to customize the page color of their choice. While CSS is able to reduce the styling codes for the HTML pages, I was wondering if there can be a way to have a "master color palette" for user to change the hex of 5 title to complete the whole change.
Below i have a sample of my css to show multiple scripts calling out to the same color which i want to "store it in a var", I understand in CSS3 that you can use @font-face but im not sure if there is an easy way for color.
Note that although my CSS only contains 3 color, my full codes have 5 color being called out in table, header, div, p, img, etc..
Sample of my CSS before edits:
body{
color:#ffffff; /*@colorTwo*/
background-color:#eeeeee; /*@colorThree*/
}
.heading1{
color:#3e3e3e; /*@colorOne*/
font-weight: bold;
text-decoration:underline;
padding-right: 1em;
}
.heading2{
color:#3e3e3e; /*@colorOne*/
text-decoration: underline;
padding-right: 1em;
}
.heading3{
color:#3e3e3e; /*@colorOne*/
padding-right: 1em;
}
4 answers
solution1
1
Probaly one of the worst ways:
Create a file called Style.php
<?php
$colorone = '#3e3e3e';
$colortwo = '#ffffff';
$colorthree = '#eeeeee';
echo "
<style>
body{
color:$colorTwo;
background-color:$colorthree;
}
.heading1{
color:$colorone;
font-weight: bold;
text-decoration:underline;
padding-right: 1em;
}
.heading2{
color:$colorone;
text-decoration: underline;
padding-right: 1em;
}
.heading3{
color:$colorone;
padding-right: 1em;
}
</style>
"
?>
To include this document you will need to have an index.php
<html>
<head>
<?php include 'Style.php';?>
</head>
<body>
<!-- Rest of code -->
</body>
</html>
solution2
1 2016-08-10 04:43:11
Newer versions of CSS include variables, however you need something like Myth that compiles your files to CSS to support all non-green browsers here .
/* something.css */
/* CSS variables are like other CSS properties - they need a selector to see
which elements to apply to. The root scope applies globally. */
:root {
--background-color: #FF00FF;
}
.content {
background: var(--background-color);
}
.content div li .subcontent {
background: var(--background-color);
}
However, CSS preprocessors like Sass are also very common. They have additional non-CSS syntax that lets you use variables.
/* src/something.scss */
$backgroundColor: #FFFFFF;
.content {
background: $backgroundColor;
}
If developing with CSS preprocessors, you will typically have some sort of "build" and "watch" setups that will automatically make a "distribution" version of your CSS, for uploading onto a website. The result for the above SCSS would be this:
/* dist/something.css */
.content {
background: #FFFFF;
}
solution3
1 2016-08-10 05:14:22
I am also working on templating, and we have the save problem. But my current solution is to include a LESS css file. Below is a basic sample
1. copy below and paste to a new file and name style.less
@red: red;
@orange: orange;
@blue: blue;
@black: #000;
@white: rgb(255,255,255);
body {
background: @black;
}
div {
color: @red;
}
2. import your less file
follow this http://lesscss.org/#client-side-usage
solution4
1 ACCPTED
Use JS/Jquery to apply the style?
Index.html
<html>
<head>
<title>Title here</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<script src="customColors.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
//Get Element by id: $("#elementId");
//Get Element by class: $(".elementClass");
//Get Element by tag: $("elementTag");
$(".heading1").css("backround", colorOne)
... Rest of your code here :) ...
</script>
<div class="heading1"></div>
<div class="heading2"></div>
<div class="heading3"></div>
</body>
</html>
customColors.js
var colorOne = '#color'
var colorTwo = '#color'
var colorThree = '#color'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.