Skip to Content Skip to Menu

🎃 Happy Halloween! Treat yourself with an awesome discount on memberships! Get 20% off now with code SPOOKY-2024!

Bootstrap Basic customization wishes

  • dotcom22
  • dotcom22
  • OFFLINE
  • Posts: 522
  • Thanks: 14
  • Karma: 4
12 years 1 month ago #210787 by dotcom22
Bootstrap Basic customization wishes was created by dotcom22
hello

I just tested Bootstrap template and I'm really impressed with this new major graphical enhancement :woohoo: :lol: :silly:

Good job Kyle...I imagine all hours of coding you made for release this template. :pinch:

Now of course it will difficult to satisfy everybody without let us easily customize the appearance. I'm sure you will get many request in this forum in near future for ask how to do for change links and buttons colors.

I'm not a CSS expert even if I have some knowledges and I try to make some change. But after almost 2h of test I'm always unable to get the desired display.

The most annoying point is about all buttons (changing links color was easy) because even after changing your default blue color value #0088cc and #0077b3 (my template is orange reason why I would like get also orange button), I get a mixed blue/orange button.

So personally I think if you can add in near future some settings inside template plugin for allow us at least to:

- choose a color for links (2 color value for active and over links)
- choose a color for buttons (2 color value for gradient)

...you will make happy many people who will be able to immediately customize the template color in few minutes. Is really difficult and time consuming to review all css code for make those basic change...

Of course others kind of customization can be implemented in template settings, but links and buttons are probably more than indispensable.

I use Joomla 3.3.6 - CB 2.0.4 - CBSubs 4 - Several Incubator plugins

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

  • krileon
  • krileon
  • ONLINE
  • Posts: 48475
  • Thanks: 8281
  • Karma: 1443
12 years 1 month ago #210850 by krileon
Replied by krileon on topic Re: Bootstrap Basic customization wishes
The only way to customize it is with CSS. There is no other way to customize it. This is because in most cases CB only renders in the CSS file, no trigger attached, and no PHP involved.

Maybe in a future release of CB it self we'll be able to expand the template function so parameters can be added to load in additional CSS styles based off that parameter.


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 or Create an account to join the conversation.

  • dotcom22
  • dotcom22
  • OFFLINE
  • Posts: 522
  • Thanks: 14
  • Karma: 4
12 years 1 month ago #210866 by dotcom22
Replied by dotcom22 on topic Re: Bootstrap Basic customization wishes
ok understood..

I finally was able to change color of all form button. However Boostrap button style are not apply to CB Login module login/logout button and to button related to Lost Password. It seem those buttons are not managed by Boostrap. How I can do for get same style ?? I'm supposed to copy a part of Bootstrap button style and to past in my Main Joomla template ?? If yes which code ??


Other question:

Before using Boostrap (that mean using Default CB template), I had few custom style in my main template for let me hide the title of some delimiter fields present in the registration form. The code was:

.cbRegistration #cblabcb_mydelimiterfield {
display: none;
}

This worked fine before but now the title is no more hidden. I tried to paste this code inside "template.css" of Boostrap but title still present. After many test I don't see what code/class to use.

On the other hand I had also a custom code in my Main template for let me hide CBsubs plan on Registration form. The code was:

.cbRegistration #registrationTable #cbfr_cbregplans,
.cbRegistration #registrationTable #cbfrd_cbregplans {
display: none;
}

I paste this code in "template.css" of Boostrap and all plans are well hidden.

Any clue ???



Other question:

I noticed a strange issue in the Registration form before starting to change code. In fact if I refresh the page fields become misaligned. If I refresh again the page, fields "move" everywhere on each refresh and I don't know why. If I change CB template and revert back to Default, I don't get this problem..

Any idea why this happen ??

Tested under FF and Chrome...

thank

I use Joomla 3.3.6 - CB 2.0.4 - CBSubs 4 - Several Incubator plugins

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

  • krileon
  • krileon
  • ONLINE
  • Posts: 48475
  • Thanks: 8281
  • Karma: 1443
