Making a writefreely theme, when you don't know how to make a writefreely theme.
So, I've stepped into the wild world of blogging. I've tried my hand at paper journaling, but not everyday is a blockbuster movie, and sometimes my life's just stuck in an infinite cycle of the mundane. And if writing and grammar were my parents—they orphaned me at birth.
Thankfully, I'm infinitely curious, and anything can hook me. That's why I started this blog – to splash down my thoughts onto a online for the web to see. I'm hoping through brute-force, my writing levels up to a fifth-grade essay.
Alright, let's dive into the title of this post; the writefreely theme I've crafted for this blog. I so badly wanted a “gruvbox-dark” based theme. When I realized there were none, I knew there was no one to save this damsel. So I decided, “I'll do it my self!”.
This is the legendary gruvbox theme
But that was ambitious – like, I'm not versed in CSS at all. It feels like trying to decipher a secret code. I've spent a good amount of time trying to grasp the writefreely's template instructions. I can tell the wording was clear as day, but my mind refused to understand the tongues it was whispering to me.
Adding to the complexity, write.as has its own way of handling themes. Some of the usual CSS tricks don't seem to work quite right on this platform.
Still, I managed to wrestle the theme into some form of submission. The trickiest parts were getting the main body text and the footer that says “published with write.as” to cooperate. The body text, in particular, proved to be quite stubborn no matter how much I searched online. None of the solutions seemed to fit.
Finally, I found a solution by targeting both the “article” and “body” elements and using the “!important” rule for the font-family. Like so:
body, article {
background-color: #1d2021;
color: #fbf1c7;
font-family: 'Karla', sans-serif !important;
font-weight: 400;
}
Next, the challenge of styling the footer that proudly proclaims “published with write.as.” This turned into a puzzle with no clear answers from online sources. Impatient by nature, I decided to put on the ol' detective hat and used the browser's inspect element feature to pinpoint the elements I needed to modify. Here's what I came up with:
body footer nav {
margin: 6em 10em 4em;
color: #fbf1c7;
}
body footer a.home:link, body footer a.home:visited {
color: #fbf1c7;
}
I understand that my CSS might not be the most sophisticated solution, but it serves its purpose for now. Until I become more skilled, this is the extent of my toolkit. Thanks for taking the time to check out my progress, and hopefully, I'll be sharing more thoughts more regularly.
Edit 11/29/2025
Alright, I've had exclusivity for long enough. Now it's time to share this thing in it's beautifully ugly glory. I've prettied it up as best as I could for it's first full debut. For the stragglers that come along to find this thing—beware—I am not a web developer, and this .css is made with prayers and feeble hands. Good Luck!
/* =========================================
1. FONTS & GLOBAL SETTINGS
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&display=swap');
body, article {
background-color: #252423;
color: #F9E79C;
font-family: 'Karla', sans-serif !important;
font-weight: 400;
}
a {
color: #ED8948;
}
/* =========================================
2. HEADER & BLOG IDENTITY
========================================= */
/* Blog Title */
#blog-title a {
color: #E9B143;
font-size: 1em;
font-weight: 700;
}
/* Blog Description */
.description {
font-style: normal;
font-family: 'Karla', sans-serif;
font-weight: 500;
color: #EC5547 !important;
}
/* Header Nav - Hide Views */
header nav .views {
display: none;
}
/* Ensure Post Header is visible */
#post header {
opacity: 1 !important;
}
/* =========================================
3. POST CONTENT & TYPOGRAPHY
========================================= */
/* Headings (H1-H6) */
#post article h1, #post article h2, #post article h3,
#post article h4, #post article h5, #post article h6,
#official-writing h2, #official-writing h3, #official-writing h4,
#wrapper h2, #wrapper h3, #wrapper h4 {
color: #D3869B;
}
/* Post Titles (Listing & Individual) */
#title.p-name,
.post-title,
.post-title a.u-url,
.post-title a.u-url:visited {
color: #83C572;
font-weight: 700;
}
body#post article h2#title {
color: #83C572;
}
/* Pinned Posts */
.pinned {
color: #F9E79C !important;
text-transform: uppercase;
}
/* "Read more..." links */
body#collection a.read-more {
text-decoration: underline;
font-family: 'Karla', sans-serif;
color: #ED8948;
}
/* Code Blocks */
#post pre,
#collection pre,
#subpage pre {
background: #3C3836 !important;
border-radius: 1px !important;
color: #A8B94D !important;
border: 1px solid #252423 !important;
}
/* Horizontal Dividers */
hr, article hr, body hr {
background: #79AF9A !important;
height: 3px !important;
margin: 0 auto !important;
}
/* Utility: Always show hidden elements */
.hidden {
opacity: 1;
color: #ED8948;
}
/* =========================================
4. FOOTER & HASHTAGS
========================================= */
footer {
background-image: url(https://i.snap.as/RPbznN1o.png);
background-size: 52px 52px;
background-position: center;
background-repeat: no-repeat;
}
body footer nav {
margin: 6em 5% 4em;
color: #DDC7A1;
}
body footer a.home:link,
body footer a.home:visited,
body footer a.home:hover {
color: #D3869B !important;
}
/* Hashtags */
.hashtag {
color: #D3869B;
font-family: 'Karla', sans-serif !important;
font-weight: 400;
}
.hashtag:hover {
color: #844E5D;
}
a.hashtag span:first-child {
color: #DDC7A1 !important;
}
/* =========================================
5. FORMS & INPUTS
========================================= */
#subscribe-btn {
background: #ED8948;
color: #252423;
border: none;
font-family: 'Karla', sans-serif;
}
input[type="email"], input[type="number"],
input[type="password"], input[type="tel"],
input[type="text"] {
background: #928374;
color: #252423;
border: none;
font-family: 'Karla', sans-serif !important;
}
body#post #emailsub {
text-align: left;
}
/* =========================================
6. COLLECTION HOMEPAGE OVERRIDES
========================================= */
/* Collection Homepage Blog Title Image Replacement */
#collection #blog-title a {
background-image: url(https://i.snap.as/RPbznN1o.png);
background-position: center top;
background-repeat: no-repeat;
display: inline-block;
width: 100%;
background-size: 130px 130px;
padding-top: 150px;
}
Leave your comments below:
Discuss... | Reply by email...