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

Created on 27 June 2024, 10 months ago
Updated 11 July 2024, 10 months 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 10 months 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
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024