ExBlog

Why this module ❓

I created this Module because I was looking for a nice Blogscript which was easily customizable. And then I found this script and I loved it immediately.

But for me it was not so easy to customise, pretty complicated for my level of coding-skills and this module "Headadditions" makes it pretty easy to customise the Blog and it's extremely powerful too: anybody can add scripts like analytics or cookieconsent to the Blog, add metatags for SEO and stylesheets to make things look different, more to their likings.

About styling the blog:

The installed theme is Topaz, which is a minimalistic theme and very nicely responsive. Topaz itself is mostly black & white.

As you can see all around in this blog the blogposts have different colors, every category has it's own look, just like the categories of my websites (which are hereby reflected by the blog-categories).

I use css-variables to make colour-categories to keep a good view of all the styles.
Every category has it's own classname and what I do is something like this:

Creating the container:

<div class="blockquote webdev">
    Something
<div>

As you can see in above example the div has two classnames, the class "blockquote" is meant to create a block of which the borders, font-styles etc. (everything but the colors) are shared by the different categories.
I chose not to use the <blockquote>-element but a class instead, to be sure that it's unique within all stylesheets, that way I do not have to override the element.

Downside of that is that I can only nest other classes (not elements) because elements can not be nested within classes, only within other elements. I could have chosen to use the <blockquote>-element instead of a class, but I didn't and this works perfectly:

Top-down the stylesheet contains basically:

1. The variables
2. All the (shared) elements
3. The shared classes (dimensions, margins, paddings etc.)
4. The category-classes with the specific sub-classes nested in them
5. The media-queries

So: this class .blockquote is in the stylesheet above and separate from the category-classes, this way I can make each category-class inherit all it's values (not colors) and at the same time have it's own category-specific colors because of the second class .[categoryname] that I assign to the container:

<div class="blockquote categoryname">
    Blogpostcontent
<div>

Except for the colors: they are declared in the class .webdev

border-width and border-style are declared separately, because border-color needs to be declared specifically for this category "webdevelopment (.webdev)"

The container-styles (not the colors):

    .blockquote {
        margin: auto;
        padding: 2em 1.2em;
        border-width: 6px;
        border-style: ridge;
        border-radius: 5%;
        width: 92%;
        text-align: left;
    }

The class "webdev" is the main-class of the category "webdevelopment" in which I nest all the other classes that style this particular category, an example (note that border-color is declared under the class/category "webdev" to give it it's specific look only for this category):

The category-colors:

.webdev {
    color: var(--webdevfont);
    background-color: var(--webdevpost);
    border-color: var(--webdevborder);
    .blockquotetitle {color: var(--webdevbasics)}
    .block, .listblock {color: var(--webdevpost); background-color: var(--webdevblocksbg); border-color: var(--webdevborder)}
    .blocktitle {color: var(--webdevpost)}
    .divider {border-color: var(--webdevborder)}
    .linktext {color: var(--webdevlinks)}
    etc.
}

And ofcourse at the beginning of the stylesheet:

The variables:

:root {
    --webdevborder: #6f6f6f;
    --webdevbasics: #cfcfff;
    --webdevlinks: #afafff;
    --webdevblocksbg: #efefef;
    --webdevextra: #7f7fff;
    --webdevattention: #ffcf5f;
    --portugalpost: #4b4927;
    --portugalfont: #afffaf;
    --portugalborder: #6f1f6f;
    --portugalbasics: #df9fdf;
    etc.
}

Putting it all together:

:root { /* declare variables per blogpostcategory */
    --whatevers: #hexnum;
    --webdev1: #7f7fff;
    --webdev2: #ffcf5f;
    --portugal1: #4b4927;
    --portugal2: #afffaf;
    --etc.
}

element1 {styles}
element2 {styles}
element3 {styles}
etc.

.class1 {styles not being colors}
.class2 {styles not being colors}
.class3 {styles not being colors}
etc.

.category1 {
    color: {color}
    background-color: {color}
    border-color: {color}
        {
        .category1nestedclass1: {color}
        .category1nestedclass2: {color}
        .category1nestedclass3: {color}
        .etc: {color}
        }
}
.category2 {
    color: {color};
    background-color: {color};
    border-color: {color}
        {
        .category2nestedclass1: {color}
        .category2nestedclass2: {color}
        .category2nestedclass3: {color}
        etc: {color}
        }
}

Mediaqueries at the bottom



Epilogue:

So this is how I override all styles used by the blogscript with only one module "headadditions" without having to make a whole new theme.

Next to that I now also have the power to choose from different style-sets in one blogscript, to be able to add style-sets (blogcategories) as much as I want ánd to change styles easily because of the use of variables per category.

Ofcourse: I also use general styles in my blogarticles, often links are colored all the same, within ánd outside of the blogpost (some stylesets have different link-colors because they use a dark blackground, while the default background-color is light).

I hope that I managed to give a good explanation of what powers you have and how to put them to use in this module, if you have any questions, remarks or tips then please let me hear about it ❗

By the way: have you noticed that I used three .blockquotes (class) instead of just one?
That means that I can even mix stylesets within one blogpost...

🙄 😁

View the repository on Github (where I am still trying to figure out who, what, where and when?)