After a while, I decided to shake the cobwebs out of VIM (my code editor of choice) and get to work on a template I had started a few months ago. Citlali, is the Nahuatl word for “star” and is a common female name in Mexico.
Based on the new version of Bootstrap framework, the idea is a simple design but also with the ability to show a good amount of content on the home page. A design that would convey a fresh image but still be pleasant to read and compatible with a large number of screen resolutions. Perhaps the biggest novelty is the incorporation of a dark mode and the respective switch to select the preferred one.
Citlali is available in its original CSS version and for Blogger in regular version (fully functional) and the Pro version, with extra customization features.
Content
Documentation
Templates options
In this template you have a small gadget of Options related with some elements inside the template. These options are:
- Display Particles effect on Header. To display or not the effect of white particles floating in the header. Then, in the URL field you can type:
trueorfalse. - Top menu always visible (sticky menu). You can choose to always display the top menu (true) or not (false). In the URL field you could write:
trueorfalse. - Force uppercase in titles. Transform posts titles, sidebar titles, etc to uppercase. In the URL field you could write:
trueorfalse.
The main menu supports drop-down items. This menu is based on a Link List gadget. To add a regular link (without displaying a sub-menu), you add it as any link in these gadgets, example:
To add a menu item with ONE level drop down sub items:
To add an item with ONE LEVEL drop-down sub-menu:
1. Crate a regular link, in this case the URL is not relevant.
2. Create a second link, but this time add a dash at the beginning of the New Site Name field and the correspondent URL. This is going to be the first element of your drop down menu.
3. Add as many element as you need, but remember to add the dash at the beginning of each Site Name.
Full gadget example:
Result:
To add a menu item with TWO levels drop down sub items: 1. Crate a regular link, in this case the URL is not relevant.
2. Create a second link, but add ONE dash at the beginning of the New Site Name field and the correspondent URL. This is going to be the first element of your drop down menu.
3. Create a third link, but this time add TWO dash at the beginning of the New Site Name field and the correspondent URL. 
Full gadget example:
Result:
Blog title or Logo
You can change, delete or add a logo to your blog going to your Blogger panel, then Layout, look for Page Header Gadget and clicking on edit.
You also can edit your Blog title and description with this option.
Gadget descriptions
Most gadgets in Blogger don’t allow you to add a text description on them, but sometimes a description is very useful. To add a text description under the title of any gadget, change the title of the gadget following this format:
Title-desc:DescriptionWhere:
Title– Is the title you want for this widget.Description– Is the text description to display under the title.
Example: The Follow by Email widgets don’t have a field to add a description, to add one, we can write the following in the title field:
SUBSCRIBE-desc:Subscribe for Free to get all newest tutorials and lessons.The gadget would look like:
And the result would looks like:
Note: The email subscription gadget was removed by Blogger but the description for gadgets follows this logic.
Blockquotes
In order to display the Blockquotes with the right format inside a post, you need to use the posts editor in HTML mode:
HTML view on the Blogger editor.
And use the follow HTML structure:
<blockquote><p>Content of my quote</p></blockquote>
Code
In order to display code with the right format inside a post, you need to use the posts editor in HTML mode (see Blockquotes). And use the following HTML structure:
<code><span>This is my code & looks great</span></code>Lists of posts on main page.
On the main page there are two sections with lists of posts (in the demo these are the sections called “Featured posts” and “Latest news”) and a slider (also called “Slider” in the demo). These three sections work with an HTML gadget and show by default the latest posts of the blog, but they can be configured to show the content of any label. To do this, the content of the HTML gadget must follow the following structure:
NumberOfPosts-TypeOfPosts-ThumbnailSize-FormatStyleWhere
NumberOfPosts– is the number of posts to display.TypeOfPostscould be:latestposts– To display the latest blog posts regardless of their labels.tag:Label– To display the latest posts of a specific tag. Where “Label” is the exact name of the desired label as it appears in your posts.
ThumbnailSize– It is the size in pixels of the thumbnail image.FormatStyle– You can take the values:slider– To display it as a slider.composition1– To display a gallery of posts. Used in the “Feature posts” section of the demo. Note: For this format, the ideal NumberOfPosts value is 5, but you can use 9 or 13 if you want to display more content.bloglist– To display a list of posts. Using the “Latest news” section of the demo.
Example 1: To display 5 posts in the first list of posts (Featured posts) of the “Travel” tag, the following structure would be used:
5-Tag:Travel-800px-composition1Example 2: To display 5 posts in the slider of the “Languages” tag, the following structure would be used:
5-tag:Languages-800px-sliderExample 3: To display the last 4 posts of the blog in the second list of posts (Latest news), the following structure would be used:
4-latest-400px-bloglistNote: To display the latest blog posts it is not necessary to include the tag: subfix.
List of posts inside a post
Sometimes is very useful to list the posts under a specific label, for example to display all the content related to an event or person. In this template you can create this list with just one line.
For example, to display the latest 50 posts inside the label “Travel”, you just need to add inside you post this line:
[posts--tag:Travel--50]
Similar to the slider, you can create lists with the latest blog posts or by label in the sidebar and/or footer. To create a new list of posts:
1. Go to Blogger/Layout and create a new HTML gadget. You can use whatever title you want.
2. In the gadget’s content: To display the latest blog posts use:
3-latest-65pxTo display the latest posts in a specific label use:
3-tag:Label name-65pxWhere “Label name” is the exact name of the label you want to use.
In both cases you can replace the number “3” with the number of posts you want to display.
Labels’ galleries
Labels’ galleries work in the Pro version of the template. These galleries use the Labels gadget and what they do is to show a nicer list of labels with a preview image. This preview image corresponds to the image of the last post within that label.
These galleries make the reader’s navigation more friendly and make the appearance of the blog more dynamic, since they are updated every time a post is published within a label.
In the demo, it is the “Sections” section on the home page. And as a gadget in the footer, also with the name “Sections”.
Like any label gadget, it is possible to display only the desired labels.
In the case of the free version, the “Sections” section of the home page is replaced with an HTML gadget. Here you can manually add a gallery by editing an HTML code for each element, like the following:
<a class="bt-tag" href="URL" alt=""><div class="tag-thumb"><img src="IMAGE URL"></div><h4>NAME</h4></a>
In this template you can add social icons to the sidebar or footer in a very easy way, you just need to edit or create a Links List gadget and add all your social media links there, then your links are going to be transformed in icons automatically.
Example:
The same applies to the bar with social icons on header:
Because Mastodon uses a wide variety of servers and domain names, to your profile link, it is necessary to add ?icon=mastodon at the end of the link, example:
https://fosstodon.org/fcovicente?icon=mastodonLatest comments widget
To add a Latest comments widget you just need to add a new HTML gadget with the content following this format:
NumberOfComments-commentsWhere:
NumberOfComments is the number of comments you want to display.
Example, to add a list with the latest 3 comments the content in the HTML gadget would be:
3-commentsDark mode
The dark mode is available in the Pro version.
This function makes use of Javascript to know if the user prefers a light version (default) and dark mode. Once detected, it applies it to the layout.
The reader can set his design preference, independently of the one he has configured in his system, using the switch found in the main menu. This preference will be remembered for future visits.
Related posts
Related posts are available in the Pro version and appear automatically under the post content in the individual entries. These posts are based on the first tag of the post.
404 Error Page
The 404 error page can be customized from the Blogger panel. Simply locate the corresponding section in the “Design” section. There you have an image gadget and an HTML gadget available.
Main font family and colors
To edit the current main font family and the color of some of the elements in the template, in your Blogger dashboard go to Layout, the look for the link to the Theme Designer. Once there, go to Adjust widths, here you can change the font and some colors.
RTL Support.
The template offers partial support for RTL (right to left) alignment, used in languages such as Arabic. To enable it, in the code of your template look for:
<html b:css='false'And replace it with:
<html lang="ar" dir="rtl" b:css='false'Where ar is the language code for Arabic.
Then look for:
bootstrap.min.cssAnd replace it with:
bootstrap.rtl.min.cssChangelog
- Version 1.0 – 30-01-2023 – Initial release.