Theme custom css in vB5

[Lichurec]

Hi!

1) Is there a way to load a custom css (or - preferably - css_additional.css) as a LAST one, so that no other css file can overwrite it's properties?

By default the css_additional is loaded before css_editor (and few other) what makes styling the editor look kinda pesky :/

2) Also - could someone please tell me how come the forum re-applies some styles on some user actions? For instance: editing a forum post (just clicking the "edit" link) results in re-applying some button styles as if their "original" css was re-attached at the end of the document.

L.

[Wayne Luke]

1) Editor is loaded on demand so difficult to use css_additional.css after it. Use !important or edit the ckeditor CSS directly.

2) Javascript can change the CSS class when an action takes place. You'll need to look at your developer tools and look at the class interactions.

[Lichurec]

1) "!important" is not a solution, especially that "css_editor" alone includes declarations with !important which therefore you can not overwrite. In order be able to custom-style the templates one has to be sure that his "customised CSS" WILL be loaded as the very last.

2) in this case JS does not add additional classes. I managed to track down the issue and - from my perspective - it's an error which I can not bypass in any reasonable way.
The contententry template includes <script type="text/javascript"></script> block at the very end. Apparently - rendering this template (which happens if one tries to "edit" someone's post) renders blocks full of <link rel="stylesheet">in place of the script block.

This forces the browser to try to re-download those CSS templates (which it should not do, hence they're already in the browser cache) AND re-render whole page keeping in mind new order of css files ("new" files / files linked lower in the code list will become "more important" and override style declarations from any files loaded / linked earlier).

What's interesting - it's sufficient to have an empty <script type="text/javascript"></script> block in mentioned template for this behaviour to occur… :/

Rendered code looks like:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_b_content_entry.css,css_b_toolbar.css,css_b_content_entry_panel.css,css_b_editor.css,css_b_smilie.css&amp;ts=1383582879 " />
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_b_file_chooser.css,css_b_attach_item.css,css_b_link_input.css,css_b_link_content.css,css_b_table.css&amp;ts=1383582879 " />
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_b_poll_fieldset.css,css_b_datepicker.css&amp;ts=1383582879 " />
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_imgareaselect-animated.css,css_jquery-ui-1_8_14_custom.css,css_jquery_qtip_min.css,css_jquery_selectBox.css,css_global.css&amp;ts=1383582879 " />
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_b_link.css,css_b_layout.css,css_b_button.css,css_b_button_group.css,css_b_dropdown.css&amp;ts=1383582879 " />
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_b_icon.css,css_b_tabbed_pane.css,css_b_form_control.css,css_b_form_input.css,css_b_form_select.css&amp;ts=1383582879 " />
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_b_form_textarea.css,css_b_media.css,css_b_divider.css,css_b_avatar.css,css_b_ajax_loading_indicator.css&amp;ts=1383582879 " />
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_b_topicpreview.css,css_responsive.css&amp;ts=1383582879 " />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_b_content_entry.css,css_b_toolbar.css,css_b_content_entry_panel.css,css_b_editor.css,css_b_smilie.css,css_b_file_chooser.css,css_b_attach_item.css,css_b_link_input.css,css_b_link_content.css,css_b_table.css,css_b_poll_fieldset.css,css_b_datepicker.css&amp;ts=1383582879 ">
<link rel="stylesheet" type="text/css" href="http://test.local/css.php?styleid=4&amp;td=ltr&amp;sheet=css_imgareaselect-animated.css,css_jquery-ui-1_8_14_custom.css,css_jquery_qtip_min.css,css_jquery_selectBox.css,css_global.css,css_b_link.css,css_b_layout.css,css_b_button.css,css_b_button_group.css,css_b_dropdown.css,css_b_icon.css,css_b_tabbed_pane.css,css_b_form_control.css,css_b_form_input.css,css_b_form_select.css,css_b_form_textarea.css,css_b_media.css,css_b_divider.css,css_b_avatar.css,css_b_ajax_loading_indicator.css,css_b_topicpreview.css,css_responsive.css&amp;ts=1383582879 ">
<!--<![endif]-->