How to make custom theme with Bootstrap theme overrides

Hello!.

I'm trying to make custom dark theme for Chronoforums using free theme for Bootstrap (Slate) and mostly did it but have a problem with Bootstrap theme overrides.

My step-by-step actions.
1. I copied content of default theme components/com_chronoforums/chronoforums/styles/prosilver folder to the new folder components/com_chronoforums/chronoforums/styles/slate.
2. I created new file components/com_chronoforums/chronoforums/styles/slate/theme/bootstrap-slate.css with Bootstrap Slate theme styles (http://bootswatch.com/slate/bootstrap.css).
3. I added CSS import as first line to the components/com_chronoforums/chronoforums/styles/slate/theme/forums.css like:

@import url('bootstrap-slate.css'); 

But it isn't work because my custom styles overrides by CEGCore framework Bootstrap styles in libraries/cegcore/assets/bootstrap/css/bootstrap.css and libraries/cegcore/assets/bootstrap/css/bootstrap-theme.css
When I replace those 2 files with my custom Bootstrap styles it works like a charm in front-end and I get exactly what I need. But of course it is affects on Chronoforums admin styles in Joomla administrator.
I've tried to find and change order of CSS loading in components/com_chronoforums/chronoforums/chronoforums.php but it looks correct:

$document = \GCore\Libs\Document::getInstance();
		$document->_('jquery');
		$document->_('bootstrap');
		$document->addCssFile('extensions/chronoforums/assets/css/default.css');
		$document->addJsFile('extensions/chronoforums/assets/js/default.js');
		$document->addCssFile('extensions/chronoforums/styles/'.$this->fparams->get('theme', 'prosilver').'/theme/forums.css');

I see custom theme CSS added last and it should override base CSS but it is not. I сonfused about where I could make overrides to change front-end Bootstrap theme CSS and avoid messig of admin Bootstrap theme CSS in right way. Of course I can add !important for each line of my custom CSS but there are 6000+ lines and I guess it could be easier way instead of monkey business.

Thanks in advanсe.

Sorry, my mistake. I missed parent .gbc3 class in my CSS. After I corrected this all works fine.

Hi,

which version of ChronoForms are you using? We would like to do something similar, but are using CF5 and do not see the files or directories that you mentioned.

Thanks!

This is the Chrono "Forums" section, not "forms", please post a new topic in the "forms" section with what you need to do!

Regards,
Max

@max this is EXACTLY what I need to do, only I need to use darkly instead.

You can simply overwrite the bootstrap3 css file used and pay attention to the gbs3 class or use it in your template and rename the CF file so that it can use the one already loaded!

Hi there,

I am pretty new to this forum extensions but this thread is exactly what I need... what I do not know though is how to do this:

Sorry, my mistake. I missed parent .gbc3 class in my CSS. After I corrected this all works fine.

Can someone post an example of a working theme and/or explain the above?

Hi Brandt,

When you add CSS to your form to override the existing CSS, you should use the .gbs3 class in your code, e.g:

.gbs3 textarea{
/* some rules here */
}

This applies when the form theme is bootstrap3

Regards,
Max

Hi again,

I am still a little fuzzy on how to make this all work. Is someone using this style of bootstrap custom theme on their forums that they could share so I can just see how the CSS files are put together?

Hi Brandt,

Its just like any CSS override, you place your new CSS rule in the styles box in the settings and you may need to add "!important" for it to work.

If you have too many changes then you may create a new style folder and save your code there, you can find one under the "styles" directory.

Regards,
Max