- Posts: 687
- Home
- Forum
- Community Forum
- General discussions
- Property / Experience Description Tabs issues and fixes
Property / Experience Description Tabs issues and fixes
- joomleb
- Topic Author
- Offline
Less
More
3 years 9 months ago #18391
by joomleb
Property / Experience Description Tabs issues and fixes was created 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
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.
- solidres
-
- Offline
Less
More
- Posts: 2953
3 years 9 months ago #18405
by solidres
FAQ: www.solidres.com/support/frequently-asked-questions
Support Policy: www.solidres.com/support-policy
Replied by solidres on topic Property / Experience Description Tabs issues and fixes
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,
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,
FAQ: www.solidres.com/support/frequently-asked-questions
Support Policy: www.solidres.com/support-policy
Please Log in or Create an account to join the conversation.
- joomleb
- Topic Author
- Offline
Less
More
- Posts: 687
3 years 9 months ago - 3 years 9 months ago #18406
by joomleb
Replied by joomleb on topic Property / Experience Description Tabs issues and fixes
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 ...
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: 3 years 9 months ago by joomleb.
Please Log in or Create an account to join the conversation.
- joomleb
- Topic Author
- Offline
Less
More
- Posts: 687
3 years 9 months ago - 3 years 9 months ago #18429
by joomleb
Replied by joomleb on topic Property / Experience Description Tabs issues and fixes
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...
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...
Last edit: 3 years 9 months ago by joomleb.
Please Log in or Create an account to join the conversation.
Moderators: solidres