🇺🇸United States @flashwebcenter

Hello,

Thank you very much for the clear pdf. I tested the right alignment with and without the logo, as well as with the menu flipped — everything is working as expected.

Best wishes
Alaa

You're very welcome — I'm glad to hear it's working beautifully!

Thank you as well for your kind words. I truly appreciate the feedback, and it means a lot to know the theme's organization and clarity stand out. If you need anything else or have further questions, I'm always happy to help!

Hello,

Thank you for the screenshots and the detailed description.

The menu is designed to target the immediate children of a LI that contains a button or link. However, when a menu item uses nolink and has no child items, Drupal renders it as a span instead of a link or button.

I’ve updated the menu logic to account for this scenario. It is pushed to dev feel free to use it.

Best wishes,
Alaa

Yes, I don't understand you. Please make a video and describe the issue.

Hello,

The logo option has no relationship with the menu. The description is updated so people don't confuse aligning the entire block with aligning individual child elements.

Best wishes,
Alaa

Hello,

The alignment moves the entire main menu block (not the items inside it) within its parent container. That means the full menu block itself shifts left, center, right, or stretches (justify) horizontally depending on the setting. The description was updated in the theme.

Best wishes,
Alaa

Hello,

A new dropdown has been added under the Theme Settings in the Primary Menu Settings section. This dropdown allows you to choose the main menu alignment with four available options: Left, Right, Center, and Justify.

This feature has been pushed to the development branch. You are welcome to start using it now or wait for the full release.

Best wishes,
Alaa

Hello,

I usually download the fonts from https://gwfh.mranftl.com/fonts and link them to my theme. I created a sub-theme → with an example.

Best wishes,
Alaa

Hello,

In the demo I have the main menu and the logo in the same region. You can flip the main menu and the header as the demo then use this code to align the main menu to right.

https://www.youtube.com/watch?v=w9qRuAtfLTI

Place this code in the theme settings under Global settings in CSS Injector.

#page-wrapper .navigation__primary {
  margin-left: auto;
}

Best wishes,
Alaa

Hello,

The menu system in Solo has been thoroughly tested and fully respects any custom classes applied to menu links.

If you're experiencing issues with the menu, it's likely due to a conflict specific to your site’s configuration or custom code. Unfortunately, I'm unable to assist with site-specific conflicts outside the scope of the theme.

Thank you for your understanding.

Best wishes,
Alaa

Hello,
Hello,

The primary menu uses a custom template and is specifically built for its designated region. If you'd like to add a menu to the header area, please follow these steps:

1. Create a sub-theme to override the necessary templates without affecting the base theme.
2. Create a new menu via the Drupal admin interface (Structure > Menus).
3. Use the horizontal menu template as a reference to create a custom template for the new menu. https://www.youtube.com/watch?v=UJpNOawzl9E&list=PLZVSLeSmRrd1nqYAFOyalL...

This approach ensures the header menu is styled and structured according to your design needs while maintaining best practices.

Best wishes,
Alaa

Hello,

Thank you for bringing this feature to my attention. I've added a "None" option to the date format dropdown, allowing users to opt out of custom formatting and fall back to Drupal's default behavior.

This enhancement is now available in the development version of the theme. You're welcome to try it out or wait for its inclusion in the next full release.

Best regards,
Alaa

Hello,

For 2 Show Collapse or Expand (Single): please download the new release.
For 3 When I open a tab, the previous one should close, as in the page: I added a new feature in the new release called (Exclusive panel). Allow only one panel to be open at a time.

Best wishes,
Alaa

Hello,

The height of each slide is calculated dynamically to ensure smooth transitions. However, when margin is added to the slide’s child elements (such as the paragraph), that margin isn't included in the calculated height.

To address this, I’ve added a small CSS adjustment to ensure the height is calculated correctly.
Please download the latest version and use that going forward.

Best wishes,
Alaa

Hello,

Here is an example of how to use this module:

1. Create five content items using any content type available in your system.
2. Create a View and select the Tabs display format.
3. Add the Title field as the first field in the view—this will be used as the tab label.
4. Add the Body field after the title—this content will be displayed when a user clicks on each tab.
5. This behaves exactly like the accordion module you've used before.

