🇺🇸United States @flashwebcenter

Hello,

In version 1.0.12 of the Solo theme, I updated the tables to respect the "Enable High, Medium, and Low" responsive table settings in Views. Solo includes a custom table template (table.html.twig). To ensure compatibility with Drupal and any contributed modules that may require custom templates, I applied the table CSS specifically to Solo’s template using the class solo-table-all.

Since W3CSS classes do not always work seamlessly with Drupal, some custom code may be necessary to override Drupal's default behavior. The issue you're experiencing is due to not using Solo's table Twig template. The global CSS was intentionally removed to prevent overriding styles from Drupal core or contributed modules.

In the theme settings, you have the option to add custom CSS or JavaScript for your convenience. I developed this feature to provide a flexible solution, recognizing that everyone's needs may vary. This allows users to easily customize different aspects of the site in a quick and efficient way. Feel free to use this feature to customize tables or any other components as needed.

To apply styling to all tables on your site, you can reintroduce the previous CSS in the theme settings and use the page ID to override any custom styles as needed. Let me know if you need further clarification!

your-site-dot-com/admin/appearance/settings/solo

#page-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

Old:

.page-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

New:

.page-wrapper .solo-table-all {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  display: table;
}

Best wishes,
Alaa

Hello,

Create a block using the default Basic block type in Drupal core (/block/add/basic). Then, place it before the user menu and apply your preferred styling.

Best wishes,
Alaa

Hello,

I don't think this would be added as a feature. However, I'm not sure if this would be a good fit for Drupal.org, as it seems more like pure CSS rather than something specific to Drupal. It might be helpful to look into how multi-level menus are typically developed. The good thing is that you're not creating the HTML—you're just applying CSS styles.

Best wishes,
Alaa

Hello,

Since there isn't a specific file or CSS to modify, you'll first need to create a custom sub-theme. Once that's set up, you can add support for a fourth-level menu. The next step is to debug using browser inspection tools to identify any styling issues.

Make sure to test how the menu behaves on both large and small screens. For hover menus, you won’t need to add JavaScript, but for click-based menus, you may need to implement some JS to ensure proper functionality.

Best wishes,
Alaa

Hello,

The W3CSS theme and Solo theme are designed to support a three-level menu structure. The menu was not originally intended to accommodate a fourth level, which is why the behavior appears as it does in your screenshot. Since you have added a fourth level, you would need to create custom CSS to properly support this addition in the main menu.

Best wishes,
Alaa

Hello,

The new feature was added to the new release 1.0.11

Best wishes,
Alaa

Hello,
The feature has been added to the horizontal main menu. A new checkbox appears under 'Enable Hover.' If checked, another checkbox will be available to hide the arrow from level-one menu items on large screens only. It has been pushed to dev—feel free to test it.

Best wishes,
Alaa

Hello,

To change the font size, assign an ID to the desired tag and apply the font-size property in CSS.
Example:

#page-wrapper h1 {
  font-size: 2rem;
}

Best wishes,
Alaa

Hello,

Here is how to enable/disable site slogan. https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/s... →

Best wishes,
Alaa

Hello,

A detailed description has been added to the module page, but expect updates in the future as the module is still in the development phase.

Best wishes,
Alaa

You are welcome!

Thank you for the clarification! Yes, you can hide the title and only display it when its corresponding slide is active. The carousel applies an active class to the current slide. Below is some CSS that hides the title by default and reveals it when its slide becomes active.

