Flex Web Styling 101

  • 1
  • 2
  • 3
  • 4
  • 5

Did this article resolve your issue?

Yes
No

What can we do to make this article better?

What can we do to make this article better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5
The Flex Site Designer allows you to fully customize your website to adhere to your organization's branding requirements, without the need for CSS or HTML coding. After you've become familiar with the common Site Designer terms, reference these more detailed levels of styling to customize your site and ensure consistency across pages.

Theme Styling
Your theme is applied across the entire Flex event website. You can style the following elements:
User-added image
User-added image

Section Styling
A section can have unique styling elements applied to it, which will override your site's theme for any widgets included in the specific section. Your options include:
  • Text styles - Customize the text styles used by default for all of the text elements within the section.
  • Section background - Customize the background of a section by adding an image, color, border, or additional spacing between widgets.
  • Column control - Choose how many columns will be used within a section. By placing widgets within columns, rather than side-by-side in a section, this gives you more control over the spacing for each column. When your site is viewed on a mobile device, the columns are grouped and stacked one after the other.
 
User-added image
 
User-added image

Widget Styling
Control the look and feel of your website on a more granular level by applying a unique style to each widget. Your options include:  
User-added image
User-added image

Individual Element Styling
All individual elements within a widget can be styled. Your options include:
  • Text - Style any element with text by customizing the font, font weight, font size, and text color.
  • Background - Choose an image or color to give your element a background, control the opacity, or round the corners of the element.
  • Border - Add a border to the element and control the border's thickness, color, and whether it appears as a solid line, dots, or dashes.
  • Spacing - Adjust the padding added to the top, bottom, left, or right of the element.
 
User-added image
User-added image

Rich Text Styling
The rich text editor, available in some widgets, allows for even more customization. This includes making text bold or italic, applying colors or highlights, controlling alignment, and adding bullets, links, data tags, and more. Any formatting done within the rich text editor will override the element styling for that block of text.
 
User-added image
 
User-added image

Code-Based Styling
The Site Designer's capabilities are so comprehensive that styling with code is seldom required. However, if you need to code your own solutions, you can add a code widget or code snippet, depending on your needs. Keep in mind that our Product Consultants will be unable to assist you in troubleshooting custom code. If that's necessary, consider purchasing web design support.
 
NOTE: Adding custom code to your website can result in unintended consequences, up to and including security and data integrity issues. Reference these limitations when using code widgets and code snippets.

Did this article resolve your issue?

Yes
No

What can we do to make this article better?

What can we do to make this article better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?

What can we do to make this article better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.