12 years 1 month ago #210873 by krileon
Replied by krileon on topic Re: Bootstrap Basic customization wishes
Modules are not styled on purpose because CB doesn't load in the CB template for them. Modules should be styled to match your Joomla template and not CBs.

Bootstrap uses !important tags to force inherit styling only within it self. This ignores outside influence unless !important tag is also used and is loaded after CBs CSS. I suggest adding your custom styles to the bottom of bootstraps CSS file and tagging them !important (see bootstraps CSS for usage).

I noticed a strange issue in the Registration form before starting to change code. In fact if I refresh the page fields become misaligned. If I refresh again the page, fields "move" everywhere on each refresh and I don't know why. If I change CB template and revert back to Default, I don't get this problem.

I've no idea what you mean by this, if possible please provide a screenshot of the issue. Bootstrap does re-position fields, but it does so with CSS.


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 or Create an account to join the conversation.

  • dotcom22
  • dotcom22
  • OFFLINE
  • Posts: 522
  • Thanks: 14
  • Karma: 4
12 years 1 month ago - 12 years 1 month ago #210894 by dotcom22
Replied by dotcom22 on topic Re: Bootstrap Basic customization wishes

Modules are not styled on purpose because CB doesn't load in the CB template for them. Modules should be styled to match your Joomla template and not CBs.


In fact I use only CB + CBsubs and no other components. Even if my Main template provide a specific button style (like for example submit button of Pool, Readon article, contact form,...)those button never appear because I don't this stuff. The only button who appear are related to CB reason why I would like customize CB Login module in same manner of Boostrap.

The class used by CB Login module is simply .button. So is possible to apply to this class the Boostrap style?

I tried to do this but Boostrap button style are very long and complex and I can't figure out how to adapt.

Here the full Boostrap button style list:

[REMOVED]


Any suggestions please ???

Bootstrap uses !important tags to force inherit styling only within it self. This ignores outside influence unless !important tag is also used and is loaded after CBs CSS. I suggest adding your custom styles to the bottom of bootstraps CSS file and tagging them !important (see bootstraps CSS for usage).


Solved. I added the !important tags to my custom Registration fields style and now they work well.

I've no idea what you mean by this, if possible please provide a screenshot of the issue. Bootstrap does re-position fields, but it does so with CSS.


I found the problem... It was because I used a nice mathematical Captcha third party plugin "compatible" with CB. This plugin was the responsible of fields misalignment so I finally uninstall it and now all is fine. Is better to use your own CB captcha for avoid issue even if I would prefer to use mathematical way instead to classic distorted characters. This plugin worked fine with Default template but not with Boostrap...too bad.

I use Joomla 3.3.6 - CB 2.0.4 - CBSubs 4 - Several Incubator plugins
Last edit: 12 years 1 month ago by krileon.

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

  • krileon
  • krileon
  • ONLINE
  • Posts: 48475
  • Thanks: 8281
  • Karma: 1443
12 years 1 month ago - 12 years 1 month ago #210927 by krileon
Replied by krileon on topic Re: Bootstrap Basic customization wishes
Please don't post massive chunks of the template. The template is subscriber content and these are public forums.

You can not style the login module from the CB template; it's not loaded. You'll need to take the button CSS, move it to your Joomla template CSS file, then adjust the selectors to target the login module; please contact a CSS specialist if unsure how to do this your self (we don't provide custom code, sorry; see signature). There are also Bootstrap styled Joomla templates available from 3rd parties that you maybe want to explore if you'd like Joomla to also have a similar look.

I found the problem... It was because I used a nice mathematical Captcha third party plugin "compatible" with CB. This plugin was the responsible of fields misalignment so I finally uninstall it and now all is fine. Is better to use your own CB captcha for avoid issue even if I would prefer to use mathematical way instead to classic distorted characters. This plugin worked fine with Default template but not with Boostrap...too bad.

It could be a simple matter of CSS conflict, but as you've provided no before/after screenshots I still have no idea what issue it caused.


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.
Last edit: 12 years 1 month ago by krileon.

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

Moderators: beatnantkrileon
Powered by Kunena Forum