.paragraph--type--3d-carousel-bundle .pb__caro-item .paragraph .pb__content-title {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.paragraph--type--3d-carousel-bundle .pb__caro-item.pb__active .paragraph .pb__content-title {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

Best wishes
Alaa

Hello,

Once you've selected the images, I'll create an image style and apply it to ensure they all have the same height. I typically use an image style as a safeguard in case any images don’t display correctly.

Best wishes,
Alaa

Hello,

The play/pause button is designed to be hidden when the slideshow does not have a defined slide duration. Currently, it is not just disabled, but I agree that disabling it instead could be a useful enhancement. I will add this feature.

To disable it with css you can use:

.nav-dots-numbers {
display: none!important;
}

Best Wishes,
Alaa

Hello,

The 3D Carousel operates with a fixed height. To create a 3D carousel with images, you should first define an image style with the desired width and height and apply it to each carousel item. However, since images may vary slightly in dimensions (e.g., a difference of 50 pixels or more), I have enforced a 100% height to ensure the carousel maintains a clean and uniform appearance.

.pb__caro-item .paragraph--type--image-bundle div,
.pb__caro-item .paragraph--type--image-bundle img,
.pb__caro-item .paragraph--type--image-wide-bundle div,
.pb__caro-item .paragraph--type--image-wide-bundle img,
.pb__caro-item .paragraph--type--image-narrow-bundle div,
.pb__caro-item .paragraph--type--image-narrow-bundle img,
.pb__caro-item .paragraph--type--node-reference-bundle img {
  height: 100%;
}

.pb__caro-item article,
.pb__caro-item article .field,
.pb__caro-item .pb__content-full,
.pb__caro-item .field--name-pb-image-field img {
  width: 100%;
  height: 100%;
}

I recommend selecting and resizing images so that they have a consistent aspect ratio before applying an image style that fits and crops them accordingly. This approach ensures a polished final result. In all demo templates I’ve created, I carefully selected images with similar aspect ratios to maintain a cohesive look within each carousel.

Best wishes,
Alaa

Hello,

The 3D Carousel does not have a title; it contains a paragraph field that is not restricted to any specific bundle. To add a title and image for each item, we have two options:

Use existing paragraph bundles – Instead of creating a new bundle, install the Layout Paragraphs module, which includes a One Column bundle. Then, add a Carousel and place a One Column bundle inside each slide. Within each One Column bundle, you can insert a Simple Text field and an Image field. with this method you can assign bg color to each one column.

Create a new paragraph bundle – Define a new paragraph type with an Image or Media field and a Plain Text field positioned above the image. This bundle can then be used inside each carousel item.

Best wishes,
Alaa

Hello,

The 3D Carousel under Content contains a single paragraph field. To accomplish this, I would create a paragraph bundle and add the necessary fields. Then, I would use this bundle as a child for each carousel item.

Best wishes,
Alaa

Hello,
I don’t have permission to access this ticket. However, if you’re looking into how the second level of the main menu is rendered, you can check the configuration at:

your-site.com/admin/structure/block/manage/solo_main_menu

I’ve also attached a screenshot for further clarification.

Best wishes,
Alaa

Hello,

Thank you for your guidance on testing. I followed your instructions and was able to identify the issue.

By default, Drupal does not include the page title in the breadcrumb. Solo provides an option to add this feature, as do some other contributed modules. Solo's functionality works as intended—it either adds the title or does not, based on the configured settings. However, Solo does not include a feature to remove titles that were added by other contributed modules.

When the Entity module is installed, it also adds the page title to the breadcrumb, which results in duplicate titles when used with Solo. If the title option in Solo is disabled, it simply reverts to the default Drupal behavior.

To improve this functionality, I have refactored the breadcrumb handling in Solo. Now, when the title option is enabled, Solo will add the title to Content, Views pages, Taxonomy pages, User pages, and Webform pages. However, I have introduced a new check to ensure that if another module or theme has already added the title, Solo will not add it again.

Feel free to download the latest development version → or disable the feature and use the title provided by the entity module.

Best wishes,
Alaa

Hello,

I will review and test the theme together. In the meantime, the breadcrumb feature can be disabled in the theme settings under Breadcrumb.

Best wishes,
Alaa

Thank you @karengrey and @scott_euser

Hello,

Yes, Solo is compatible with Drupal 10.4 since ^10.1 includes all 10.x versions starting from 10.1 and above.

Best wishes,
Alaa

You're welcome! I'm glad to hear everything is working as expected. Happy to help!

Hello,

I will see what I can do! I'll make sure this feature only active when the hover setting is enabled on big screen.

Thanks for the suggestion!
Best wishes,
Alaa

Thank you so much for your kind words! I'm grateful to be part of the Drupal community and to collaborate with such amazing individuals.

This code should only run on large screens before the breakpoints are applied to the site. I have updated the JavaScript; please adjust the breakpoint value to match the site's settings.

(function (Drupal) {
  Drupal.behaviors.sidebarStickyWrapper = {
    attach: function (context) {
      const applyStickyWrapper = () => {
        const sidebars = context.querySelectorAll('.sidebar-box-second-inner');

        sidebars.forEach((sidebar) => {
          // Change the number according to the website breakpoints
          if (window.innerWidth > 992) {
            if (!sidebar.querySelector('.sticky-wrapper')) {
              const wrapper = document.createElement('div');
              wrapper.className = 'sticky-wrapper';

              while (sidebar.firstChild) {
                wrapper.appendChild(sidebar.firstChild);
              }

              sidebar.appendChild(wrapper);
            }
          } else {
            // Remove wrapper if it exists
            const wrapper = sidebar.querySelector('.sticky-wrapper');
            if (wrapper) {
              while (wrapper.firstChild) {
                sidebar.appendChild(wrapper.firstChild);
              }
              wrapper.remove();
            }
          }
        });
      };

      // Initial check
      applyStickyWrapper();

      // Add event listener for window resize
      window.addEventListener('resize', applyStickyWrapper);
    },
  };
})(Drupal);

@media (min-width:992px) {
  #page-wrapper .sidebar-box-second-inner .sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

Best wishes,
Alaa

Hello,

I added a checkbox at the top where users choose the website width, allowing them to switch to a pixel-based width. Set the website's width in pixel instead of rem. This gives users more control over how their site's typography behaves, balancing precise design with accessibility.

Best wishes,
Alaa

Absolutely! Visual representations often make concepts much clearer and can greatly aid adoption. Thanks for the insight!

Hello,
I’ve added two font sizes (12px and 14px) and three additional spacing options (20px, 14px, and 12px). The changes have been pushed to the dev version—feel free to use them.

Best wishes,
Alaa

Hello,

I identified the issue—it was caused by the font you’re using. Other fonts work fine. If you test on your machine and switch the global font, you’ll see the dancing font effect. I’ve updated the dev version, and it’s working on the demo site. Feel free to use it.

Best wishes,
Alaa

Hello,

Thanks for sharing the screenshot! It seems that CSS/JS aggregation is enabled, which makes it harder to identify the specific file. Could you please disable the aggregator and send me another screenshot?

To do this, go to your-site.com/admin/config/development/performance and uncheck the "Aggregate CSS files" option.

Let me know if you need further assistance with this. Thanks for your help!

Best wishes,
Alaa

Hello,

Thank you for your kind words about the theme—I really appreciate it!

To create a layout with a right sidebar in sticky mode, you’ll need to target the child inside the div.sidebar-box-second-inner. If it has only one child, you can use this CSS:

#page-wrapper .sidebar-box-second-inner .the-child-class {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

If the div.sidebar-box-second-inner has more than one child then you will have to group them into one div and use the class name:
You can use JacaScript and CSS:

(function (Drupal) {
  Drupal.behaviors.sidebarStickyWrapper = {
    attach: function (context) {
      // Find all sidebar-box-second-inner elements within the context.
      const sidebars = context.querySelectorAll('.sidebar-box-second-inner');

      sidebars.forEach((sidebar) => {
        // Skip if already wrapped (idempotent behavior).
        if (sidebar.querySelector('.sticky-wrapper')) {
          return;
        }

        // Create the wrapper div.
        const wrapper = document.createElement('div');
        wrapper.className = 'sticky-wrapper';

        // Move all children into the wrapper.
        while (sidebar.firstChild) {
          wrapper.appendChild(sidebar.firstChild);
        }

        // Append the wrapper back into the sidebar.
        sidebar.appendChild(wrapper);
      });
    },
  };
})(Drupal);

#page-wrapper .sidebar-box-second-inner .sticky-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

Best wishes,
Alaa

If you cannot paste a URL, inspect the page instead. You should see something similar to this.

All libraries have been updated by removing the version to address browser caching issues 🐛 Remove VERSION from libraries.yml Fixed . Additionally, ensure you perform a hard cache clear in your browser."

Best wishes,
Alaa

Hello,

I did a quick test on my local setup and confirmed that both Google-hosted and locally-hosted fonts are working.

Samples of all fonts are available on the demo site.

Global Fonts - Heading Fonts - Site Name & Page Title - Special Fonts - Text Animation

If you have a link, I can check it for you.
Best wishes,
Alaa

I don't know this module, so I don't know.

Best wishes,
Alaa

Hello,
The screenshots were added.

Best wishes,
Alaa

Hello,
I’ve created a video explaining how to use the font, which you can watch here: https://www.youtube.com/watch?v=bithFL7hzOQ&t=179s.
On the demo site, I’ve applied two fonts: one for the global text and another specifically for the headings.

https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo →

Best wishes,
Alaa

Sure thing! Let me take a look and see how I can add those 14px and 12px font sizes for you. Thanks for the suggestion—it makes sense to have those options for a more compact look!

You're welcome! Glad the Solo theme is working well for you! From the screenshot, it seems you're using Drupal's new experimental navigation. The current toolbar has a higher z-index than the Solo menu, but the new one doesn't. If you're using the new navigation, I’ve added some CSS to the dev version you can try. If not, here’s the CSS:

.admin-toolbar {
  z-index: 5000;
}

Best wishes,
Alaa

Hello,

The z-index values were originally set to 1000, 2000, and 3000 to address user complaints about menus being covered by other elements. These higher values were implemented to resolve those issues, but I understand that z-index preferences can vary based on individual use cases.

Unfortunately, changing them now could disrupt functionality for existing users. However, if you have a solution that works for your specific requirements, feel free to adjust the z-index values within the theme settings to suit your needs.

Navigate to the default theme settings (Solo or its sub-theme) under Global Settings, and add this code to the CSS Dynamic section.

#page-wrapper .main-navigation-wrapper {
  z-index: 500;
}
#page-wrapper .main-navigation-wrapper ul.navigation__menubar {
  z-index: 501 !important;
}
#page-wrapper .main-navigation-wrapper ul.navigation__menubar>li>ul {
  z-index: 502 !important;
}
#page-wrapper .main-navigation-wrapper ul.navigation__menubar >li>ul>li>ul {
  z-index: 503 !important;
}

