Skip to main content

 

Kareo Help Center

2. Modifying the Look and Feel

Now that we've added some basic logos and icons to your site, let's now look at changing the look and feel of certain portions of the user interface (UI).

What can I change?

That's a loaded question, but honestly--the sky's the limit here. You can target anything found on the body to customize with CSS or in any of the following regions to customize with custom HTML.

MindTouch Branding Regions-2.png

With that said, do not focus on getting your branding 100% right out of the gate. For your launch, it's important to stay focused on your minimum viable product (MVP) which will include basic branding elements. The quicker you can get your site launched, the quicker you'll start to be able to analyze your custom movement and interest within your product documentation.

Extending out branding to rework the default MindTouch UI completely? Let's call that revision 2, and that can be done after you launch.

For now, keep it simple.

Adding CSS/LESS

MindTouch supports LESS, which is a pre-processing engine for CSS. What does this really mean? You can still use CSS, but by leveraging LESS, your custom styles will load even faster on all devices, creating new code is easier, and delivering a truly great experience for you customers is a breeze.

As a bonus, simply applying one line of LESS to target any of our built-in variables, you can change your entire site (the equivalent of several hundred lines of code).

If you are not a professional resource responsible for branding, there are a lot of ways you can mess up your site, so it is recommended you leave that to the correct resource, but there are a few lower-risk things you can do if you are just starting off with your site. An easy, but impactful thing anybody can do to their site is make changes to their site 'LESS variables'. That link includes a comprehensive list of all out-of-the-box LESS variables, and included below is a walkthrough on how to add one of these as well as set it to a web color you find when you don't know the hex color you want to use. Apart from this, please leave all other branding matters including this one once you get one, to your branding/ui/ux/front-end designer or developer resource.

See Changing the Highlight Color (LESS Variable)

However, if you are a professional resource responsible for branding a customer site or your individual company's site, please view the link below on "Viewing the full documentation". The following will encapsulate all you will need to know to be successful. If you have additional questions though, we are always here to help.

View Full Documentation on Adding CSS/LESS - (for Professional Branding Resource Only) 

Adding HTML

Adding HTML can applied globally via any our built-in templates targeting the Header, Footer, Content Header, or Content Footer, or can applied on an individual page basis to only be displayed on that page. Although some HTML changes can be done via the "</> HTML" (View Source), it is a live editor, whereupon certain changes, clicks, additions, and sometimes merely click to edit the page may cause certain classes or tags to be injected or eroded so it is recommended you instead use a DekiScript scripting block for all of your HTML additions. DekiScript blocks will never change and in event of errors will not display to your end user or risk crashing your site.

Adding HTML like CSS should be left to professionals only, and although DekiScript is not a language any outside resources are proficient in, as it is a scripting language of our own making, as long as you know basic HTML, you can pick it up by following the guide below. We follow the most up to date and strict web standards, which may be why certain syntax changes may seem unfamiliar or strange.

With DekiScript you are able to create uniquely formatted HTML and JS, inlined CSS, and page manipulation such as template calls, API Calls, content reuse, content trees, and more to be created all under 1 type of scripting language. Once you learn to format your code differently, the possibilities of doing more with it such as having dynamic HTML based on user, group, content hierarchy, if certain tags are present, or more super easy.

View Full Documentation on Adding Custom HTML - (for Professional Branding Resource Only)

  • Was this article helpful?