🇮🇳India @anoopsingh92

anoopsingh92 → made their first commit to this issue’s fork.

Hi @edvanleeuwen,

Please update the theme using the following command

composer require 'drupal/flexistyle_bootstrap:^1.3'

This issue has been fixed in the latest release.

Thank you!

Hi @edvanleeuwen,

Thank you for your interest in FlexiStyle Bootstrap and for sharing your idea!

Your suggestion to allow varying column widths is excellent and could be very helpful for layout customization. Since this theme serves as a base theme for Drupal, implementing such a feature needs careful consideration.

Could you provide more details on how you envision adding this field to the base theme? Specifically:

• What should be the default values for the content and sidebar widths?
• What would you prefer as the field name and field type?
• Do you expect these settings to be configurable via the theme settings UI, or should they be managed differently?

In a child theme, we can introduce such fields dynamically and render them in Twig, but in the base theme, it would be a fixed setting—beneficial for some but possibly restrictive for others.

Let’s discuss the best approach to implementing this while keeping it flexible and useful for all users. Looking forward to your insights!

Thank you

Hi @ggh,

We cannot run this phpcs command for the bootstrap and fontawesome folders because these files are compressed and part of external libraries, which we do not alter. However, we can run the command on the templates, PHP files, and our custom CSS to ensure code standards compliance. Let me know if any specific adjustments are needed.
theme-settings.php changes are fine. So please update the MR!

Thank you

Thank you for reproducing the issue. Please update the theme again to the latest version, as this issue has been fixed. If you still encounter the problem, let me know, and I'll be happy to assist. Thanks for your patience!

anoopsingh92 → made their first commit to this issue’s fork.

anoopsingh92 → made their first commit to this issue’s fork.

@all, Thanks for the contribution.

Not fixed, this CSS is affecting all the nav items.

.nav .nav-item {
  margin-right: 10px;
}
.nav .nav-item:last-child {
  margin-right: 0;
}

Find out other ways instead of CSS.

Hi @nidhish,
Please check the Merge Request (MR). There are conflicts that need to be resolved. Also, ensure that you don't add files where no changes have been made.

Thanks @sandip-poddar for identify the issue.
You didn't make any changes in the CSS file, can you please checkout this file from the MR css/base/elements.css

This is js or dependency error, please check and find the better solution.
That is not an CSS issue @rahuly072
1st solution is, check after disabled big pipe module.

Thank you for your contribution!

anoopsingh92 → made their first commit to this issue’s fork.

Fixed in the latest Dev release.

Thanks for the contribution!

anoopsingh92 → made their first commit to this issue’s fork.

anoopsingh92 → made their first commit to this issue’s fork.

Thanks for the contribution!

anoopsingh92 → made their first commit to this issue’s fork.

anoopsingh92 → made their first commit to this issue’s fork.

anoopsingh92 → made their first commit to this issue’s fork.

Thanks for the contribution!

anoopsingh92 → made their first commit to this issue’s fork.

Hi @alok_singh,

Since the theme is based on Bootstrap, it would be ideal to leverage Bootstrap’s built-in classes instead of writing custom CSS. For instance, you can use the responsive margin and display utilities available in Bootstrap, such as:

.flex-article .tags {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .flex-article .tags {
    display: block !important;
  }
}

Instead, try using Bootstrap classes like mb-3 for margin and d-block for the display property on smaller screens.

This will ensure better alignment with Bootstrap’s best practices and keep the code cleaner.

Hi @alok_singh, thanks for creating the MR!

Just a quick note regarding the use of !important in the CSS. It's generally best practice to avoid using !important unless absolutely necessary, as it can make the styles harder to maintain and debug.

For this case, we could consider a more specific selector or adjusting the CSS cascade to achieve the desired result without !important. Let me know if you'd like any help with that!

Thanks!

Please update FlexiStyle Bootstrap → theme then verify again.