Thank you for understanding!

Hello,
Thank you for contributing the patch to the module! I’ve reviewed it and applied it to the codebase, and everything looks fine from my side. However, I’m unable to test it fully as I don’t currently have an account to verify the functionality.

If anyone in the community can test it and confirm that it’s working as expected, I’d be more than happy to approve the patch. Your feedback is greatly appreciated!

    "extra": {
        "patches": {
            "drupal/cloudflare_purge": {
                "Add form to purge by URL": "https://www.drupal.org/files/issues/2024-12-04/cloudflare_purge-purge-by-url-3490224-3.patch"
            }
        },
    },

Best wishes,
Alaa

When creating a slideshow in Drupal 10, there are two distinct approaches, which often cause confusion:

Slideshow from Nodes: In this approach, each slide is a separate node. For example, if you have a content type like "Article," each article node can represent an individual slide in the slideshow. This is managed by creating a View that pulls multiple nodes and displays them as a slideshow.

Slideshow from a Multi-Value Image Field: Here, a single node contains an image field with multiple images. The slideshow is created by rendering all the images from that single field as individual slides. This approach is useful for cases like a gallery or product page, where all images are associated with one piece of content.

Understanding the distinction is essential because the setup and use cases differ significantly. The Views Vanilla JavaScript Slideshow (VVJS) is a "Slideshow from Nodes" and it is suited for content-heavy slides, while the "Multi-Value Image Field Slideshow" is ideal for displaying image galleries. https://www.drupal.org/project/field_slideshow →

