Customize the Bullet Points Theme Stylesheet

This Help File will explain how to customize the color scheme and background for the Bullet Points Theme.  Some basic knowledge of CSS and HTML is recommended before you attempt to change your site's theme colors and you can check out our Resources Guide for Tendenci Community Theme Customization with links to recommended tutorials for CSS and HTML if you need a little more help.

bulletpoints-colors-labeled-homepage-screenshot.jpg

Screenshot above labels some of the @Primary (1), @Secondary (2), @Background (B), and @Complimentary (C) locations on the homepage

Here are some examples of what each Color in the LESS Stylesheet effects on your Site:

@primary

  • Organization Title
  • Headline Space Option background color
  • Main Nav Text Color for your Contact link and when Hovering on a link

@secondary

  • Story Rotator Numbers Color
  • Login links for user name/profile and logout
  • Main navigation border
  • Spaces’ Borders

@complimentary

  • Footer background
  • H3 Header Text in Spaces     

@background

  • Homepage background

Go to Your Site's LESS Stylesheet in the Theme Editor

You can edit your theme colors for the Bullet Points theme by going to the LESS Stylesheet in your site's theme editor.  To simplify finding the stylesheet, simple replace "examplesite.com" with your site's URL followed by the rest of the url in this example: 

http://examplesite.com/theme-editor/editor/?file=/media/css/styles.less

Look for the LESS CSS Styles section and you'll see the @primary, @secondary, and @complimentary Hex color codes to change as well as the @background which by default uses a background image that you can change or you can simply select a HEX code for your background as well. 

First Remove Comments

Before you can customize the colors in the Bullet Points Theme, you must first remove the CSS comments that are in front of the @colors for the theme.  The CSS comments ("//") are used to "hide" the @colors from the Theme.  

Here is a screenshot that has the comments highlighted in pink and the @colors highlighted in yellow:

remove-comments-from-bulletpoints-stylesheet-to-change-colors.jpg

Remove the "//" from each line and then save your stylesheet. Here is a screenshot showing what the @colors should look like like without the comments: 

bulletpoints-theme-without-css-comments-on-color-styles.jpg

Second, Update the Default and Homepage HTML Files

You'll then need to go and update the default.html and homepage.html files to replace the lines of code so the theme will always refer to the @colors on your LESS stylesheet.  This is pretty easy and you can copy and paste the code into each template file and replace the redirecting code. 

To replace the Homepage HTML File: 

Go to your homepage file in your theme editor at: http://yoursite.tendenciapp.com/ theme-editor/editor/ (replace "yoursite" with the name of your site).

Replace the following lines:

{% if MODULE_THEME_THEMECOLOR %}
    <link rel="stylesheet/less" href="{{ THEME_URL }}media/css/{{ MODULE_THEME_THEMECOLOR }}.less" type="text/css" media="screen" />
    {% else %}
    <link rel="stylesheet/less" href="{{ THEME_URL }}media/css/gold-grey-purple.less" type="text/css" media="screen" />
    {% endif %}

With this code: 

 <link rel="stylesheet/less" href="{{ THEME_URL }}media/css/styles.less" type="text/css" media="screen" />

Here are screenshots from the theme editor showing the code before and after replacement:

Look for the yellow highlighted code below and replace it with the new line: 

bulletpoints-theme-homepage-customization-changes-original.jpg

So that it now looks like this: 

bulletpoints-theme-homepage-customization-changes-after-replacing.jpg

To replace the Default HTML File: 

Go to your default template in your theme editor at: http://yoursite.tendenciapp.com/theme-editor/editor/?file=templates/default.html&theme_edit=bulletpoints#to-editor (replace "yoursite" with the name of your site).

You can also navigate to your default template by using the theme editor's side bar menu.  Here is a screenshot of the side bar: 

bullet-points-theme-editor-side-bar-menu.jpg

You'll remove the code as shown below (highlighted in yellow) and be sure you don't remove all of the last line - only remove the yellow highlighted text:

bulletpoints-default-template-before-update.jpg

Replace the text with 

<link rel="stylesheet/less" href="{{ THEME_URL }}media/css/styles.less" type="text/css" media="screen" />

so that the default file now looks like this: 

bullet-points-default-template-after-update.jpg

Once you have removed the CSS comments from your @colors and updated the code in your default.html and homepage.html files, you can now customize your HEX codes for your site in the LESS stylesheet. 

Customize your @Colors

To customize your site's colors, you simply will select the HEX codes you would like and edit your LESS stylesheet to replace the default HEX codes with your own.  Here is a screenshot with the hex codes highlighted in yellow that you'll replace: 

bulletpoints-hex-codes-highlighted-to-customize.jpg

Make sure you save your changes in your theme editor and you may need to refresh your web browser's cache to see the new changes. 

Change the Font Size in the Header for Your Organization's Name

If you have a long organization name, then it will not always fit correctly in the Header of your site unless you change the text size.  To correct that, you'll want to reduce the font size of the header-font in your theme's LESS stylesheet.  

First, go to the LESS stylesheet (yoursite.tendenciapp.com /theme-editor/editor/?file=/media/css/styles.less)

Next, look for header font size (Default is 54px) inside the base layout section.

Then, change this to the font size you most prefer (32-34 works most of the time to give you a starting point)

Here is a screenshot with the header-font highlighted in yellow after changing it from 54px to 34px: 

bulletpoints-header-font-size.jpg

Clear Your Cache

When you are editing the theme's stylesheet and other files in the theme editor, you will want to clear your browsers cache to review the changes many times.  Your new changes may not show up right away unless you clear your cache, which is a quick task to perform.  Read this help file on How to Clear Your Browsers Cache in 5 Seconds to learn how to clear the cache on your web browser. 

Did this Help File answer your question?  If not - email your question to our support team or visit our Tendenci Forums for more help!