Click here to Skip to main content
14,982,136 members
Please Sign up or sign in to vote.
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
Updated 11-Apr-17 1:27am

1 solution

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
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900