Best wishes,
Alaa

Hello,

Thank you for your question about the note on the module's home page. This note is not specific to this module but is intended as general guidance for Drupal as a whole. Feel free to use it.

In Drupal, for optimal performance and user experience, it is generally recommended to limit the number of items to 10. This keeps the page responsive and accessible, especially when working with images that require more resources to load. Additionally, enabling pagination is a best practice to ensure smoother navigation and maintain accessibility, while also preventing potential performance bottlenecks.

Best wishes,
Alaa

You're welcome! I updated the code to include a login popup button and a vertical nav hamburger, in case anyone else is looking for ways to modify all the top buttons.

#login-button-open,
#sidebar-button-open,
#search-button-open {
  border-radius: var(--solo-px8);
}

#login-button-open button,
#sidebar-button-open button,
#search-button-open button,
#page-wrapper .menu--account li a {
  border: 1px solid var(--r-br);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: var(--solo-px8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#login-button-open {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#login-button-open:hover,
#sidebar-button-open button:hover,
#search-button-open button:hover,
#page-wrapper .menu--account li a:hover {
  transform: translateY(2px);
}

#login-button-open,
#search-button-open,
#page-wrapper .menu--account li {
  margin-right: var(--solo-px8);
}

Best wishes,
Alaa

Hello,

To apply a border, first define the border as a CSS variable in your sub-theme. Use this variable for the border styling instead of hardcoding colors. Then, set the color value either in your theme settings or within your sub-theme for better customization.
Here is an example:

#search-button-open button,
#page-wrapper .menu--account .nav__menu-item-account a {
  border: 1px solid var(--r-br);
  --r-br: #647d67;   /* Remove this line if you want to use the theme settings for customization */
  /* Optional */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#page-wrapper .menu--account .nav__menu-item-account {
  margin-right: 8px;
}

Best wishes,
Alaa

Hello,

This issue was addressed and fixed on the dev environment two days ago. Please feel free to use dev.

Best wishes,
Alaa

Hello,

Please add the CSS class shown in the screenshot (align-center). Let me know if you need any further tweaks!

Best wishes
Alaa

Hello,

Thank you so much for your kind words and support! I’m happy that you’re enjoying the Solo theme. It’s feedback like this that keeps me motivated.