Best wishes,
Alaa

You too!

Hello,

The only difference between versions 1.0.13 and 1.0.18 is that the bottom borders were moved from the

Hello,

The poem you're using appears on a single page. This module is designed to work with multiple pieces of content, which can then be displayed using a View.

You could use the Paragraphs module to create tabs and show one section at a time.

As for borders, I apply custom classes to target specific tables. I don’t use inline styles, so unfortunately I can't offer help with that part.

Best wishes,
Alaa

Hello,
1- I updated the gaps in 1.0.8 version feel free to use it. Now the gap is controlled in the parent wrapper if want to update the gap use this code:

.vvja .vvja-inner {
  --grid-gap: 12px or 16px;
}

2- You should use the inspector and inspect the element to see what is the reason or send the link.

3- This accordion does not work this way. when I have time I will add this feature.

Best wishes,
Alaa

Hello,
You should use the browser inspector to examine the element and understand the cause of the issue—it might be a conflict. You can also try using !important to force the style override if needed.

If a CSS variable is already assigned to the HTML element, try using the variable instead of hardcoding the color or background value.

#page-wrapper .solo-inner ul.navigation__menubar li>a.is-active,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>a,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>button {
  --r-bg: #5881AE;
  --r-tx:  #FF0000;
}


#page-wrapper .solo-inner ul.navigation__menubar li>a.is-active:hover,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>a:hover,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>button:hover {
  --r-bg: #FF0000;
  --r-tx:  #FFFFFF;
}

In your code, I noticed that in the second group, the hover effect is only applied to #page-wrapper .solo-inner ul.navigation__menubar li.is-active > button:hover. Was this intentional?

Best wishes,
Alaa

Hello,

I tested the paragraph slideshow locally using Drupal 11, and it's working as expected. It's unclear how you've added the slideshow, but based on your screenshot, it looks like the slideshow sections aren't displaying correctly.

Please check the paragraph bundle and confirm that all required fields are present. You can review the form display configuration by visiting:

your-site.com/admin/structure/paragraphs_type/slideshow_bundle/form-display

When you first add a slideshow, you should see a default structure like this.

Similarly, when editing content to modify the slideshow, the form should display relevant fields as well.

If you're still having trouble identifying the issue, I recommend starting from scratch. Try uninstalling the relevant modules, ensuring all related configuration is removed, then reinstall everything again. Be sure to check the settings under "Manage display" and "Manage form display" for each paragraph bundle.

Let me know how it goes!

Best wishes,
Alaa

Hello,

To change the color for the active menu link:

#page-wrapper .solo-inner ul.navigation__menubar li>a.is-active,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>a,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>button {
  --r-tx: blue;
}

To change the color for the page title:

#page-wrapper .page-title-text,
#page-wrapper .page-title-text * {
  --r-h1: blue;
}

Best wishes,
Alaa

Hello,

Thank you for the explanation. However, I’m working within a tight deadline, so I’d like to clarify something quickly.

The code you applied for the table styling doesn’t seem to work as intended. Specifically, the selector you used — #page-wrapper .no-border tr th, #page-wrapper .no-border tr td — will not be effective unless the table itself has the .no-border class applied.

In the Solo theme, a bottom border is applied only to td and th elements globally (both in Solo and global styles). Additionally, a border around the full table is only added when using a custom Twig template that includes it.

My recommendation would be to choose one of the previously suggested methods to properly target the kind of tables you're working with, depending on whether you're styling via CSS or custom Twig templates.

Best wishes,
Alaa

Hello,

Yes, there are many possible solutions. I initially assumed you had a single table where you wanted to remove the borders. In the development version, I removed the default table borders globally. Now, table borders are only added when you're creating a View.

Here are some options you can consider:

Reset all table styles and customize them as needed

#page-wrapper table {
  all: unset;
  display: table;
  border-collapse: collapse;
  width: auto;
}

#page-wrapper th,
#page-wrapper td {
  all: unset;
  padding: 0;
}

Target tables inside a specific region

#sidebar-box-main table tr th,
#sidebar-box-main table tr td { 
  border: none;
}

