Presets

The various pods available for Steersman’s website design can be further styled with the help of presets, which allow the builder to manipulate background colors, text colors, accent images and more. In order to access the Presets view, you’ll need to first switch to Debug view. The easiest way to accomplish this is to append the following to the end of your Odoo site’s URL: /web?debug=true

Example:

https://clientname.steersman.io would become
https://clientname.steersman.io/web?debug=true

Once you’re in Debug mode, you’ll see that a Pods menu item has appeared in the Websites app, and you’ll find the Presets link in the dropdown menu within.

presets_menu.png

The Presets view contains only three columns: Name, Value and Components.

presets_view.JPG

Name Field

The Name field can be anything you like, though it should describe the effects you’re configuring as this is what will show up in the pod dropdown menu during design/implementation.

Value Field

There are a number of different settings that are supported for each pod and the Value field is where you’d select the ones you’d like to override and specify the corresponding details.

Page Section:

  • Background color, including support for a gradient
  • Text color
  • Blending mode
  • Specify an image to add texture to the background
  • Add configurable image elements to the pod corners
  • Add wave elements between pods

Picture with text:

  • Apply round, hexagonal, or trapezoid shaped frames around the images

Icon Tiles:

  • Background color
  • Text color
  • Blending mode
  • Add wave elements between pods

Large Banner:

  • Background color
  • Text color
  • Blending mode
  • Half moon color gradient that extends down to the pod(s) below

Thin Banner:

  • Background color
  • Text color
  • Blending mode

Quote:

  • Eliminate margins to fit quotes tighter to other pods on the page

Note

Presets specified for container pods will apply for all the child pods within them as well. For example, if you have a Page Section pod with the background and text colors specified, the same styling will override any styling that’s been set for any pods included within it, such as Text, Picture with Text, Quote, etc.

Components Field

Finally, the Components column is where you can specify all the different design pods where your preset should be made available. It’s important to note that even if you create a preset for a particular pod, if there is no back-end support for the particular design element you’ve specified, you will not see the change on the website.

Examples of preset values:

Example 1

Valid for Page Sections, Large and Thin Banners, and Icon Tiles:

{“backgroundColor”: “#CEEFE6”, “textColor”: “black”, “mixBlendMode”: “normal”}

This would ensure that a pod is rendered with a light teal background, black text and normal blending mode.

Large banner pod

Example 2

Valid for Page Sections only:

{“background”: “linear-gradient(#633757, #023133)”, “textColor”: “linen”, “mixBlendMode”: “overlay”}

This would create a background gradient color from purple to very dark green, with linen text and overlay blending mode.

Example 2.JPG

Example 3

Valid for Page Sections only:

{“img”:[465], “backgroundRepeat”: “no-repeat”, “backgroundPosition”: “top right”, “backgroundBlendMode”: “soft-light”, “background-size”: “204px”}

This example would add a single instance of an image sized 204 pixels to the top right corner of the entire page section with soft-light blending mode. You can place the image in any of the four corners or have it repeat throughout the background.

Example 3.JPG

Example 4

A variation on the above example would be a repeating image that creates texture across the entire page section.

{“backgroundColor”: “#023133”, “textColor”: “linen”, “mixBlendMode”: “normal”, “img”:[220], “backgroundRepeat”: “repeat”, “backgroundPosition”: “top left”}

This is still only valid for Page Sections and it’s important to select the optimal blending mode to ensure that the image you’re adding works well with the background color and the content on top.

Background image texture example.JPG

Example 5

Valid for Page Sections only:

{“backgroundColor”: “#CEEFE6”, “textColor”: “black”, “mixBlendMode”: “normal”, “decorationTop”: “right”, “decorationBottom”: “right”}

This example would render a teal background, black text, and a wave element on top and bottom that rises on the right side. When implementing the wave elements you’ll need to ensure that Page Sections have matching presets to line up the waves. For instance if your page section has a wave that curves on the right at the bottom only, you’ll need to make sure that the adjacent page section that follows has a corresponding wave element that curves to the right at the top.

Example of wave design element

Example 6

Valid for Page Sections only:

{“backgroundColor”: “#023133”, “textColor”: “linen”, “mixBlendMode”: “overlay”, “noMargins”: “true”, “fontSize”: “16px”}

There are times when you might want a very thin Page Section without the padding that’s automatically added to this pod and the “noMargins” flag allows you to do just that. As you might also want to adjust the default font size to ensure that the look of this pod is still optimal, you are able to override the font size via the “fontSize” flag.

Example of page section without margins

Example 7

Valid for Large Banners only:

{“backgroundColor”: “#FFFFFF”, “textColor”: “black”, “mixBlendMode”: “normal”, “gradient”: [“#cfebbd”, “#c3e3b5”, “#b6dcae”, “#aad4a7”]}

This example would render a white background, black text, and a half-moon shaped gradient that would span the four specified shades of green.

half_moon_gradient.png

Example 8

Valid for Picture with Text pods only:

{“frame”: “circle_1”}

This would overlay a round frame around the picture specified in this pod. There are three different circle frames, three hexagonal frames and two trapezoid frames available right now. You can specify the style of the frame you need by using any of the following values: circle_1, circle_2, circle_3, hexagon_1, hexagon_2, hexagon_3, trapezoid_1, trapezoid_2.

circle frame.JPG

Each of the frame shape variations is slightly different to accommodate different image types and the following is an example of how each of these will frame your image.

image_frame_options.jpg

It is possible to create more presets to accommodate additional designs or to adjust these to match your brand/vision, however any further customizations would result in additional development time and cost.