The advanced search lacks a configuration UI; navigating to ../admin/config/search/pages shows no configuration options for advanced search. I’ve added functionality to the Solo theme: under Solo Settings > Global Site, there’s now a feature called Disable Advanced Search Filters. This allows you to disable any of the three filters (Keywords, Types, and Language). The changes are pushed to the dev branch → and are also available on the demo site. Feel free to try it out!

Best wishes,
Alaa

You're welcome! No problem at all. Glad it’s sorted out.
Best wishes,
Alaa

Hello,
When issues like this occur, it's often a sign that a configuration has been altered. I’ll review the menu block settings and ensure that the "Expand all items" option is enabled.

Best wishes,
Alaa

Thank you for pointing that out.

You're welcome! Glad you found the issue—thanks for the update, and no worries at all.

Hi,
I just ran a quick test and couldn’t replicate the issue. I’ve uploaded a screen recording → of my test on Drupal 10.4. Let me know more about the modules you have enabled, and I’d be happy to help debug the issue on your site.

Best wishes,
Alaa

You're very welcome! I'm glad the solution aligns with what you had in mind and that the theme has been a time-saver for your project. Best of luck with your complex portal—sounds like an exciting challenge!

Hello,

You can apply flex to the parent of the thumbnails. Here is an example.

<div class="thumbnail-gallery">
  <a href="image1-large.jpg" class="colorbox" data-gallery="gallery">
    <img src="image1-thumb.jpg" alt="Thumbnail 1">
  </a>
  <a href="image2-large.jpg" class="colorbox" data-gallery="gallery">
    <img src="image2-thumb.jpg" alt="Thumbnail 2">
  </a>
  <a href="image3-large.jpg" class="colorbox" data-gallery="gallery">
    <img src="image3-thumb.jpg" alt="Thumbnail 3">
  </a>
  <a href="image4-large.jpg" class="colorbox" data-gallery="gallery">
    <img src="image4-thumb.jpg" alt="Thumbnail 4">
  </a>
</div>

.thumbnail-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* Space between thumbnails */
  justify-content: flex-start; /* Align thumbnails to the left */
}

.thumbnail-gallery a {
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden; /* Ensure thumbnails don't overflow */
}

.thumbnail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure images fit within the thumbnail dimensions */
  display: block;
}

Best wishes,
Alaa

Hello,

Thank you for bringing this to my attention. The menu was originally designed to collapse on window resize, primarily for small devices. I have restructured this logic to improve the user experience. Now, in the Solo theme, menus will remain open on window resize and will only collapse when the layout changes according to the breakpoints set on your website. For example, the menu will collapse when switching from a small to a large layout and vice versa.

The updated code is currently live on the demo site, which features a long menu for testing. Feel free to try it out there and download the latest development version → .

Best Practice for Menu Behavior on Resize:
Do Not Collapse on Resize:

If the resize happens within the same layout range (e.g., resizing a desktop window without crossing a breakpoint).
Collapse Only When Passing Breakpoints:

If the screen size transitions from "big screen" to "small screen" or vice versa, collapse the menu to adapt to the new layout. For example:
On big to small: Collapse the menu and show the hamburger menu.
On small to big: Collapse the mobile menu and reset it to the desktop style.

Best wishes,
Alaa

flashwebcenter → changed the visibility of the branch 3493567-tabs-are-broken to hidden.

Thank you for bringing this to my attention.

Hello,

If Bluesky is meant to replace X (Twitter), it makes sense to consider swapping the X social media field for Bluesky info. However, since Bluesky hasn’t fully reached the scale or adoption of X yet, keeping the X field could be practical for compatibility, user preference, or during the transition as not everyone has moved to Bluesky. The X field would only make sense to remove entirely if X (Twitter) were to shut down completely and have no users left.

The icon was added to dev and it is on available on the demo site. Feel feel free to use it.

Best wishes,
Alaa

Hello,
Please open gmpe-style.css and on line 18 replace:

.field--type-text-long img,
.field--type-text-long video,
.field--type-text-long embed,
.field--type-text-long object,
.field--type-text-with-summary img,
.field--type-text-with-summary video,
.field--type-text-with-summary embed,
.field--type-text-with-summary object {
  display: inline-block;
}

with:

.field--type-text-long img:not(img.align-center),
.field--type-text-long video:not(video.align-center),
.field--type-text-long embed:not(embed.align-center),
.field--type-text-long object:not(object.align-center),
.field--type-text-with-summary img:not(img.align-center),
.field--type-text-with-summary video:not(video.align-center),
.field--type-text-with-summary embed:not(embed.align-center),
.field--type-text-with-summary object:not(object.align-center) {
  display: inline-block;
}