Hi @alok_singh,

This is a contrib theme, not a custom theme, and it’s based on FlexiStyle Bootstrap → and fully compatible with Bootstrap. Adding CSS selectors like .col-lg-3.col-md-6 is not recommended, as it may break Bootstrap's responsive grid structure and interfere with Drupal's default behavior.

Instead of adding custom CSS or SCSS directly in the flexistyle_bootstrap_scss theme, any changes should ideally be made in the original FlexiStyle Bootstrap theme.

I encourage you to explore alternative solutions that leverage Drupal's and Bootstrap's built-in functionality. This might involve adjusting theme settings, overriding region templates, or using Bootstrap’s native classes and utilities to achieve the desired outcome without affecting the layout or functionality.

Additionally, please recheck the issue tabs for all related projects, including FlexiStyle → , FlexiStyle Bootstrap → , FlexiStyle Bootstrap SCSS → , and FlexiStyle DXP → . If you have created any merge requests (MRs) for these issues, please re-verify, fix, or close them as appropriate.

Let’s work towards a solution that maintains the integrity and compatibility of both Drupal and Bootstrap.

Thanks for your understanding and collaboration!

Hi @alok_singh,

This is a contrib theme, not a custom theme, and it’s based on FlexiStyle Bootstrap → and fully compatible with Bootstrap. Adding CSS selectors like .col-lg-3.col-md-6 is not recommended, as it may break Bootstrap's responsive grid structure and interfere with Drupal's default behavior.

Instead of adding custom CSS or SCSS directly in the flexistyle_bootstrap_scss theme, any changes should ideally be made in the original FlexiStyle Bootstrap theme.

I encourage you to explore alternative solutions that leverage Drupal's and Bootstrap's built-in functionality. This might involve adjusting theme settings, overriding region templates, or using Bootstrap’s native classes and utilities to achieve the desired outcome without affecting the layout or functionality.

Additionally, please recheck the issue tabs for all related projects, including FlexiStyle → , FlexiStyle Bootstrap → , FlexiStyle Bootstrap SCSS → , and FlexiStyle DXP → . If you have created any merge requests (MRs) for these issues, please re-verify, fix, or close them as appropriate.

Let’s work towards a solution that maintains the integrity and compatibility of both Drupal and Bootstrap.

Thanks for your understanding and collaboration!

Hi @alok_singh,

This theme is based on FlexiStyle Bootstrap → , so instead of adding any CSS or SCSS directly to the flexistyle_bootstrap_scss theme, any fixes should ideally be made in the main FlexiStyle Bootstrap theme. That way, the changes will automatically be reflected in this theme as well.

Please update FlexiStyle Bootstrap → first.
Please avoid adding redundant fixes here to maintain consistency across the projects.

Thank you for your understanding!

Hi @alok_singh,

This theme is based on FlexiStyle Bootstrap → , so instead of adding any CSS or SCSS directly to the flexistyle_bootstrap_scss theme, any fixes should ideally be made in the main FlexiStyle Bootstrap theme. That way, the changes will automatically be reflected in this theme as well.

Please avoid adding redundant fixes here to maintain consistency across the projects.

Thank you for your understanding!

@pravesh_poonia Double Navigation is not showing, Please check your block configuration to see how many blocks are enabled in the region.

Thank you

anoopsingh92 → changed the visibility of the branch flexistyle_bootstrap-3493712 to active.

anoopsingh92 → changed the visibility of the branch flexistyle_bootstrap-3493712 to hidden.

Thanks for reproducing the issue, This issue has been fixed in the latest releases.
Thank you

Thanks for reproducing the issue, This issue has been fixed in the latest version.
Thank you

MR!8 Successfully Merged. Thank you all for your valuable contributions.

Hello @adiatis,

It seems the command you’re using might be incorrect. Please follow these steps:

Run this command to make the script executable:

chmod +x script/subtheme.sh or chmod +x ./script/subtheme.sh

