Changing multiple colours at once

Question

0.00/5 (No votes)

See more:

Hello, I'll try to explain this as best as I can, but I learnt to code mostly practically without actually reading that many tutorials so please forgive any use of the wrong technical jargon.

I've been coding themes on tumblr for a while and they have a feature that allows you to change the background colour (or font, or font size, or padding, anything really) on multiple divs by selecting a new value in a 'control panel'. The relevant code I could find for change the colour of a sidebar, for example, is:

<meta name="color:Sidebar" content=""/>

in the head, and later

#side {
    top: 60px;
    left: 60px;
    position: fixed;  background: {color:Sidebar};
    width: 255px; border: 1px solid white; box-shadow: 2px 2px;  
}

In the 'control panel' that users can see (for lack of a better description) there is an option to change the colour of the sidebar. I'm not looking to make a fancy interface that lets people select a colour from a drop down menu or anything. Just a way to define a value in one section of the code and have that value referenced/used by other divs in the code.

However... I have no idea how to do this off of coding a theme on tumblr. Is this even possible to do? I'd like to avoid using javascript, if possible.

Many thanks to whoever answers this, and I sincerely apologise if this is an obvious and/or thick question to ask.

What I have tried:

I really don't know where to start here. I tried just using the <meta /> tag and referencing it in the same way a theme code on tumblr would, but I didn't think that would work since the actual value wasn't defined anywhere, and, surprise, it did nothing.

Posted 10-Apr-17 21:22pm

Member 13120298

Updated 11-Apr-17 1:27am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 13120882 · Answer 1 · 2017-04-11T01:27:00

I'd recommend using basic javascript as CSS doesn't allow for variables. Maybe use a framework like Sass or LESS but that requires learning the frameworks, which can be difficult for most people.

For example,

JavaScript

var color1 = "#990dfa";
var someDiv = Document.getElementById('yourDivId');
someDiv.style.backgroundColor = color1;
var nextDiv = Document.getElementById('aWeirdDiv').style.color = color1;

Note that this isn't just for divs - it's for all html5 elements.

Sources: Get content of a DIV using JavaScript - Stack Overflow[^], Javascript change Div style - Stack Overflow[^]

Good Day - Member 13120882