Bootstrap 4 and Custom Template overrides

krileon
Team Member
OFFLINE
Posts: 68528
Thanks: 9093
Karma: 1434

5 years 8 months ago #306530 by krileon

Replied by krileon on topic Bootstrap 4 and Custom Template overrides

You don't have to remove the workarounds at all. Just leave them in. Why are they a concern? Are they causing styling problems for you?

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

activha
ONLINE
Platinum Member
Posts: 2279
Thanks: 113
Karma: 13

5 years 8 months ago #306532 by activha

Replied by activha on topic Bootstrap 4 and Custom Template overrides

Yes some conflicts with bootstrap 4 background colors for buttons
Line 250 for instance

Please Log in to join the conversation.

krileon
Team Member
OFFLINE
Posts: 68528
Thanks: 9093
Karma: 1434

5 years 8 months ago #306537 by krileon

Replied by krileon on topic Bootstrap 4 and Custom Template overrides

That won't conflict if your Bootstrap 4 template has properly set the colors to :root. See the CSS below

.cb_template .btn-dark:focus {
  /* workaround to Bootstrap 3.0 styling */
  color: #fff;
  color: var(--white, #fff);
  background-color: #343a40;
  background-color: var(--dark, #343a40);
}

Line 250 is background-color: #343a40; which is just a fallback that'll only apply if the variable doesn't exist or the browser doesn't support var function (all modern browsers do). Otherwise it'll use the --dark var that Bootstrap 4 sets to :root. If your Joomla template is loading Bootstrap 4 without setting the color variables to :root then it's using Bootstrap 4 CSS wrong and suggest contacting the template developer.

You can also use CB Template Changer to generate a new template with your colors and leave Bootstrap 4 disabled in CB > Configuration > Integrations.

Please Log in to join the conversation.

activha
ONLINE
Platinum Member
Posts: 2279
Thanks: 113
Karma: 13

5 years 8 months ago #306539 by activha

Replied by activha on topic Bootstrap 4 and Custom Template overrides

Sorry I mixed the lines, I had to change line 269 to remove background: transparent;

.cb_template a:hover,
.cb_template a:active,
.cb_template a:focus {
  /* workaround to Joomla 3.0 styling (Beez3) */
 background: transparent; 
}

Our template is Helix 4 ultimate and sets the root colors correctly of what I see.
Background transparent conflicts with the step by step registration buttons for instance

Please Log in to join the conversation.

krileon
Team Member
OFFLINE
Posts: 68528
Thanks: 9093
Karma: 1434

5 years 8 months ago #306547 by krileon

Replied by krileon on topic Bootstrap 4 and Custom Template overrides

Ok, that'd be a styling bug to be fixed. Have added a bug ticket to fix in next build.

forge.joomlapolis.com/issues/7244

The following user(s) said Thank You: nant, activha

Please Log in to join the conversation.

Moderators: beat, nant, krileon

Time to create page: 0.276 seconds

Bootstrap 4 and Custom Template overrides

Search

Login / Logout

Menu

User Menu