UioveX Masterclass: Template Design & Customization (Part 2)
Welcome back to the UioveX Masterclass! In Part 1, we built the essential skeleton of our Blogger template. Now, it's time to give it a soul. In this comprehensive second part, SAM at UioveX will guide you through styling your template with modern CSS, deeply customizing the core Blog Posts widget, and engineering a professional, interactive comment section.
Module 1: The Soul of the Design - Advanced CSS and Layout Styling
A great template is defined by its design. We'll use modern CSS techniques like variables to make our template not only beautiful but also incredibly easy for you or your users to customize later.
Step 1.1: Defining Your Color Palette with CSS Variables
CSS Variables (Custom Properties) are like storage boxes for your styles. Define a color once, and you can reuse it everywhere. This is the professional way to manage theme colors. Open your UioveX-Template.xml file and find the <b:skin> tag. Replace the existing CSS with the following block.
/*--[[ UioveX Masterpiece Base CSS v1.0 by SAM ]]--*/
:root { /* UioveX: Defining CSS variables for easy theming */
--uiovex-primary-color: #4f46e5;
--uiovex-primary-light: #818cf8;
--uiovex-text-dark: #1e293b;
--uiovex-text-light: #64748b;
--uiovex-bg-light: #f8fafc;
--uioveX-card-bg: #ffffff;
--uiovex-border-color: #e2e8f0;
--uiovex-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--uiovex-radius: 16px;
--uiovex-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
/* UioveX: Basic Body Styling */
body.uiovex-body {
font-family: var(--uiovex-font-body);
background: var(--uiovex-bg-light);
color: var(--uiovex-text-dark);
margin: 0;
}
.uiovex-body__wrapper {
width: 100%;
overflow-x: hidden;
}
/* UioveX: Layout Structure Styling */
.uiovex-content__wrapper {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 2rem auto;
gap: 2rem;
padding: 0 1rem;
}
.uiovex-main__wrapper { flex: 1; min-width: 0; }
.uiovex-sidebar__wrapper { flex-basis: 320px; flex-grow: 1; }
@media (max-width: 960px) {
.uiovex-content__wrapper { flex-direction: column; }
.uiovex-sidebar__wrapper { flex-basis: auto; }
}
/* UioveX: Header & Footer Styling */
.uiovex-header, .uiovex-footer {
padding: 1rem;
background: var(--uioveX-card-bg);
border-bottom: 1px solid var(--uiovex-border-color);
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.uiovex-footer {
border-top: 1px solid var(--uiovex-border-color);
border-bottom: 0;
margin-top: 2rem;
text-align: center;
font-size: 0.9rem;
color: var(--uiovex-text-light);
}
.uiovex-footer a { color: var(--uiovex-primary-color); text-decoration: none; }
Why Use Variables? Imagine you want to change the primary color of your theme from blue to green. Without variables, you'd have to find and replace every instance of the color blue. With variables, you only need to change it in one place: --uiovex-primary-color: #10b981;. It's efficient and powerful!
Module 2: The Heart of the Blog - Customizing the Blog1 Widget
The `Blog1` widget controls the display of your posts. This is where we will create a beautiful, modern post card design that grabs the reader's attention and includes critical SEO metadata.
Step 2.1: Designing the Post Card and Implementing Schema
Let's replace the basic post loop from Part 1 with a more advanced structure. Find the `
<b:includable id='main'>
<div class='uiovex-post-feed'>
<b:loop values='data:posts' var='post'>
<!-- UioveX: Individual Post Card with Schema Markup -->
<article class='uiovex-post-card' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta expr:content='data:post.id' itemprop='mainEntityOfPage'/>
<!-- Post Thumbnail -->
<b:if cond='data:post.featuredImage'>
<a class='uiovex-post-card__thumbnail-link' expr:href='data:post.url'>
<img class='uiovex-post-card__thumbnail' expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 720, "16:9")' itemprop='image'/>
</a>
</b:if>
<div class='uiovex-post-card__content'>
<header class='uiovex-post-card__header'>
<b:if cond='data:post.labels'>
<div class='uiovex-post-card__labels'>
<b:loop values='data:post.labels limit 1' var='label'>
<a expr:href='data:label.url' rel='tag' itemprop='keywords'><data:label.name/></a>
</b:loop>
</div>
</b:if>
<h2 class='uiovex-post-card__title' itemprop='headline'>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
</header>
<div class='uiovex-post-card__excerpt' itemprop='description'>
<p><data:post.snippets.long/></p>
</div>
<footer class='uiovex-post-card__meta'>
<div class='uiovex-post-card__author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<img class='uiovex-post-card__author-avatar' expr:src='data:post.author.authorPhoto.image' itemprop='image'/>
<span itemprop='name'><data:post.author.name/></span>
</div>
<time class='uiovex-post-card__date' expr:datetime='data:post.date.iso8601' itemprop='datePublished'>
<data:post.date.formatted/>
</time>
</footer>
</div>
</article>
</b:loop>
</div>
<!-- UioveX: We will add post pagination here later -->
</b:includable>Step 2.2: Add CSS for the Post Cards
Now, let's add the styling for these new classes inside your <b:skin> tag.
/*--[[ UioveX Post Card Styles by SAM ]]--*/
.uiovex-post-card {
background: var(--uiovex-card-bg);
border-radius: var(--uiovex-radius);
border: 1px solid var(--uiovex-border-color);
margin-bottom: 2rem;
box-shadow: var(--uiovex-shadow);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.uiovex-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
.uiovex-post-card__thumbnail {
width: 100%;
height: auto;
display: block;
}
.uiovex-post-card__content {
padding: 1.5rem 2rem;
}
.uiovex-post-card__labels a {
font-size: 0.8rem;
font-weight: 600;
color: var(--uiovex-primary-color);
background: color-mix(in srgb, var(--uiovex-primary-color) 15%, transparent);
padding: 0.3rem 0.8rem;
border-radius: 20px;
text-decoration: none;
}
.uiovex-post-card__title {
margin: 0.75rem 0;
}
.uiovex-post-card__title a {
font-size: 1.6rem;
color: var(--uiovex-text-dark);
text-decoration: none;
font-weight: 700;
}
.uiovex-post-card__excerpt p {
color: var(--uiovex-text-light);
margin-bottom: 1.5rem;
}
.uiovex-post-card__meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.9rem;
color: var(--uiovex-text-light);
}
.uiovex-post-card__author {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
}
.uiovex-post-card__author-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
Module 3: Fostering Community - Engineering the Perfect Comment Section
The default Blogger comment system is functional but lacks modern design and features. We will completely transform it. This is an advanced step, but it makes a huge difference.
We need to add a special includable inside our `
<!-- UioveX: This block completely overrides the default comment system -->
<b:includable id='comments' var='post'>
<div class='uiovex-comments__wrapper' id='comments'>
<b:if cond='data:post.allowComments'>
<div class='uiovex-comments__header'>
<h3><data:post.numberOfComments/> Comments</h3>
</div>
<div class='uiovex-comments__thread'>
<b:loop values='data:post.comments' var='comment'>
<div class='uiovex-comment'>
<div class='uiovex-comment__avatar'>
<img expr:src='data:comment.author.authorPhoto.image'/>
</div>
<div class='uiovex-comment__content'>
<div class='uiovex-comment__header'>
<span class='uiovex-comment__author'><data:comment.author.name/></span>
<span class='uiovex-comment__timestamp'><data:comment.timestamp/></span>
</div>
<div class='uiovex-comment__body'>
<p><data:comment.body/></p>
</div>
<div class='uiovex-comment__actions'>
<a class='uiovex-comment__reply' expr:href='data:comment.replyUrl'>Reply</a>
</div>
</div>
</div>
</b:loop>
</div>
<div class='uiovex-comment-form'>
<b:include data='post' name='commentForm'/>
</div>
</b:if>
</div>
</b:includable>What is `b:includable`? Think of it as a reusable block of code. The main `b:includable` is called automatically by Blogger. By creating a new one with a specific `id` (like `comments`), we can override Blogger's default function for displaying comments and replace it with our own custom HTML structure.
Conclusion and What's Next in Part 3
Incredible work! You have now transformed a basic skeleton into a visually appealing, well-structured template with a custom post design. You've learned about CSS variables, advanced widget customization, and the power of Schema markup.
Our template is looking good, but it's not yet interactive. The journey doesn't end here.
In the next and final part of this masterclass, we will bring our template to life with advanced JavaScript features. We will cover:
- Implementing a Dark/Light Mode Toggle.
- Lazy Loading for images to boost performance.
- Creating a responsive mobile navigation menu.
- And much more!
