How to Change the Background Color for the Home Page Content in Solo

Created on 27 June 2024, 6 days ago

The Content region of the home page is white like the other pages.
If I add a color, they all color. Is it possible to color only the Content of the home page?

Thanks and best regards

💬 Support request
Status

Fixed

Version

1.0

Component

Code

Created by

🇮🇹Italy giordy

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @giordy
  • Assigned to Manishvijay02
  • 🇮🇳India Manishvijay02

    Hi @giordy,
    Yes it is possible to do so. What you need to is :
    1. Create a CSS file named homepage.css and add the necessary styles to it.
    2. Link this file in libraries.yml with unique name
    home-page:
    css:
    theme:
    path-to-css-directory/homepage.css
    3. Then use the following hook in your .theme file to attach the CSS to the homepage:
    /**
    * Implements hook_page_attachments_alter().
    */
    function your_theme_page_attachments_alter(array &$attachments) {
    // Check if the current path is the homepage.
    if (\Drupal::service('path.matcher')->isFrontPage()) {
    // Attach the 'home-page' library to the page.
    $attachments['#attached']['library'][] = 'your_theme/home-page';
    }
    }

    Hope this helps.

  • Issue was unassigned.
  • 🇮🇹Italy giordy

    Thanks but I don't have the technical skills to create the CSS.
    If there is an easier solution or a model to copy, otherwise I leave it alone.

    thanks and best regards

  • Assigned to flashwebcenter
  • Status changed to Fixed 6 days ago
  • 🇺🇸United States flashwebcenter Austin TX

    Hello,

    Changing the background color for your home page content in the Solo theme is a straightforward task. In Drupal, the home page is designated with the class "path-frontpage," allowing you to target the home page specifically. Follow this example to change the main content background color to red:

    body.path-frontpage #page-wrapper #sidebar-box-main .region-inner {
      --r-bg: red;
    }
    

    Best wishes,
    Alaa

  • 🇮🇹Italy giordy

    Alaa you're great!!
    It's much easier that way.

    Thank you so much and best regards

  • 🇺🇸United States flashwebcenter Austin TX

    Thank you so much for your kind words! It's much appreciated.

    Best regards,
    Alaa

  • 🇺🇸United States flashwebcenter Austin TX
Production build 0.69.0 2024