Target tables used within a specific content type

.page-node-type-link  table tr th,
.page-node-type-link  table tr td { 
  border: none;
}

Target tables inside a specific field type

.field--type-text table tr th, 
.field--type-text-with-summary table tr td {
    border: none !important
}

Target tables inside a specific field name

.field--type-text table tr th, 
.field--type-text-with-summary table tr td {
    border: none !important
}

Best wishes,
Alaa

Hello,

It seems like the browser isn't loading the updated file. I've updated the theme → to include a version number when attaching JS/CSS, which forces the browser to load the new code. Feel free to use that.

Additionally, you can clear the browser cache or do a hard reload:

Firefox: Ctrl + F5 (Windows/Linux) or Cmd + Shift + R (Mac)
Or open DevTools → go to the "Network" tab → check "Disable cache"

Best wishes,
Alaa

Hello,

Two types of borders are added: one for the table and another for the td/th elements.

#page-wrapper table,
#page-wrapper table tr th,
#page-wrapper table tr td {
  border: none;
}

or create a css class and add it to any table:

#page-wrapper table,
#page-wrapper .no-border,
#page-wrapper .no-border tr th,
#page-wrapper .no-border tr td {
  border: none;
}

Best wishes,
Alaa

Hello,

The JS/CSS files are dynamically generated and saved to either ../web/sites/default/files/solo/solo-css-dynamic.css or ../web/sites/default/files/solo/solo-js-dynamic.css. These files are created when you visit any page on the site. You can add your CSS, save it, and then visit any page to trigger the file creation. If aggregation is disabled, you can inspect the page source in your browser and view the attached CSS directly. To confirm the file exists, you can also check the path manually. If it's missing, you may be dealing with a file permissions issue.

Best wishes,
Alaa

Hello,

Two types of borders are added: one for the table and another for the td/th elements.

#page-wrapper table#myTable,
#page-wrapper table#myTable tr th,
#page-wrapper table#myTable tr td {
  border: none;
}

Best wishes,
Alaa

Hello,

After testing all type of tables created in Drupal, unfortunately the default Solo's template isn't applied everywhere, leading to inconsistencies in table layouts. In the latest release, I implemented basic table settings to ensure a uniform look across all tables.

Best wishes,
Alaa

Hello,

Solo uses a custom Twig template for tables, but unfortunately, this template isn't applied everywhere, leading to inconsistencies in table layouts. In the latest release, I implemented basic table settings to ensure a uniform look across all tables.

Best wishes,
Alaa

You are welcome! The two borders are the border space.

html #page-wrapper table {
    border-spacing: 0;
   margin: 0 auto;
}

Best wishes,
Alaa

Hello,

By default in Solo theme, without adding custom code, the table appears as shown in the first screenshot. You only need to apply colors.

Ensure that any existing table styles are removed to prevent conflicts before applying the new styles. The expected outcome should match the second screenshot.

html #page-wrapper table {
  border: 1px solid #bcc8ad !important;
}

html #page-wrapper table th {
  background: #f5f0e7 !important;
  border-bottom: 3px solid #b0e6d1 !important;
}

html #page-wrapper table tbody tr {
  border-bottom: 1px solid #bcc8ad !important;
}

html #page-wrapper table tbody tr:last-child {
  border-color: #bcc8ad !important;
}

Best wishes,
Alaa

Hello,

Please refer to the video tutorials for guidance on configuring each module. Every module includes a demo and is fully functional on the demo site. If something isn't working on your site but works on the demo, it likely means there is an issue specific to your setup preventing it from functioning correctly. Additionally, if I can't replicate the issue, I won't be able to assist you.

The demo for each module: Accordion Demo, 3D Carousel Demo, 3D FlipBox Demo, Hero Demo, Lightbox Demo, Parallax Demo, Reveal Demo, Slideshow Demo, and Tabs Demo.
To get started, check out our Video Demo for a step-by-step guide on using the module effectively. Explore our mixed demos here: Live Demo One | Live Demo Two. The site for the live demo is built with the Solo Theme → .

Best wishes,
Alaa

Hello,

