Change your website appearance with just a few steps using Reboo's Restyler feature.
Perfect also for testing our new design change or rebranding your existing webpage.
To get started select RESTYLER at the left panel and select an element you wish to edit.
TEXT
If the element contains text you can change the font type, color, size, and more.
BACKGROUND
Easily add a colored background or an image backgroudn to an element.
To change the color simply click the color palette and choose a color.
then change its opacity
Or you manually enter the rgba decimal color codes.
MARGIN and PADDING
The margin and padding are the most commonly used for spacing-out elements.
Margin is the space outside and element, and Padding is the inside spacing.
After selecting an element click on Margin and Padding at the left panel and change the top, bottom, left, and right spacing.
BORDER
The border option will allow you to specify the style, width, and color of an element's border.
You can also select the Type if you just want to add a top, bottom, left, or right border.
BORDER RADIUS
If you have added a border to an element, you can define the radius or the roundness of the corner of the border.
SIZE
This option allows you to change the width and height of an element. It is best to make an element size no wider than they need to be, to maintain the correct design layout.
POSITION
The position options allow you place an element in your webpage. You may also set the top, right, bottom, and left properties which are used to position the element.
There are three different position values you can choose:
Relative - The element is positioned relative to its normal position.
Absolute - Allows you to place any element exactly where you want it, using the top, left, bottom, and right attributes to set the location.
Fixed - A fixed positioned element will stay right where it is even if the window is scrolled. This option is very useful if you want to have a sticky menu.
BOX SHADOW
With the box shadow, you can add a shadow to an element box. Simply change the horizontal or vertical option, bluriness, and color of the shadow.
SETTINGS
Z-index
Z-index specifies the stack order of an element. An element with greater z-index is always in front of an element with a lower stack order.
Opacity
The Opacity option sets the transparency-level of an element
Visibility
This determines whether or not an element is visible.
Box Sizing
This determines if the padding and border are included or not, in calculating the element width and height.
content-box - Includes only the content. Border and padding are not included.
border-box - Includes content, padding and border.
Vertical Align
With vertical align you can set the vertical alignment of an element.
Display
The Display settings specify the display behavior of an element rendering box
Cursor
Generate different type of cursor when the mouse pointer is hovered over the element
Float
Floay is used for positioning and formatting content, like letting an image float left to the text in a container.
Clear
Clear specifies what elements can float beside the cleared element and on which side. The most common way to use the Clear is after you have used a Float on an element.
Overflow
The Overflow specifies whether to clip the content, add a scroll bar, or display overflow content of an element.
Overflow-y determines clipping at the top and bottom edges.
Overflow-x determines clipping at the left and right edges.
Pointer Event
Pointer Event defines whether or not an element reacts when the mouse pointer is hovered over the element.
