Edit Row - Layout Mode - IB v 3.0
Please note: the commands available are dependent upon the pages current mode.
In this example, we will look at the Edit Row commands available in Layout Mode.
Click the blue Edit Row button to display information on the row.
The edit row screen displays the following information:
- Variable Column Widths
- Bottom Margin
- Color Controls (Background Opacity, Color Picker, Custom Color)
- Color Preview
Variable Column Widths
- One column row will not display this option.
- Change from the base column layout to optional column layouts.
- In this example, the row is a 2 column layout, where the base width is equal in each column.
- The first option: the column width on the left is larger than right.
- The second option: the column width on the right is larger than the left.
- The bottom margin clears an area around an element (outside the border).
- The margin does not have a background color and is completely transparent.
- The bottom margin options are: none, 1 px, 2 px, 5 px and 10 px
- To change the bottom margin, select the option from the drop list and click the Update Content button found in lower right hand corner of the screen.
- Click the Publish Page button to save your changes.
This is a preview of the page with a bottom margin of none.
Here is the same page with a bottom margin of 10 px. Notice the white space (page background color) between the yellow and navy rows.
1. Background Opacity (for page row)
- The background opacity level describes the transparency-level for the page Row.
- By default, the opacity is set to 100 when you select from the Color Picker.
- The higher the number, the less transparent.
- Adjust the transparency by sliding the opacity control to the left or right.
- In this example, the opacity is set to 23. The same color appears more transparent.
- Select the Update Content button to save your changes.
- If you are happy with your changes then select the Publish Page button.
- Here is the same page with a transparency set to 23.
2. Color Picker
- Click on a preset color to add a solid colored background.
- In this example: A light blue preset color was selected.
- Click the Update Content button in the bottom right hand corner of the screen,
- The webpage background displays the selected light blue color.
3. Custom Color
- This selection provides you with a Colors window.
- Click on the square box to the right of the hex color value field to launch the color picker window.
- Find a color hue by sliding the bar up and down.
- Set the color saturation by moving your mouse between the light to dark intensities.
- Note: the color hex value (in this example #4698b2 field) changes as you move your mouse.
- Make note of the color hex value ( in this example #4698b2) in case you would like to use this color again on another webpage.
- Click off of the color picker box to set the color.
- Click the Update Content button at the bottom of the screen.
- Your webpage background displays the new color.
- If you already have a Hex Color Value, you can type this value directly into the field (in this example #FF66CC).
- Again, click the Update Content button at the bottom of the screen.
- Select the Publish Page button to finalize your changes.