Then, execute the subtheme script:
sh script/subtheme.sh or ./script/subtheme.sh

Hello @alok_singh

Can you please confirm flexi_style theme is enabled for admin or not? If flexi_style theme is not settled as admin then this is not a flexi_style issue.

SS:

That issue has been fixed. Thank you for your contribution.

Please Create an MR!

larowlan → credited anoopsingh92 → .

The field label inline issue is resolved. Thanks for reviewing it.

anoopsingh92 → made their first commit to this issue’s fork.

The Issue does not exist, It's working fine with the attribute CSS selector.

Thanks @ravi-kant for the quick response.

@ugintl you can follow the steps.

• Create a Sub Theme, Go through the Readme.md file for the Sub-theme creation steps.
• Go to the FlexiStyle Bootstrap theme, copy the components folder and page.html.twig from the templates folder, and paste it into your custom theme templates folder.
• If you want to customize the Front page, clone the page.html.twig into the page--front.html.twig.
• If you have minor CSS changes then you can add them directly into the style.css file.
• If you want to add a separate CSS file for the front-page, Then you can add a new library in your themes libraries file.

Create a Library in your custom theme libraries file such as.

# Front Page Library
front_page:
  css:
    component:
      css/front.css: { }

Attaching a library via a Twig template

You can attach an asset library to a Twig template using the attach_library() function in your page--front.html.twig.
{{ attach_library('custom_theme/front_page') }}

Attach the Library in the Preprocess Function for the Front Page

use Drupal\Core\Url;

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function custom_theme_preprocess_page(array &$variables) {
  // Check if the current page is the front page.
  if (\Drupal::service('path.matcher')->isFrontPage()) {
    $variables['#attached']['library'][] = 'custom_theme/front_page';
  }
}

Note: "custom_theme" replace it with your custom theme name.

Thank you so much @all for the contribution.
Merged, Now pager and mini pager is looking good.

Thank you

The code is updated and the branch has also changed.
Please review it now. Thanks.

Thanks for the contribution @Shubham_Kumar.

You can't remove that component library from the flexi_style.libraries.yml file.
Need to create a twig for the mini page it will be resolved. instead of doing any changes in CSS file.

Thank you @shubham_kumar for identifying that issue.
That issue is fixed in the dev release.

anoopsingh92 → made their first commit to this issue’s fork.

Issues do not exist. Please review it.

That issue was resolved in the latest version.
Thanks for the contribution.

Thanks for the feedback @apaderno,
I worked on your mentioned comment #10 → .

I have updated the file flexi_style.theme please review it again.

Thank you

Okay @ptmkenny, Understood.
Thank you.

Hi @vishal.kadam,

First of all, thank you so much for reviewing that project.

I understand your concern. I want to let you know, that I am not creating multiple project applications for getting that role, that was not my intention Vishal.

My First application (FlexiStyle) has been completed. This is a pure CSS based Drupal theme. We are not using any third-party CSS library like Bootstrap, MDL, or Foundation, etc. in this project. this is a base theme for other projects. we can create a sub-theme based on it.

My Second application (FlexiStyle Bootstrap) is under development. You can check the status of the application. This application is using third-party CSS library Bootstrap. You can review the code as well. This project is different from my first project (FlexiStyle).
Both projects are different.

When I created a ticket for security advisory coverage, mistakenly i sent it to review. Now I can change the ticket status to Active. I am tactically working on it. when it will be completed then i will send it to review.
If you need any kind of information please let me know.

Thank you

anoopsingh92 → created an issue.

Thanks for the verification @yashaswi18.

Hi @Hamid.ali,
Updating the branch. That issue does not exist in the latest deployment. please review it again.

Testing environment on simplytest.me

URL: https://master-nurd9vgysl7of2ieulmjm5twbs2pizkl.tugboatqa.com/
Username/password: admin/admin

Video →