0
1

[–] zombieman 0 points 1 points (+1|-0) ago 

The above code is great! I would like to add to it, if I may.

If you want more customization options though, like only certain header numbers to style and each mode separated, try this. You can remove the .titlebox h# (where # is a number) that you don't want to style, and the .light/.dark .side .md h# that you don't want styled. Same goes for the +blockquote as well. This code puts a border around each box and puts a semi-translucent background in the boxes. It also makes the text smaller to fit better. To get the box effect, you have to put your content in a quote, but that is no big deal. It centers the headers and it also removes the italics so you don't have to manually set it to bold to get rid of them.

This is an explanation of the options you have here. This is the background option, that changes the background color. rgba stands for red, green, blue, alpha. rgb is the color, and alpha is the opacity.

background: rgba(41, 41, 41, 0.5);

This is your border. 1px wide, solid, color of #292929.

border: 1px solid #292929;

This is your curved corners. the larger the number, the more curve.

border-radius: 2px;

This is the distance from the letters to the box edge.

padding: 2px;

This is your font size.

font-size: 12px; or font-size: 110%;

This is what centers the text. Options are left, center, or right.

text-align: center;

This takes away the italics. It can be normal, italic, oblique, initial, and inherit.

font-style: normal;

/* This snip will give you boxes around your
 *  sidebar content. You can change
 *  the colors to your liking. It also removes the italics 
 *  from the default headers and centers the headers. You
 *  can add it back if you want. This is setup for light
 *  and dark mode.
 */

/* This centers the header text */
.titlebox h1,
.titlebox h2,
.titlebox h3,
.titlebox h4,
.titlebox h5 {
    text-align: center;
}
/* Remove the italics */
.md h3, .md h4, .md h5, .md h6 {
    font-style: normal;
    font-size: 110%;
}
/* Put boxes around sidebar content */
.light .side .md h1,
.light .side .md h2,
.light .side .md h3,
.light .side .md h4,
.light .side .md h5 {
    background: rgba(192, 192, 192, 0.2);
    border: 1px solid;
    border-radius: 2px;
    padding: 2px;
    font-size: 12px;
}
.dark .side .md h1,
.dark .side .md h2,
.dark .side .md h3,
.dark .side .md h4,
.dark .side .md h5 {
    background: rgba(41, 41, 41, 0.5);
    border: 1px solid;
    border-radius: 2px;
    padding: 2px;
    font-size: 12px;
}
.light .side .md h1 + blockquote,
.light .side .md h2 + blockquote,
.light .side .md h3 + blockquote,
.light .side .md h4 + blockquote,
.light .side .md h5 + blockquote {
    background: rgba(192, 192, 192, 0.2);
    border: 1px solid;
    border-radius: 2px;
    padding: 5px;
    font-size: 11px;
}
.dark .side .md h1 + blockquote,
.dark .side .md h2 + blockquote,
.dark .side .md h3 + blockquote,
.dark .side .md h4 + blockquote,
.dark .side .md h5 + blockquote {
    background: rgba(41, 41, 41, 0.5);
    border: 1px solid;
    border-radius: 2px;
    padding: 5px;
}
/* If you want a border around the whole user content
 *  part of the sidebar, uncomment this:
 */
/*
.light  #form-xxxx {
    border: 1px solid #c0c0c0;
    padding: 6px; 
 }
 .dark  #form-xxxx {
    border: 1px solid #292929;
    padding: 6px; 
 }
 */

I really hope that helps!