Restyler

Modified on: Thu, 17 Jan, 2019 at 5:38 PM 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 C lear is after you have used a F loat 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.

Still puzzling over something?