Customizing

Edit

Improvements?

Let us know by posting here.

Concrete offers advanced features like Custom Templates and one-off Design Options to enhance the appearance and behavior of individual blocks and layouts on a page. For details about customizing themes, see the Themes page.

Custom Templates

Custom Templates enable you to change the look and feel of a block by applying pre-designed layouts or styles. This feature allows for consistent styling across multiple instances of the same block type.

Applying a Custom Template

  1. Enter Edit Mode: Navigate to the desired page and click “Edit” in the toolbar.

  2. Select the Block: Click on the block you wish to modify.

  3. Choose Design & Custom Template: From the contextual menu, select “Design & Custom Template.”

  4. Select Custom Template: Click on the gear icon to access the “Custom Template” dropdown menu.

  5. Choose a Template: Select your preferred template from the list. The block will immediately update to reflect the new design.

Example: Auto-Nav Block

The Auto-Nav block, which generates navigation menus, can be customized using different templates:

  • Default Template: Displays navigation as a standard unordered list.

  • Responsive Header Template: Transforms the navigation into a responsive, styled menu suitable for header sections.

Default Auto-Nav Block:

Auto-Nav Block with Responsive Header Template: 

Considerations for Custom Templates

  • Availability: Not all blocks come with multiple templates by default. Custom templates may need to be created by a developer or downloaded from the Concrete CMS marketplace.

  • Consistency: Ensure that the selected template aligns with your site’s overall design and user experience goals.

Design Options

Design Options allow you to customize the visual aspects of individual blocks without altering the underlying CSS. This feature is particularly useful for making stylistic adjustments directly through the Concrete frontend interface but should generally be used rarely.

Accessing Design Options

  1. Enter Edit Mode: Navigate to the page containing the block you wish to style and click the “Edit” button in the toolbar.

  2. Select the Block: Click on the block you want to modify to open its contextual menu.

  3. Choose Design & Custom Template: From the menu, select “Design & Custom Template.”

  4. Open Design Options: Click on the “Design” tab to access various styling settings.

Styling Options

Within the Design panel, you can customize several aspects:

  • Text Size and Color: Adjust the font size and color for text within the block.

  • Background Color and Image: Set a background color or upload an image. You can control image repetition (e.g., horizontally, vertically, both, or none). Note that large images will not be resized automatically and may be clipped if they exceed the block’s dimensions.

  • Borders: Add borders around the block, specifying color, width, and style.

  • Margin and Padding: Define the outer (margin) and inner (padding) spacing of the block to control its positioning and spacing relative to other elements.

  • Shadows and Rotation: Apply shadow effects and rotate the block to add depth and emphasis.

  • Custom CSS Classes: Assign custom CSS classes for more advanced styling, provided you have the necessary CSS defined in your theme or custom stylesheets.

Important Considerations

  • Theme Consistency: While Design Options offer flexibility, it’s advisable to maintain consistency with your site’s overall design theme to ensure a cohesive appearance. Individually customizing many blocks can result in an unmaintainable appearance. Applying custom CSS rules by adding custom classes to blocks is generally more sustainable in the long run.

  • Permissions: If you do not see the “Design” option, your site administrator may have disabled design controls for certain user roles.