DivEditor

DivEditor creates a block element editor. Inside the editor, you can apply different styles for it, and later copy the code and put it in a template or article to improve the design.
== ==
== ==
To use this script, add the code to a page, and the editor will appear there. Since this script will output inline code, which doesn't show on mobile, it is recomended to use it as a complementary tool to create CSS code, using it as a base and then moving the output's style contents to site-wide or personal CSS pages.
You can toggle editor modes using the "Change editor" button.
=== View mode ===
View is the section where you can visualize how the design will look. At the right area, there are options that will be added to the container. You can use the Clean button to delete the code and start again, or use the Apply button to apply the contents of the Styles and Attributes sections:
; Styles
: It defines the inline-CSS code that will be added to the container.
:* Text: This section adds and modifies text inside the container (example: Text here)
:** Value: Defines the text inside the container.
:** Color: Defines the text color.
:** Font: Defines the font.
:** Size: Defines the font size.
:** Style: Defines the font style.
:** Weight: Defines the font weight.
:** Case: Defines the text case.
:** Decor: Defines the text decoration.
:** Align: Defines the text alignment.
:* Width: This label defines the width of the container.
:* Height: This label defines the height of the container.
:* Margin: This label defines the margin around the container.
:* Padding: This label defines the padding of the container.
:* Background: This label defines the background of the container. Usually used for background color.
:* Position: This label defines the position attribute of the container.
:* Borders: This section is for adding a border around the container.
:** Width: Defines the width of the border.
:** Style: Defines the style of the border.
:** Color: Defines the color of the border.
:** Radius: Defines the radius of the border.
:* Shadow: This label adds a shadow around the container.
:* Text shadow: This label defines a shadow for text.
:* Opacity: This label defines the opacity of the container.
:* Transform: This section defines the transform properties of the container.
:** Rotate: Defines a rotation.
:** Scale-X: Defines scale on the X axis.
:** Scale-Y: Defines scale on the Y axis.
:** Skew-X: Defines skew on the X axis.
:** Skew-Y: Defines skew on the Y axis.
:** Translate-X: Defines translation on the X axis.
:** Translate-Y: Defines translation on the Y axis.
:** Origin-X: Defines origin on the X axis.
:** Origin-Y: Defines origin on the Y axis.
:* Overflow: This label defines overflow for the container.
; Attributes
: It defines the CSS classes or IDs that will be added to the container.
:* Classes: This label defines classes for the container.
:* ID: This label defines an ID for the container.
=== Code mode ===
Code is the section where you can visualize the code in its HTML/wikitext form. From here, you can use the Copy button to copy the code, and you have buttons to increase the font size for readability.
== Demo ==