The first level of the main menu remains sticky when scrolling, but the dropdown menu is not scrollable. If you have too many items in the dropdown and are using a low-resolution monitor, you can adjust the padding in the dropdown to improve visibility.

The attached screenshot shows the menu at 1280 × 756 resolution after updating the padding to 3px 12px.

Use the following code to target the dropdown menu. If it doesn’t work, be sure to clear the caches.

#page-wrapper .navigation__menubar:not(.navigation__megamenu) li li.nav__menu-item>a,
#page-wrapper .navigation__menubar:not(.navigation__megamenu) li li.nav__menu-item>button {
  padding: 3px 12px;
}

Best wishes,
Alaa

The style for the table in this page is custom:

th {
    background-color: #f5f0e7;
    border-bottom: 3px solid #b0e6d1 !important;
}
.bordertab {
    border-bottom: 1px solid #BCC8AD !important;
}

And the table border, which you can remove it with the same css:

#page-wrapper table {
    border-spacing: 0;
    border: 0;
}

Best wishes,
Alaa

Hello,

If the variable isn't working, it means it hasn't been assigned to the specific HTML tag. In your example, the CSS class .Stile5 is applied to a paragraph tag. To ensure the color override works in all cases, you can use an ID in your CSS. However, I intentionally prefer using CSS classes instead of IDs so that users can easily override default styles.
Here’s an example:

#page-wrapper .Stile5 {
  --r-tx: #CC3366;
}

This setup works on any of the following tags: img, code, pre, kbd, samp, p, hr, ul, ol, ul li, ol li, table, th, td, tr, blockquote.
For list items, you can apply the variable like this:

#page-wrapper li {
  --r-tx: #CC3366;
}

If you want to apply a variable to everything inside a div or paragraph tag, you can use:

#page-wrapper p *  {
 color: var(--r-tx);
}

This ensures that any nested elements within the paragraph tag inherit the color variable.
If you need to assign a specific color to a or any other HTML tag separately, you can do:

#page-wrapper p span {
  --r-tx: #CC3366;
}

Regarding the double border issue in tables, I noticed it's being applied by the browser’s default user agent stylesheet. You can fix this by setting border-spacing to 0:

#page-wrapper table {
  border-spacing: 0;
}

Best wishes,
Alaa

Hello,

I adjusted the padding in the main menu to better differentiate between first-level and second/third-level items. This update should improve the appearance of long dropdown menus. The changes are available on the demo site—feel free to check them out. If you’d like to customize the dropdown menu padding in the sub-theme, you can test it with the following:

.solo-inner .navigation__menubar:not(.navigation__megamenu) li li.nav__menu-item>a,
.solo-inner .navigation__menubar:not(.navigation__megamenu) li li.nav__menu-item>button {
  padding: var(--solo-px6) var(--solo-px12);
}

Best wishes,
Alaa

Hello,

With this update, the (paragraph) tag now inherits text color through a CSS variable. This means that if you apply a color to a region via the theme settings, paragraphs inside that region will automatically use the assigned color, ensuring consistency across your design.

Previously, applying a class like .Stile5 to a paragraph (paragraph) meant you had to manually set a text color. Now, with CSS variables, you have two ways to apply colors to elements such as:
img, code, pre, kbd, samp, p, hr, ul, ol, ul li, ol li, table, th, td, tr, blockquote
Using a Fixed Color:

.Stile5 {
  color: #CC3366 !important;

}

Using a CSS Variable:

.Stile5 {
  --r-tx: #CC3366;
}

Table borders now inherit the global color assigned to the main container. If you need to override the border color for specific elements, you can set the --r-br variable like this:

.page-node-type-vulcani .main-box-inner * {
  --r-br: blue;
}

Best wishes,
Alaa

Hello,

In the previous release, unordered lists (UL/LI) were given a background color unless they were inside a field. However, this behavior was missing for ordered lists (OL/LI), so it has now been applied to them as well. Additionally, I've updated the logic to ensure that background color is also removed when these elements are inside a views-field. This update is available in the development version—feel free to use it.

Best wishes,
Alaa