Best wishes,
Alaa

Yes, the templates views-view-table.html.twig and table.html.twig were updated to disable the w3.css class for responsive tables when Drupal adds responsive or sticky classes to the table. You can download the dev version for testing.

Best wishes,
Alaa

No worries, I updated the table.html.twig to use the Views template. I'll leave this open, so feel free to share any additional URLs. If there are none, feel free to close it.

Best wishes,
Alaa

Hello,

Thank you for pointing this out. There was a conflict between W3.CSS responsive classes and the Views table's responsive sticky header. I updated the Views table Twig template to disable the W3.CSS class when either sticky or responsive settings are active in Views. The fix has been tested and pushed to the dev branch → —feel free to use it.

Best wishes,
Alaa

Hello Mark,

You are welcome! The right-side menus are standard menus with some custom css. Go to your-site-dot-com/admin/structure/menu/add to create a new menu and add links. Then, navigate to your-site-dot-com/admin/structure/block, place the menu, and configure it as needed.

Best wishes,
Alaa

Hello Mark,
Thank you for reaching out and for your kind words about the feature page formats! I'm glad to hear you find them a valuable enhancement to your W3CSS layouts.

I'd be happy to share the code with you to help you get started. However, implementing and customizing it for your site may be complex, and it's not something I can effectively guide you through remotely.

Here is the code:

{% set classes = [
    'node solo-clear solo-teaser',
    'node--type-' ~ node.bundle|clean_class,
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
  ]
%}

{{ attach_library('solo_helper/content-info') }}

{% set node_title = node.label|striptags|trim %}
{% if node.field_teaser_mode is not empty %}
  {% set node_summary = node.field_teaser_mode.processed|striptags|trim %}
{% else %}
  {% set node_summary = node.body.summary|render|striptags|trim %}
{% endif %}
{% set node_url = url('entity.node.canonical', {'node': node.id}, {'absolute': true}) %}
{% if node.uid.entity %}
  {% set user = node.uid.entity %}
  {% set user_url = path('entity.user.canonical', {'user': user.id}) %}
  {% set user_picture = user.user_picture.target_id ? file_url(user.user_picture.entity.fileuri) : null %}
  {% set user_name = user.name.value %}
  {% set comment_count = node.comment and node.comment.comment_count ? node.comment.comment_count.value : '0' %}
  {% set first_last = (user.field_first_name.value ~ ' ' ~ user.field_last_name.value)|trim %}
{% endif %}


<article{{ attributes.addClass(classes) }}>

  <h2 {{ title_attributes.addClass('node__title') }}>
    <a href="{{ url }}" rel="bookmark">{{ label }}</a>
  </h2>

  <div class="solo-author-info">

    {% if user.field_user_social_media is not empty %}
    <div class="teaser-author-social sm-icons">
    {% for item in user.field_user_social_media %}
      {% set url = item.uri %}

      {% if 'facebook' in url %}
        <a class="facebook" href="{{ url }}" aria-label="Facebook Profile" target="_blank">
          <span>{% include '@solo/partials/svg/_svg-facebook.html.twig' %}</span>
        </a>

      {% elseif 'twitter' in url %}
        <a class="twitter" href="{{ url }}" aria-label="Twitter Profile" target="_blank">
          <span>{% include '@solo/partials/svg/_svg-twitter.html.twig' %}</span>
        </a>

      {% elseif 'linkedin' in url %}
        <a class="linkedin" href="{{ url }}" aria-label="LinkedIn Profile" target="_blank">
          <span>{% include '@solo/partials/svg/_svg-linkedin.html.twig' %}</span>
        </a>

      {% elseif 'drupal' in url %}
        <a class="drupal" href="{{ url }}" aria-label="Drupal Profile" target="_blank">
          <span>{% include '@solo/partials/svg/_svg-drupal.html.twig' %}</span>
        </a>
      {% endif %}

    {% endfor %}
    </div>
    {% endif %}

    {% if first_last or user_name %}
    <div class="author-picture">
      <a href="{{ user_url }}" title="{{ user_name }}">
        <span>
          {% if user_picture %}
            <img src="{{ user_picture }}" alt="{{ user_name }}">
          {% else %}
            {% include '@solo/partials/svg/_account.html.twig' %}
          {% endif %}
        </span>
        &nbsp;
        <span>
          {% if first_last %} {{ first_last }} {% else %} {{ user_name }} {% endif %}
        </span>
      </a>
    </div>
    {% endif %}
    <div class="author-calendar">
      <span>{% include '@solo/partials/svg/_calendar-clock.html.twig' %}</span>
      &nbsp;
      {% if node.changed %}
        <span>Last Updated: {{ node.changed.value|date('g:i A, M d, o') }}</span>
      {% else %}
        <span>Last Updated: Not available</span>
      {% endif %}
    </div>
    {% if comment_count > 0 %}
    <div class="author-comment">
      <span>{% include '@solo/partials/svg/_comment.html.twig' %}</span>
      &nbsp;
      <span>{{ comment_count }} Comment{{ comment_count|number_format > 1 ? 's' : '' }}</span>
    </div>
    {% endif %}

  </div>

  <div{{ content_attributes.addClass('solo-clear node__content') }}>
    {# {{ content }} #}
    <div class="teaser-image-wrapper">

      <div class="author-share sm-icons">
          <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ node_url }}" aria-label="Share on Facebook" target="_blank">
            <span>{% include '@solo/partials/svg/_svg-facebook.html.twig' %}</span>
          </a>
          <a class="twitter" href="https://x.com/share?url={{ node_url }}&text={{ node_title }}" aria-label="Share on X" target="_blank">
            <span>{% include '@solo/partials/svg/_svg-twitter.html.twig' %}</span>
          </a>

          <a class="linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url={{ node_url }}" aria-label="Share on LinkedIn" target="_blank">
            <span>{% include '@solo/partials/svg/_svg-linkedin.html.twig' %}</span>
          </a>
          <a class="email" href="mailto:?subject={{ node_title }}&amp;body={{ node_summary }} {{ node_url }}." aria-label="Email the Article" target="_blank">
            <span>{% include '@solo/partials/svg/_svg-email.html.twig' %}</span>
          </a>
          <span class="share-teaser"><strong>Share</strong></span>
      </div>
      {{ content.field_node_image }}
    </div>

    <p>{{ node_summary ~ ' ...' }}</p>

    {% if content.links %}
    {{ content.links }}

