The W3CSS Custom Block, a sub-module of the Drupal Module W3CSS Paragraphs, is a powerful and flexible tool designed to enhance the visual appeal and functionality of content on Drupal websites. This module leverages the capabilities of W3.CSS, a modern CSS framework, to offer a wide range of styling options. Its primary function is to allow users to reference Drupal block content within a stylized paragraph bundle, offering extensive customization through its user interface.

User Interface

The user interface of the W3CSS Custom Block is intuitively divided into two main tabs: Display and Content. Each tab is equipped with a set of fields allowing for detailed customization and styling.

Display Tab

The Display tab is focused on the visual aspects of the block, providing a plethora of options for colors, borders, margins, padding, and more.

1. Background Colors: Users can select from 30 different colors to set as the background for their block. This provides a broad spectrum to match the website’s color scheme or to create distinct sections.
2. Background Color Hover: Similar to the background colors, there are 30 color options available for hover states, enhancing the interactive experience.
3. Text Colors: A selection of 30 different colors is also available for text, ensuring readability and design consistency.
4. Text Color Hover: This field allows for the customization of text color when hovered over, with 30 options to choose from.
5. Border Color: Users can select the border color from a palette of 30 different colors, adding definition and style to the block.
6. Border Color Hover: For interactive border color changes on hover, 30 color options are available.
7. Background Color Opacity: After selecting a background color, its opacity can be adjusted from 5% to 95% in increments of 10%. This feature offers 330 color variations and applies only to the background.
8. Width: The width of the block can be adjusted, with options ranging from 30% to 100% of the container width.
9. Borders: There are 11 different border styles to choose from, allowing for further customization.
10. Round Borders: To soften or style edges, 6 round border styles are available.
11. Margin: Users can select from 6 different margin styles to adjust the space around the block.
12. Padding: There are 8 padding styles to choose from, affecting the space within the block.
13. Box Shadow: For added depth, users can apply a 2px or 4px bordered shadow.
14. W3.CSS Classes: An additional field is provided for users who wish to apply any specific w3.css classes for more customized styling.

Content Tab

The Content tab is dedicated to the actual content and structure of the block.

1. Title: This field is for the content title, allowing users to label or headline their block.
2. Entity Reference Field: This is used to reference the content block. Users can link to an existing Drupal block, integrating its content within the styled W3CSS Custom Block.

Summary

The W3CSS Custom Block module stands out for its extensive customization capabilities, allowing Drupal users to create visually appealing and interactive content blocks with ease. Its intuitive interface, combined with the power of W3.CSS, makes it a valuable tool for web designers and content managers looking to elevate the aesthetic and functional aspects of their Drupal sites.