Thank you for testing and confirming. Glad to hear the issue is resolved. Feel free to report any new concerns. Appreciate your feedback!

Best wishes,
Alaa

Thank you for testing and confirming. Glad to hear the issue is resolved. Feel free to report any new concerns. Appreciate your feedback!

Hey,
Thanks for the info! I made some updates to the dev version to ensure the breadcrumb is converted to a string before processing. Feel free to download the latest dev version and test it out—let me know if you still run into this issue.

Best wishes,
Alaa

Hello,

I followed the direction, but I could not get the error. can you please share more details on how to get this error.

Best wishes,
Alaa

Hi,

The latest release removed forced colors from child elements in any region, giving users more flexibility to apply their own styles. If you want to set a background color for the dropdown, you can add this CSS in the theme settings:

#page-wrapper ul {
  background-color: blue;
}

At the same time, I’ve updated the dev version to automatically add a background color when the ul is used as a dropdown.

You can either apply your preferred color manually or switch to the dev version for the update. Let me know if you need any help!

Best wishes,
Alaa

Hello,

Are you saying that you can't see the region settings when you navigate to Admin > Appearance > Settings > Solo (admin/appearance/settings/solo)?

There is a message on this page, it states:

and on Solo's homepage, it states:
"Intelligent Design for a Clean Admin Experience
Solo’s intelligent design system hides unused region settings from the theme configuration page. This reduces clutter, making the interface cleaner and easier to navigate. This is especially helpful for Drupal site builders who want to focus only on the settings they actually need."

Please add any blocks to see the region settings.

Best wishes,
Alaa

Hello,

On a fresh install, all configurations for the specified region work as expected. The configurations were exported to solo.settings.yml and solo_subtheme.settings.yml. In your case, it's unclear how the subtheme was created and where it is located. The Solo subtheme serves as an example—you should copy and rename it as needed ../web/themes/custom/my-subtheme. This is the recommended approach.

Best wishes,
Alaa

Hello,

The Solo theme includes some block configuration provided through config/optional files, located in solo/config/optional. These configuration files are the same in versions 1.0.12 and 1.0.14. This configuration is only applied when you install the theme for the first time. If you modify these configuration files after the theme is already installed, the changes will not take effect unless you uninstall and reinstall the theme.

When upgrading the theme from 1.0.12 to 1.0.14, you should not uninstall the theme. Uninstalling and reinstalling the theme will reset all your existing settings, replacing them with the default configuration provided by the theme.

If you accidentally uninstalled the theme (or a module) and lost your custom configuration, here are some tips to try to restore your old config:

• Backups (if available): If you have a database backup from before the uninstall, restore the backup. This is the easiest way to get all your old settings back.
• Config Export (if you exported before): If you previously exported your site configuration (drush config-export or from the admin UI), you can re-import (drush config-import) after reinstalling the theme to restore your settings.
• Manual Rebuild (if no backups exist): If you have no backup, you’ll have to manually reconfigure the blocks, theme settings, and any other configurations tied to the theme. You could reference an old staging/dev environment if you have one.
• Partial Config Import: If you still have access to a copy of your config/sync folder or the old database, you can manually copy over just the config files related to the theme (like block.block.*, theme.settings.solo, etc.) and import only those. Be careful when mixing old and new config to avoid compatibility issues.

Best wishes,
Alaa

Hello,

If you have steps to reproduce the error or specific directions, please include them here and I will take a look.
Best wishes,
Alaa

Hello,

For a paragraph bundle to work correctly, it must use its own template file. If a module or theme overrides this and prevents the correct template from loading, the bundle won’t function as expected.

If you don’t see the tab navigation, it might mean the correct template isn’t being used you can check if the correct Twig template is used. If you do see the tabs but they aren’t clickable, there could be a JavaScript error. Inspect your browser’s console for any errors.

Best wishes,
Alaa

Hello,

Solo theme does not support four level menu.
https://www.drupal.org/project/solo/issues/3439615 ✨ Enhancing Solo Theme: Integrating Fourth-Level Into Primary Menu Closed: works as designed
https://www.drupal.org/project/solo/issues/3508038 💬 Menu design improvement Active

Best wishes,
Alaa

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