{% endif %}

  </div>

</article>

Best Wishes,
Alaa

Hello,

Version 1.0.12 now includes RTL language support. Feel free to download, test it, and let me know if you need further assistance.

Best wishes,
Alaa

Hello,

I updated Views Responsive Table Column Priorities (High, Medium, Low):

• High: Displays on all screen sizes.
• Medium: Displays on screens 576px and wider.
• Low: Displays on screens 992px and wider.

Feel free to download the dev version and test it! The work was pushed to the dev release → and is available on the demo site.

Best wishes,
Alaa

Hello,

In the W3CSS theme, a checkbox was used to disable the credit text, but users couldn’t customize it. In the Solo theme, I’ve made it customizable, so users can enter their own company name. To disable it, just clear the text field.

https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/s... →

Best wishes,
Alaa

Update description

Hello,

This approach won’t work for the Authored By field, which is the main reason this module was created. For the issue you have is likely due to Drupal’s default behavior, where blocked users can’t have their profiles or referenced fields rendered for anonymous users. To allow anonymous users to see fields of blocked users in a reference field, her is a solution:

2- Add the following to your theme/module, I used article as a content type.

use Drupal\file\Entity\File;
use Drupal\Core\Url;

function HOOK_preprocess_node(&$variables) {

  if ($variables['node']->bundle() == 'article') {
    // Load the referenced user.
    if ($user_reference = $variables['node']->get('field_user')->entity) {
      // Check if the user is blocked.
      if ($user_reference->isBlocked()) {
        // Manually load user data fields (e.g., name, email).
        $variables['blocked_user_name'] = $user_reference->getDisplayName();
        $variables['blocked_user_email'] = $user_reference->getEmail();

        // Load other fields.
        $variables['blocked_first_name'] = $user_reference->get('field_first_name')->value;
        $variables['blocked_last_name'] = $user_reference->get('field_last_name')->value;

        // Load the user picture URL if it exists.
        if ($user_picture = $user_reference->get('user_picture')->entity) {
          $file_uri = $user_picture->getFileUri();
          $variables['blocked_user_picture'] = \Drupal::service('file_url_generator')->generateAbsoluteString($file_uri);
        }

        $variables['blocked_user_summary'] = $user_reference->get('field_user_summary')->value;
      }
    }
  }
}

2- Create a custom twig template for the content type (node--your-content-type.html.twig) and add the following fields:

{% if blocked_user_name %}
  <p>User Name: {{ blocked_user_name }}</p>
{% endif %}

{% if blocked_user_email %}
  <p>Email: {{ blocked_user_email }}</p>
{% endif %}

{% if blocked_first_name %}
  <p>First Name: {{ blocked_first_name }}</p>
{% endif %}

