Showcase themes

The Showcase theme set was designed for associations that wish to use an online portfolio to publicize a particular service or product. However, Showcase themes can be used by any organization that wants to take advantage of their responsiveness, their color schemes, or their theme-specific functionality (see below).

Themes within the theme set

The Showcase theme set consists of the following variations:

Showcase Red

Showcase Teal

Showcase Orange

Showcase Crimson

Showcase Purple

Showcase Blue

Showcase Green

Design elements

The Showcase theme design involves the use of large photos and linked pictures, along with big headings to divide page into sections.

Numerous button and link styles allow you to build your own sections and easily navigate between them. The scrolling menu style makes it easy for your users to navigate your site.

We’ve used a very small number of colors in this theme design, because we followed the “content as the hero” concept, so as not to distract visitors to your site by a large number of colors. You can make your site your own by choosing a different color variation or using your favorite color.

Showcase themes are fully adaptive to different screen sizes, featuring adaptive orientation settings in social profile and secondary menu gadgets and fully adaptive donation goals and forms. And, of course, adaptive typography that will adjust font sizes on your mobile devices.

As well, Font Awesome – a font consisting entirely of icons – has been added to the theme. You can copy and paste icons from the Theme icons page, which appears as a sample page when you create a site using this theme, or switch to it. To keep the icons readily available, you might want to keep this page as an admin-only non-menu page. For more information, see Using Font Awesome icons.

Responsiveness

By default, responsiveness is enabled in all Showcase themes. You can, however, disable the responsive behavior using theme overrides.

With responsiveness enabled, gadgets will be stacked within a single column on mobile devices, and resized to match the device's screen width. A mobile version of the site menu will be displayed, with a limit of 3 levels in total (main menu plus 2 submenu levels). Only horizontal menus are available for responsive themes.

To disable responsive behavior within Showcase themes, follow these steps:

1. Enable theme overrides (if you have not done so already).
2. Click the link to download the theme files.
3. Unzip the theme files to a location of your choice on your computer or network.
4. Using a text editor, open the basic.responsive.grid.less file from the Styles folder.
5. Replaces the following lines...
   @state2-minwidth: 600px; @state2-maxwidth: 959px; @state3-minwidth: 320px; @state3-maxwidth: 616px;
   with...
   @state2-minwidth: 0px; @state2-maxwidth: 0px; @state3-minwidth: 0px; @state3-maxwidth: 0px;
6. Upload the modified basic.responsive.grid.less file to the Styles theme folder on your site via File management or WebDAV.
7. Click the Rebuild theme button on the Theme overrides screen.

The site will now appear the same regardless of device size.

Theme-specific functionality

Showcase themes provide theme-specific functionality, including:

• Special scrollable menu style
  This style displays only the top level menu. For best results with this style, keep the page names short. As usual, we also provide you with our classic menu style if you want to combine a multi-level site structure with the Showcase design.
• Image link effect. When you hover over an image, a tooltip appears over the image , and a surface color is applied.
  The image link effect is not automatically applied. For instructions on applying this effect to images within this theme, see Applying the image link effect (below).
• Dropdown login form
• Alignment options for login gadgets
• Orientation option – horizontal and vertical – for log in form gadgets
• Ability to hide the Remember me and Forgot password labels within log in form gadgets, and control whether the email and password labels appear within the entry fields, or outside them
• Secondary menu gadget, with alignment option
• Font Awesome iconic font set for adding icons you can easily size and color

Applying the image link effect

The image link effect occurs when someone hovers over an image. A surface color with an opaque background is applied to the image, and a tooltip is displayed centered over the image. This effect can be manually applied to individual images within your site.

To apply the image link effect to an image, follow these steps:

1. Place your image in a content gadget. Do not forget to position it correctly using margins and padding.
2. Add a link to the picture. Do not forget to add a tooltip if you want this text to appear on your image.
3. While editing the content gadget, click the HTML icon in the content editor toolbar.
4. Within your gadget's HTML code, find the tag <a>...</a> used to display your linked image.
5. Add class="animatedPicture" to your <a> tag so it will look like <a class="animatedPicture"...>
6. Click the Save button to save your code changes.
7. Click the Save button to save changes to your page.

The color applied when someone hovers over the image depends on which theme variation you are using. If you want to change the hover color, follow these steps:

1. Under the Website menu, click CSS.
2. In the Editor field, enter the following code:
   body :not(pageModeEdit) a.animatedPicture:before{ background-color: #ed3529; }
   and replace #ed3529 with desired color in hexadecimal format.
3. Click Save to save your changes.

Customizing Showcase themes

From the Colors and styles screen, you can customize the colors, fonts, styles, and backgrounds of various elements that appear throughout your site. When customizing the colors and styles of Showcase themes, you can customize elements within each gadget.

You can also customize Showcase themes using CSS and theme overrides.