Skip to Content Skip to Menu

How to get cb template to load on every page

  • timstohr
  • timstohr
  • OFFLINE
  • Posts: 1091
  • Thanks: 56
  • Karma: 9
3 years 10 months ago #322299 by timstohr
Hi Kyle,
I need to load the template from CB template changer on every page. I will then hook up all the CSS from my website to the variables outputted by CB template so that it is easy to change the colours.
How do I do that?

More precisely, i need to get:
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

  • krileon
  • krileon
  • ONLINE
  • Posts: 48548
  • Thanks: 8290
  • Karma: 1445
3 years 10 months ago #322306 by krileon
Replied by krileon on topic How to get cb template to load on every page

I need to load the template from CB template changer on every page.

Have the CB Login Module displayed on every page or use CB Content Module on every page with its parameter to load CBs template. This will ensure CBs CSS is available everywhere. Our CSS is namespaced so whatever you want styled by CB needs to be surrounded by the cb_template CSS class.

More precisely, i need to get:

Use the var function in your CSS. If you need IE 11 compatibility then be sure to use a fallback. Example as follows.

Code:
.myCSSClass { color: #343a40; color: var(--dark, #343a40); }

First color is a fallback. It should be the value of --dark. The second color after --dark is the default value if --dark is missing and should be whatever color --dark should be.


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.

Moderators: beatnantkrileon
Powered by Kunena Forum