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>
<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>
{% 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>
<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 }}&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
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:
- Disable Drupal aggregation at admin/config/development/performance.
- In the active theme settings, enable a Google font (e.g., Roboto) under global fonts.
- Visit the site, open the inspector, and search the source code for fonts.google. You should see something like:
- 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
No worries! I’m glad to hear the issue is resolved.
Hello,
The footer contains a menu and social media links on the demo site, functioning as expected.
Best wishes,
Alaa
Hello,
Simple enough to test, create a content type with a handful of images, do some settings for them and see if the settings are applied.
Thank you for sharing your testing approach! However, VVJS is actually designed to create slideshows from multiple content items, not from an image field with multiple images. I recommend trying it out with different content items as slides to see how it works. This approach should align with VVJS’s functionality and showcase its capabilities effectively.
You can check out the demo for examples of the various types of slideshows you can create. In VVJS, each slide represents a separate content item.
Best wishes,
Alaa
Hello,
Regarding the issue at https://www.drupal.org/project/vvjs/issues/3476868 💬 Demo suggestions Active , I previously mentioned:
For your website, each Juicebox gallery content includes a slideshow feature, similar to what is provided by the ImageField Slideshow module. This allows you to create a slideshow from multiple images within a single field. With VVJ Suite, the modules filter across different types of content, paragraphs, and blocks, enabling each node, block, or paragraph to contain its own image. One view can be used across unlimited content, as long as the content architecture is flexible and structured for easy manipulation.
To clarify further:
- ImageField Slideshow Module/Juicebox Gallery Content with Slideshow Feature: Each Juicebox gallery can include a built-in slideshow similar to the ImageField Slideshow module, allowing for a slideshow within a single image field containing multiple images.
- VVJ Suite Functionality: The VVJ Suite modules allow filtering across different types of content, such as paragraphs and blocks. This enables individual elements like nodes, blocks, or paragraphs to each have their own unique image associated with them.
In conclusion, there are two main ways to build a slideshow on your website. The first approach uses the Juicebox gallery or ImageField Slideshow module to create a slideshow from multiple images within a single content piece. The second approach, facilitated by VVJ Suite, builds a slideshow from multiple content pieces, each containing a single image.
Best wishes,
Alaa
Hello,
Thank you for pointing this out. The theme was not tested with right-to-left (RTL) languages, and it appears that the Primary Sidebar Menu currently does not function as expected in RTL mode. I will need to add support for RTL languages as a feature in a future update to ensure seamless functionality. I appreciate your feedback!
Best wishes,
Alaa
Hello,
It looks like the issue you’re encountering is due to configuration file duplication between the root and language-specific folders. This duplication doesn’t seem to be directly related to the Solo theme itself, as it doesn’t include any specific settings. Instead, it appears to be a configuration management issue within Drupal, particularly regarding how translations are handled for configuration items like blocks.
In your case, the root configuration file contains the translated label, while the file in the language-specific folder still has the English label. This discrepancy is causing inconsistencies in displaying content across different languages, as the translated content is not consistently applied.
Here are some steps to help address this issue:
- Check Configuration Translation Synchronization
Drupal stores configuration translations separately, and these can sometimes become out of sync. You can force synchronization by exporting and re-importing the configuration:- Export Configuration:
- Go to Configuration > Development > Configuration Synchronization.
- Export either the specific configuration items affected or the entire site configuration.
- Edit Translations:
- In the exported
.yml
files, verify if the files in the translation folders contain the correct language labels. - If any translation labels are missing, manually update these files to ensure accuracy.
- In the exported
- Import Configuration:
- Import the updated configuration back into Drupal to synchronize the settings with the correct labels.
- Export Configuration:
- Update Translation Strings
If specific labels aren’t translating correctly:- Go to Configuration > Regional and language > User interface translation.
- Search for the untranslated label (e.g., 'User account menu') and translate it directly. This can sometimes force the translation to take effect in the configuration.
- Clear Cache
After making any changes, clear the Drupal cache by going to Configuration > Performance > Clear all caches. This ensures the new translations are applied.
- Review Language Settings for Block Configuration
Language-specific block settings may override the default configuration:- Go to Structure > Block Layout and find the block for the User Account Menu.
- Verify that the block is set to be visible for the appropriate languages and is configured correctly for each one.
Best wishes,
Alaa
Great! Glad you were able to resolve it.
Hello,
I’m using a content type example from my site at https://unitedstarsofamerica.com/berry-and-fruit-tones/solo-blueberry-sk.... The content type has the following fields: Title, Category, Image, Body, and Links. The Category field is a taxonomy field connected to a vocabulary called "Category" (located at /admin/structure/taxonomy). Whenever I add a new color scheme image, I tag it with relevant taxonomy terms. In this example, I tagged the content with "Ocean and Deep Sea Themes," "Blue," and "Light and Dark."
I also created a view at https://unitedstarsofamerica.com/color-schemes, where the Category field is exposed twice—once as "Category" and again as "Colors."
Here’s how you can achieve something similar on your own site:
Organize Your Images: If you have a large set of images (e.g., 10,000), you can organize them in folders by criteria such as year, event, or place.
Install PB Import: Install the PB Import module and use it to create nodes for each image. Each node will have its own title, associated image, and relevant taxonomies.
Prepare CSV Files: The next critical step is creating CSV files to batch upload the data. Each image should have its own entry, including the URL, title, and taxonomy tags. For example:
csv_image_url, csv_node_title, csv_image_alt, csv_image_title, csv_node_tag, csv_node_body
paragraphs-bundles-import.jpg, The Image Title, Optional image alt, optional image title, Paris | First Day | Cluny and Notre Dame, optional body text
Import the CSV Data: After creating the nodes, you can display the data using a view, choosing the appropriate plugin for your display needs (e.g., Slideshow, Tabs, 3D Carousel).
Create a Filterable Page: You can then expose taxonomy terms in your views to allow users to filter the slideshow or create menu links to pre-filtered views.
This method allows you to efficiently categorize, import, and display thousands of images in an organized way, providing flexibility in how users can view and filter the content.
Hello,
All the VVJ Suite modules come with a view example, demonstrating how view plugins can be applied to various elements, such as content, content blocks, paragraphs, etc., not limited to content types. These examples are not intended for direct use but to illustrate how the plugins function. Creating a dedicated content type for each module would add unnecessary configuration overhead to your site.
For your website, each Juicebox gallery content includes a slideshow feature, similar to what is provided by the ImageField Slideshow module → . This allows you to create a slideshow from multiple images within a single field. With VVJ Suite, the modules filter across different types of content, paragraphs, and blocks, enabling each node, block, or paragraph to contain its own image. One view can be used across unlimited content, as long as the content architecture is flexible and structured for easy manipulation.
In Views, you can leverage contextual filters to dynamically filter content. Alternatively, if your content is tagged, you can expose filters and allow users to interactively filter the displayed data. For example, in the demo site’s color schemes page (https://unitedstarsofamerica.com/color-schemes), the page itself is a view where any view plugin can modify the display (e.g., 3D carousel, slideshow). Here, I’ve also added exposed filters so users can refine the content display themselves.
It’s important to differentiate between data storage and data presentation. When storing data (content, images), I ensure everything is tagged with all potential criteria the client may later want to use to filter or display the data. The more time you spend architecting the data upfront, the more flexible your options will be for displaying it later.
Best wishes,
Alaa
Hello,
Thank you for bringing this issue to my attention. I’ve updated the development version → , and it is now functioning properly. You can go ahead and use it.
When you visit your-site-dot-com/forum, you should be able to see all the forms.
Best regards,
Alaa
Hello,
While I can't change the global settings for the img HTML tag directly, you can reset the CSS for the img element, removing the vertical-align: middle;, you can simply override it by setting vertical-align to its default value. The default value for vertical-align is baseline. Here's how you can reset it:
img {
vertical-align: baseline;
}
Best wishes,
Alaa
Thank you! I’m really glad you see the value in this work for both the community and the "Solo" ecosystem. My main goal with these contrib modules—whether it's the slideshow, accordion, tabs, or others—is to enhance Drupal’s capabilities and make these tools accessible for everyone to benefit from. Your feedback is greatly appreciated!
Hello,
I have updated the skip links and tested them using Mac Narrator, and everything is functioning as expected on the demo site.
As for the menu navigation, there is a special script for keyboard compatibility that you can enable in the primary menu region. Is this what you were referring to?
Best regards,
Alaa
Happy to help!
Hello,
On load the first item has the class active and it is focused tabindex 0, https://unitedstarsofamerica.com/vanilla-views/views-vanilla-javascript-....
It is on the module's homepage under Tabs - Developer & Site Builder Tips.
Best wishes,
Alaa
You are welcome!
Hello,
The Paragraphs Bundles module includes several custom pre-configured bundles, such as Accordion and Slideshow. The Paragraphs Bundles Import module allows you to import content into these pre-configured bundles. It has no connection with the Quiz module.
Best wishes,
Alaa
Hello,
You can use the same one you used on the top, just add .view-eventi.
Insert this after the original:
#page-wrapper .view.view-eventi table tr td,
#page-wrapper .view.view-eventi table tr th {
text-align: right;
}
Or
.view-eventi table tr td,
.view-eventi table tr th {
text-align: right !important;
}
Best wishes,
Alaa
Module Limitation Notice: Grouping Field Feature
Please note that the current version of this module does not support the "Grouping Field" feature available in Drupal Views. The "Grouping Field" option allows you to group records by a specified field, but this functionality is not compatible with the module's current implementation.
We recommend avoiding the use of this feature with this module to ensure proper functionality and display of your Views.
Best wishes,
Alaa
Hello,
Thank you for your thoughtful feedback. I understand how crucial accessibility is, especially for a website designed for blind users. Your suggestion to include dedicated accessibility options in the Solo Theme is highly valuable, as it contributes to enhancing the theme for all users.
I have added three additional skip links (Header, Main Navigation, and Footer Menu), increasing the total number of skip links to four. There is now a checkbox in each region that allows you to enable or disable these links. This feature is currently available on the demo and in the development version → .
I am committed to adding any features that enhance your experience on the site. If you have any further suggestions for accessibility improvements that could make the theme more user-friendly, please don't hesitate to share them.
I appreciate your kind words and am glad the theme meets your needs. Your feedback is invaluable in helping us continually improve, and I thank you for your ongoing support.
Best wishes!
Alaa
Hello,
Thank you so much! I'm glad to hear that the Views Vanilla JavaScript Suite modules have been helpful for you.
You can accomplish this task using just Views, without needing any additional modules. The instructions below have been updated on the module's home page for your convenience.
How to Configure Multiple Fields as the Button or Front Card in Views Display
My contrib modules for Drupal Views Plugin Display, such as Accordion, Tabs, Reveal, and 3D Cards, allow for dynamic content display based on the first field in your view. By default, the first field selected in the view configuration is used as the button or front card. However, if you wish to utilize more than one field as the "first field" for the button or front card, follow these steps:
Step-by-Step Instructions:
- Add Desired Fields: In your Views configuration, add all the fields you want to use as the button or front card.
- Exclude from Display: For each of these fields, mark them as "Exclude from display". This ensures that these fields are available for use but are not directly shown in the final output.
- Create a Custom Global Field:
- Add a Custom Global Field (Text) to your view.
- Use the Replacement Patterns feature to insert tokens for the fields you've excluded from the display. This allows you to combine multiple fields into one single output.
Field Ordering Guidance:
- Arrange the fields in your view so that the hidden fields (the ones excluded from display) come first.
- Follow the hidden fields with the custom global field that will act as the button or front card.
- After these fields, add any remaining fields that will make up the rest of your content.
By following these steps and arranging your fields in this order, you can use multiple fields as the first field for your button or front card, offering greater flexibility and customization in your Drupal Views displays.
**Note: I have updated the live demo with these settings for all cards. Additionally, I created a view → that you can import and use as an example.
When you click on Custom Text Global Field:
Best wishes,
Alaa
Hello,
Thank you! I'm glad you find the module promising. I’m not familiar with the specific issue with the Quiz module, but currently, you can import content to create three different types of paragraph bundles (Accordion, Tabs, and Slideshow). Hopefully, this helps with your needs!
Best wishes,
Alaa
Hello,
Thank you, I updated the twig in this
copy →
.
Best wishes,
Alaa
Hello,
The feature was developed and pushed to live in the last release for Solo and Solo Utilities. Here is the demo for it https://www.youtube.com/watch?v=jpXvWA160SA
Best wisehs,
Alaa
Hello,
I just realized that I don't have documentation on how to add regions to the Solo theme, so I wanted to create an example for future reference. I've created a sub-theme ( Hero → ) with four regions: Hero Top, Content Top, Hero Bottom, and Content Bottom. The Hero Top and Hero Bottom regions are outside the main containers and will follow the global website width. The Content Top and Content Bottom regions are inside the main wrapper, in this order: Content Top, Content, and Content Bottom. You can use this sub-theme for your project or create another sub-theme based on it.
Best wishes,
Alaa
Hello,
Thank you for your suggestion. I understand the desire for these additional regions, such as "Hero Top," "Content Above," "Content Below," and "Hero Bottom." However, adding these regions would require extensive changes throughout the theme. This includes updating multiple features, CSS classes, Twig templates, Documents, and JavaScript, as well as modifying many of the theme's core functions to incorporate these new features.
Given the amount of work involved, I, unfortunately, don't have the time to accommodate this request at the moment.
I appreciate your understanding, and please feel free to reach out if there's anything else I can assist with.
Best wishes,
Alaa
Hello,
First: How would make it so that the target of the top level entries (plus their adjacent drop down arrow) in the primary menu are made into a single clickable (or hover-able) "unit" that just toggles the drop down menu, rather than having having the top menu entries be links that go to corresponding nodes?
The menu in Solo is simple to use. If you add an internal or external link, it will be clickable. To create a dropdown menu, edit the link, expand the display settings, and check "Show as expanded." If you don't want the link to direct to an internal or external page, replace the link with "#".
To disable the button animation, navigate to admin/appearance/settings/solo. Under Page Wrapper, expand the section and add the CSS class as shown in the screenshot.
Best wishes,
Alaa
You're very welcome! I'm glad to hear the dev build is working well for you. If you need anything else, don't hesitate to ask!
Hello,
I corrected the typo in version 1.0.10, but the variable did not change. If you have customized this setting on your site, you'll need to revisit the theme settings, reselect this option, and then click 'Save' and 'Import'. That's it.
Whenever I update the theme, I usually review the page settings to ensure nothing has changed, then click 'Save' and 'Import' the configuration again. After that, I check the theme.settings file to see what has been modified.
You're welcome! Thank you for the kind words—I'm glad you like the theme! If you have any more feedback or questions, feel free to reach out.
Best wishes,
Alaa
Hello,
I've updated the "Main Containers" section, replacing the checkbox with a select list. Now, you can choose from these layout options: left-main-right, main-left-right, main-right-left, left-right-main, or right-left-main.
The new feature was pushed to dev → feel free to use it.
Best wishes,
Alaa
Hello,
I’ve set up something similar on the demo site. When you visit any of the color schemes, I’m using a default theme as a solo sub-theme and loading the library from the URL. I'll need to figure out how to make it available to the public.
https://unitedstarsofamerica.com/bold-and-dramatic-colors/solo-flaming-s...
Best wishes,
Alaa
Hello,
A new feature in the global site "Website Region's Spaces" that allows you to disable all gaps and padding across all regions, except for menu regions.
Best wishes,
Alaa
You’re welcome; I’m glad it worked out.
No problem, and happy holidays!
I looked into the link and found that the default style for the image/media field had a left float. This style should only apply to images or media outside of any text fields. I've updated the CSS to ensure that this styling now only applies when these fields are direct children of the node content.
The work was pushed to the W3CSS Theme Dev → .
Best wishes,
Alaa
Hello,
*"First: in documentation for PB Import Para it says the content type is: PB Import Node. Is that accurate or just a copy/paste that didn't get changed?" Please send me the link, I think it is typo.
*For nodes or paragraphs, it depends on what you want to achieve with your slideshow. If you want each picture to have its own dedicated page with a unique URL and title, where users can find more details, leave comments, and interact with the content, then nodes are the better option.
When I created this module, I intended it to be versatile, not just for slideshows but also for various types of content like blogs, articles, stories, and more. For example, if you're creating a blog and have content to share, using nodes makes sense because they allow for richer content management. That's why, when working with nodes, you have two required fields: a Title and either an Image or Body text.
*For the duplicate files, the FileRegistrar class is specifically designed to register files in the Drupal system without duplicating or cloning them. It ensures that each file is only registered once and skips files that are already registered, thereby preventing duplication. If a file entity is found but the actual file is missing from the directory, the class logs a warning, but it does not create a duplicate or clone the file.
I recommend debugging your site to identify what might be causing this behavior. Here are some steps you can take:
- Check the Logs: Review the Drupal logs to see if there are any warnings or errors related to file registration. Look for messages indicating that files were "already exists" or "registered," which will help you confirm whether the FileRegistrar is behaving as expected.
- Verify File Entities: Manually inspect the file entities in the Drupal admin interface to ensure that there aren't multiple entries for the same file. This will help you determine if the duplication is happening elsewhere in the system.
- Custom Modules or Hooks: If you have custom modules or hooks that interact with file uploads or registrations, review their code to see if they might be inadvertently creating duplicates.
- Test with a Clean Setup: Try replicating the issue in a clean Drupal environment with only the FileRegistrar module enabled. This can help you isolate the problem and determine if the duplication is specific to your current setup.
Best wishes,
Alaa
Hello,
To improve the styling and layout of the user profile page, I added a unique CSS class to this page. This ensures that styles specific to user profiles do not unintentionally affect other user-related pages such as login, registration, and password reset. By isolating the CSS for user profiles, we can maintain a clean, organized, and conflict-free design across all user interfaces, enhancing the overall user experience.
Best wishes,
Alaa
Hello,
I have aligned the login button to match the top of the logo on purpose. If you have a larger header, I recommend keeping the button aligned to the top rather than centering it. However, preferences can vary from user to user, and if you prefer the button centered, it’s easy to adjusted.
Best wishes,
Alaa
Hello,
Have you tested the update with all the features implemented in the header?
flashwebcenter → made their first commit to this issue’s fork.
flashwebcenter → made their first commit to this issue’s fork.
Hello,
The module has been released, and all the videos have been created and published
Best wishes,
Alaa
Hello,
Thank you for the explanation. I will have to think about something to help with padding. One solution to work around "Overriding it in style.css caused CLS because the base CSS was loaded first" is to override it in the sub-theme and ensure the CSS in the sub-theme comes before SOLO.
The provided YAML configuration is for a Drupal sub-theme named "solo-subtheme-global." This configuration specifies how CSS and JavaScript files should be loaded for the sub-theme.
solo-subtheme-global:
Version: VERSION
css:
base:
css/solo-subtheme-style.css: { weight: -400 }
js:
js/solo-subtheme-script.js: {}
You can also define CSS classes in the sub-theme and then add these classes in the region settings in the CSS classes field. This is the same way I disabled the button animation.
By using this configuration, you ensure that the custom CSS in solo-subtheme-style.css is loaded before the base CSS of the parent theme, thereby preventing CLS issues. This method allows for better control and customization of the theme's styling without causing layout shifts during page load.
Best wishes,
Alaa
Hello,
The code in comment 11 applies only to the main menu. The code in comment 15 represents the global settings for all menus. If you want to target a specific menu, use the region ID or menu ID as shown in comment 11. To override the global settings for any menu on the site, attach an ID to the global settings so that the new CSS will override the existing global CSS.
#page-wrapper .solo-inner .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>a,
#page-wrapper .solo-inner .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>button {
padding: var(--solo-px32);
}
Best wishes,
Alaa
Hello,
Thank you for your feedback. I will need more details about each feature. Maybe a video or detailed examples.
Best wishes,
Alaa
Hello,
You have these classes in theme settings under page wrapper you can use.
Here are the predefined CSS classes you can use:
- dis-box-shadow: Removes the shadow effect from elements, creating a flat appearance.
- dis-border: Eliminates borders from elements, which can be useful for a minimalist design.
- dis-border-radius: Sets the border-radius to 0, removing rounded corners for a sharp-edged look.
- dis-margin: Resets margins to 0, helping elements to align tightly without external spacing.
- dis-padding: Resets padding to 0, ensuring elements have no internal spacing.
- image-auto: Sets images within links to display at their original size.
- dis-text-transform: Prevents text transformations, maintaining the original text case and style.
- dis-anim-link: Disables bottom border hover animations on menu links.
- dis-anim-submit: Stops the wiggle animations on the submit button.
Best wishes,
Alaa
Hello,
The file ../solo/css/components/solo-menu.css has the global settings for all menus line 74.
.solo-inner .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>a,
.solo-inner .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>button {
padding: var(--solo-px12);
}
Best wishes,
Alaa
Hello Theo,
Thank you for your keen observation! I installed the module locally and got the same results. Your direction was spot on.
Best wishes,
Alaa
Hello,
I've noticed a difference between the two menus in the Olivero theme. In my screenshot, the
- element has three classes: menu--sidebar, menu, and menu--level-1. However, on your site, the
- element only has two classes: menu and menu--level-1.
I'm not sure if you placed the menu in the sidebar region or the content region, but if it is in the sidebar region in Olivero, something on your site might be affecting the menu hook suggestions.
Best wishes,
Alaa
Thank you!
flashwebcenter → made their first commit to this issue’s fork.