Previous / Next

BorderContainer Background Color or Image

About working with widget CSS styles

When setting CSS styles on a specific widget, you want to be avoid changing the theme styles that may be applied to this widget type. For example, in the exercise below we are setting the background color on a BorderContainer widget. But the default background color for all BorderContainers is set to white (#fff) in the theme CSS files. Therefore it's necessary to tell Maqetta we want to override the theme setting for this widget only, and not for all instances of BorderContainer. We do that by using the "Apply to" drop down, which is described below.

Create a BorderContainer widget

  1. Create a BorderContainer widget as described in BorderContainer Basics.

How to set the background color

  1. Select the top pane of the BorderContainer.
  2. Open the Background section on the Properties palette.
  3. Click on the control next to color to open the "Apply to" drop-down, as shown below:

  4. Select the radio button for element.style.
  5. Click on the color text box to bring up the Color Picker.
  6. Select a color, then click off the Color Picker to close it and set the color.

Note: Selecting element.style sets the background-color in the widget's style attribute in the HTML file. See below for instructions on how to set the background-color using a CSS style rule in app.css.

How to remove the background color

  1. Select the pane.
  2. Click on the control next to color to open the "Apply to" drop-down.
  3. Click on the red X next to element.style. This will remove the color.
  4. Close the "Apply to" drop-down by clicking on the control next to color.

How to set the background color using a CSS style rule in app.css

Setting a CSS style using element.style sets the background-color in the widget's style attribute in the HTML file. While this is fine for making quick mockups, for developer-ready code it is preferable to use a CSS style rule in app.css, as described below.

  1. If you followed the instructions above to set the background-color using element.style, then first remove this setting by following the instructions above to remove the background color.
  2. Select the top pane of the BorderContainer.
  3. Open the Background section on the Properties palette.
  4. Click on the control next to color to open the "Apply to" drop-down.
  5. Click on the Add style rule... link.
  6. In the Add style rule dialog, enter a class name for your new style (for example, "myBCColor").
  7. Click Ok.
  8. A new style rule will be created in app.css, and the style rule will appear in the "Apply to" drop-down with the radio button automatically selected:

  9. Now set the background color:
    1. Click on the color text box to bring up the Color Picker.
    2. Select a color, then click off the Color Picker to close it and set the color.
  10. Close the "Apply to" drop-down by clicking on the control next to color.

How to set a background image

  1. Click on the top pane to select it.
  2. In the Background section, click on background-image url.
  3. Select SampleBanner.jpg and click Ok. The image should now appear in the top panel.
  4. The default repeat setting is repeat. Experiment with each repeat option to see the affect.
  5. The default background-position is "0px". Experiment with different background positions, combined with repeat options, to see the effect.
  6. If you have an image file available, upload it into the Maqetta Files palette (using the Files palette context menu), then set it as the background image in one of the BorderContainer panes.

How to remove the background image

  1. Select the pane.
  2. Click on the control next to background-image url to open the "Apply to" drop-down.
  3. Click on the red X next to element.style. This will remove the url.
  4. Close the "Apply to" drop-down by clicking on the control next to background-image url.

Previous / Next