Community Builder 2.2 Bootstrap 4 Release

5 years 10 months ago #305468 by suge

cgwhite wrote: I have this on our profile pages and many of our members are VERY old. Need bigger font size!


For the time being, you can customize the CSS using the following:
.cb_template *, .cb_template *::before, .cb_template *::after {
font-size:12px;
}

Edit the number in font-size.

Please Log in to join the conversation.

5 years 10 months ago #305469 by cgwhite
Replied by cgwhite on topic Community Builder 2.2 Bootstrap 4 Release
Also notice that in User Management the Search box spreads wider than screen width which makes it almost impossible to see what you are typing in the search box.

When entering a name in the box and pressing enter I get the following in a popup box:

xml name cbfr_usersbrowser_filter_plan_id is undefined. It is cbHideFields[0][0].



Regards,

Chris.

Please Log in to join the conversation.

5 years 10 months ago #305470 by cgwhite
Replied by cgwhite on topic Community Builder 2.2 Bootstrap 4 Release
Sorry but not familiar with customising CSS in CB. Where should this be placed?

Please Log in to join the conversation.

5 years 10 months ago #305471 by cgwhite
Replied by cgwhite on topic Community Builder 2.2 Bootstrap 4 Release
OK, I have found it: CB > Plugin Management > Default > Overrides.

But that affects the backend as well as the frontend. Any way of just updating the frontend only.
The following user(s) said Thank You: asierraserna

Please Log in to join the conversation.

5 years 10 months ago - 5 years 9 months ago #305472 by krileon
Replied by krileon on topic Community Builder 2.2 Bootstrap 4 Release

Hi guys, I noticed after the update to 2.2, the font has become very very small.

Bootstrap 4 uses rem font sizing. The way rem sizing works is it sizes based off its root element. This would be html element. Your template has likely set a small font size (12px most likely) on the html element of your site. This will cause all font in CB to be based off that. To fix this you need to fix your Joomla templates font size. Check if your template has a parameter for this or if your Joomla template allows custom CSS to apply your fix there.

It is important that templates do not apply a font size to the html element as it breaks scale-ability of devices. The reason you're seeing this now is the font-size reset on cb_template class used to be 14px. That meant it never scaled based off your root element, the agent, or the view size. Now it's reset to 1rem and the way rems work is they're just a multiple of the root size. So if the root size is 12px and CB resets to 1rem then the size is 12px. In short the small font you're seeing is the font size that had always been there; it's just working now.

As a workaround you can force your Joomla template back to properly inheriting from browser agent using the below CSS.

html {
	font-size: inherit !important;
}

Also notice that in User Management the Search box spreads wider than screen width which makes it almost impossible to see what you are typing in the search box.

It's not possible for search inputs to expand outside the window. The backend is entirely responsive. If it is then you likely have some sort of styling conflict from a custom backend template or custom CSS you've added.

When entering a name in the box and pressing enter I get the following in a popup box:

xml name cbfr_usersbrowser_filter_plan_id is undefined. It is cbHideFields[0][0].

Am not able to confirm and wouldn't have anything to do with Bootstrap 4 upgrade either. Please open a support topic if issue continues after ensuring everything installed is up to date.

But that affects the backend as well as the frontend. Any way of just updating the frontend only.

Yes, use more specific CSS. Frontend has container classes surrounding all the views. You can also use Joomlas .site selector to prefix your CSS to target frontend only. Examples as follows. This assumes your Joomla template is properly adding the base body classes.

Frontend:
.site .test {
    color: red;
}

Backend:
.admin .test {
    color: red;
}


Folks, please stop posting support issues here. Create support topics in the support forums.


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.
The following user(s) said Thank You: asierraserna

Please Log in to join the conversation.

5 years 5 months ago #308404 by tlwebdesign
Replied by tlwebdesign on topic Community Builder 2.2 Bootstrap 4 Release
Am i able to set cb to use bootstrap 3? Since my template (JoomlArt) is still BS3?

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.264 seconds

Facebook Twitter LinkedIn