Property / Experience Description Tabs issues and fixes

  • joomleb
  • Topic Author
  • Away
More
2 months 2 weeks ago #18391 by joomleb
Hi guys,
PHP 7.4.20 + Joomla 3.9.27 + Solidres 2.12.0 beta + last Plugins + Helix Ultimate 1.1.4
- Solidres > Options > General > UI Framework: Bootstrap 4

Property Description Tabs - example page
Issue - a margin bottom is applied creating an incomplete border at the top of the description content - I add to images for you
Solution:
- to delete the mb3 into the class and to change pixels with rem .reservation_asset_item .nav-tabs {margin-top: 20px;} > 1rem
- OR to change mb3 with mt3 that is the Bootstrap substitute of your margin bottom class

Experience Description Tabs - example page
Issue - these two CSS settings are conflicting with default layout:
.sr-experience .nav-tabs>.active>a, .sr-experience .nav-tabs>.active>a:hover, .sr-experience .nav-tabs>.active>a:focus, .sr-experience .nav-tabs>li>a:hover, .sr-experience .nav-tabs>li>a:focus {
/* background: #08c; */
/* color: #fff; */
}
.sr-experience .nav-tabs, .sr-experience .nav-tabs>.active>a, .sr-experience .nav-tabs>.active>a:hover, .sr-experience .nav-tabs>.active>a:focus, .sr-experience .nav-tabs>li>a:hover, .sr-experience .nav-tabs>li>a:focus {
/* border-color: #08c; */
/* border-radius: 0; */
}
Solution: to delete those CSS settings

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #18405 by solidres
Hi,

1. About property description tab, it is actually your template issue, the "mb-3" class was added by your template:

/templates/shaper_helixultimate/html/layouts/libraries/cms/html/bootstrap/starttabset.php

So you must fix from your template override files.

2. There are no conflicting here, Experience uses different styles, if you want to use your own style, just make an override in your template custom.css file.

Regards,

Please Log in or Create an account to join the conversation.

  • joomleb
  • Topic Author
  • Away
More
2 months 2 weeks ago - 2 months 2 weeks ago #18406 by joomleb
Hi guys

1 - Thanks

2 - Thanks. Anyway, to overwrite the default "Neutral" Bootstrap tab colors with the:
background: #08c;
color: #fff;
border-color: #08c;
it doesn't seem a good thing to me because Solidres will never be able to satisfy all the individual color needs of its customers. Using neutral color standards on all these elements is always the best solution, even more so if this means streamlining the code ...
Last edit: 2 months 2 weeks ago by joomleb.

Please Log in or Create an account to join the conversation.

  • joomleb
  • Topic Author
  • Away
More
2 months 4 days ago - 2 months 2 days ago #18429 by joomleb
Hi guys,
PHP 7.4.21 + Joomla 3.9.28 + Solidres 2.12.1 + last plugins etc
tested with Helix Ultimate 1.1.4 (Bootstrap 4) and with Helix Ultimate 2.0 RC2 (Bootstrap 5)
- Solidres > Options > General > UI Framework: Bootstrap 4

Experience Description Tabs - example page
Issue - these three CSS settings are conflicting (not two) with default Bootstrap Nav Tabs layout, to have back them running I have to apply this CSS code:

.sr-experience .nav-tabs {
border-bottom-width: inherit; #or bottom border is shown into the tab - I attach an image, so you can investigate
margin-bottom: 0!important; #due to the ""joomla-tabs nav nav-tabs mb-3" class in Helix Ultimate as you explained me for Property. I reported to HU , but they closed it without to pay attention, awful
}

.sr-experience .nav-tabs>.active>a, .sr-experience .nav-tabs>.active>a:hover, .sr-experience .nav-tabs>.active>a:focus, .sr-experience .nav-tabs>li>a:hover, .sr-experience .nav-tabs>li>a:focus {
background: unset;
color: unset;
}

.sr-experience .nav-tabs, .sr-experience .nav-tabs>.active>a, .sr-experience .nav-tabs>.active>a:hover, .sr-experience .nav-tabs>.active>a:focus, .sr-experience .nav-tabs>li>a:hover, .sr-experience .nav-tabs>li>a:focus {
border-color: #dee2e6 #dee2e6 #fff; #the bottom border has to be white to integrate with bootstrap tabs
border-radius: 0.25rem 0.25rem 0 0; #again, top left and top right border need to have radius to integrate with bootstrap tabs...
}
# for these reasons I suggested to deprecate these customisations keeping the standard Bootstrap tabs layout...
Attachments:
Last edit: 2 months 2 days ago by joomleb.

Please Log in or Create an account to join the conversation.

Moderators: solidres
Powered by Kunena Forum

All the things you need to make your work easier. Did you like Solidres?