Fandom Developers Wiki
Advertisement

DivEditor bir <div> blok ögesi düzenleyicisi oluşturur. İçinde, bunun için farklı stiller uygulayabilir ve daha sonra kodu kopyalayabilir ve tasarımı geliştirmek için bir şablona veya maddeye koyabilirsiniz. Metinle uğraşmadan bir bloğa stiller uygulayabilirsiniz.

Kurulum[]

Kullanım[]

Sayfaya <div id="Editor"></div> kodunu ekleyin, düzenleyici orada görünecektir.

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 <div> 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 <div> container.
  • Text: This section adds and modifies text inside the container (example: <div>Text here</div>)
    • 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 <div> 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[]

Advertisement