Custom html/css "source and insert variable"

[Matte]

If something like this exists already by default or as a plugin, please let me know.

A plugin that you can use to essentially store any amount of text/html/css (the source) and then "paste" it anywhere you want by using a "trigger word" (the variable). This would allow you to insert this information in multiple places across your forum, and when anything is changed in the source, those changes would be applied everywhere that information is being displayed, so you wouldn't have to individually change each instance of it. I'm thinking these "trigger words" would be applicable to include in your layout templates, so you could design your source and then include it on any part of your forum that you want.

[shawnatdgk]

So I recently decided to create my first plugin ever. I came here to look for a challenge and this is where I landed. 
Try this out and tell me if this is what youre looking for. 

Global Editable Cloned HTML Box 2.pbp (2.11 KB)


If you have the same HTML code in several areas of your forum that is updated often or even; every so often, instead of digging up every instance of that code and editing them all individually, this plugin creates an "HTML Box" that can edit every instance in 1 click.



This plugin creates a div element that can be placed anywhere on your forum for as many instances as you want.

Use this plugins "Contents" tab to enter the HTML contents that you would like to be displayed inside of the div element.



To add the div to your forum, Copy & Paste the code below and place it in all areas of the forum that you would like it displayed.



<div class="source_var"></div>



Example:
For instance, if you wanted to add your contents below the text "Category" in the Category bar on the Home page, you'd go to Layout Templates in your admin panel: Admin>Structure>Layout Templates>Home
Then you would find this line of code:

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]<div class="source_var"></div></div></h2></div>

and after $[category.display_name]

add:

<div class="source_var" id="></div>


Styling the HTML Box and Contents --

To add global style to your HTML Box and Contents, add the CSS code below inside the HTML Box. Add it before your HTML code.



<style>

.source_var {

/*CSS CODE*/

}

</style>

THE CSS CODE ABOVE WILL AFFECT ALL INSTANCES OF YOUR HTML BOX --

T
O ADD A STYLE TO A PARTICULAR INSTANCE
Let's say you wanted one of the instances to float right.
You will need to add an id attribute to the instance.
Name your id like so: source_1

the 'HTML Box Tag' of that instance would then look like:

<div class="source_var" id="source_1"></div>

the second one would be #source_2, and so forth

Then add the CSS code to the HTML Box; inside of style tags:

<style>
.source_var {
/*CSS CODE*/
}
#source_1 {
float: right;
}
</style>