{% if blocked_last_name %}
  <p>Last Name: {{ blocked_last_name }}</p>
{% endif %}

{% if blocked_user_picture %}
  <p><img src="{{ blocked_user_picture }}" alt="{{ blocked_user_name }}'s picture"></p>
{% endif %}

{% if blocked_user_summary %}
  <p>Summary: {{ blocked_user_summary }}</p>
{% endif %}

This is an example of fields on the demo site; feel free to customize it to match your field names

Best wishes,
Alaa

Hello,

I understand that work is underway on this feature in Drupal core, and I’ve mentioned that on the homepage for this module. However, I’m still uncertain if the patch will address the Authored By field, which was the primary motivation for creating this module. In any case, I’ll wait until this feature is fully integrated into Drupal core.

I'm not a big fan of patching core; if the choice is between patching core and installing a contrib module, I always opt for the contrib.

Thank you!
Alaa

Hello,

The "force using fields" feature has its place in Views, but I wouldn't recommend it with Views Slideshow. The descriptions for the two slideshow types on the homepage.

Two Slideshow Types: Offers two types of slideshows: one based on view mode that can include multiple fields, and a hero slideshow requiring a row style with the first field as an image or responsive image. Create a prominent, full-width slideshow with large images and overlaying content, perfect for showcasing key visuals at the top of a webpage.

There's a potential issue with the validate() method when using "force using fields"—the $form_state variable is being used without being properly declared or passed into the function. In Drupal, the FormStateInterface object ($form_state) is essential for setting form errors, but it isn’t automatically available in this context. I updated the validate() method accordingly so $form_state is now handled properly.

Best wishes,
Alaa

Hello,

Just put your blocks in an appropriated (and equivalent) region in the new solo theme?

Yes
Copy the blocks along with their configurations to the Solo theme..

Best wishes,
Alaa

Hello,

This issue is unrelated to the theme you’re using in Drupal. In Google PageSpeed Insights, the "Rendering Largest Content" alert flags elements that may impact load time, such as a large block of text, which is identified as the Largest Contentful Paint (LCP).

This can sometimes occur when custom or Google fonts are used, as these require additional loading time for rendering. To optimize, it may help to use system fonts that load quickly, consider reducing text length, or ensure that font files load efficiently. Addressing these factors can improve page speed and contribute to a smoother user experience.

Best wishes,
Alaa

Hello,

All fonts in the library have been tested and are working as expected. To test a font:

1. Disable Drupal aggregation at admin/config/development/performance.
2. In the active theme settings, enable a Google font (e.g., Roboto) under global fonts.
3. Visit the site, open the inspector, and search the source code for fonts.google. You should see something like:
   
   
4. Go back to theme settings, deselect this font, then refresh the page and check the source again. The Google font link should no longer appear.

If Google Fonts still appear, it could be due to caching, a module adding the font automatically. Clearing caches or disabling modules one by one can help pinpoint the source.

Best wishes,
Alaa

Hello,

Please check the menu configuration ../admin/structure/block to ensure it's correctly configured in the region. Make sure you select Expand all menu links

Best wishes,
Alaa

Glad it worked!

Hello,

A 400 Bad Request error generally means the server cannot process the request because of a client-side issue. Invalid Request Syntax, API Format Mismatch or Authentication Issues. In your case, it's specifically indicating an "Authentication error," meaning the credentials (Zone ID or API token) are likely incorrect or incomplete.

Fixing the authentication (API token and Zone ID) should usually resolve this kind of issue.

Best wishes,
Alaa

Hello,

The menu on the page isn't rendered. Please check the menu configuration to ensure it's correctly assigned to the intended region.

Best wisehs,
Alaa

Hello,

I'm glad it worked! If you're not modifying any HTML tags, there's no need to override the template. You can achieve the same result by simply applying CSS to the h3.pb__content-title element:

h3.pb__content-title {
  text-align: center;
}

Best wishes,
Alaa

Hello,

It seems that a contrib module related to menus is preventing the sidebar menu from inheriting the default template. The workaround is to create a custom Twig template for each menu you add to the sidebars.

Any side menu if you don't have this module will act like https://cat-tobi.upf.edu/labelling_system/tonal_representation/pitch_acc....

Best wishes,
Alaa

Hello,

To replace the html tag for the icon from div to h1....h5, you will have to update the twig template. There is a custom twig template for this bundle inside ../paragraphs_bundles/modules/paragraph_bundle_icon/templates/paragraph--icon-bundle.html.twig. You can copy this template to your theme and update the html tag from div to h1....h5.

Best wishes,
Alaa