Zetaboards Theme Guide Part 7: The Blog

I get a lot of people saying to me how much they hate editing the blog. I guess it ultimately depends on whether you want to do something fancy with it, or whether you just want to change the hex codes. To be honest, you're unlikely to make anything shockingly beautiful with the blog. It is as simple as it can be.

Some find the rounded corners in the blog do not compliment their design. Unfortunately, the rounded corners are hard coded in Zetaboards, but you can get rid of them if you wish by adding this to your CSS:

#blog .cornercanvas {
display: none !important;
} 

If you've not got a blog enabled on your board, then go to your AdminCP, and go to Preferences > Board Setup. The option to enabled the blogging feature is on that page. Then, go to your personal Preferences area, and you'll see a link has appeared under the Profile Options on the right mini menu. Create your blog here. Then, make an entry using a quote, a quote within a quote, a code and a spoiler.

Your blog should look like this, presently:

Once again, our made hex codes:

Darker blue hex: #1C273D
(Lighter) Dark blue hex: #232f46
Border hex: #0a101b
Links and lighter text: #acbbc2
Link hover and darker text: #848a96

'New' Hex: #2c3952

The Base

The blog feature was actually introduced after the beta had already started, therefore along with the shoutbox CSS, it has been tacked on to the bottom, ignoring the “stylistic CSS is at the top” rule we were running with when creating the CSS.

The blog CSS starts with #blog and ends with #blog_comments li.odd .

Working our way from the outside, locate #blog and change it's background colour to the darker blue hex, and the border colour to this theme's usual hex code for the borders. Then change the font colour to our lighter text hex code.
Edit the CSS and refresh the blog, and you'll see that we've just changed the main 'container' of the blog. The main background, the base.

The Blog's Head

The blog's header is sneaky, and deceptive! What looks like a square inside a rounded corner, is really a border. Sneaky. Therefore when creating your own theme, you can remove this, or adjust the size of the border to make the area thicker/thinner.

The ID for this area is #blog_head. For this, we're going to use the 'new' hex code indicated in the table. We've used it already for highlighting unread PMs. For the blog, we're going to use it a few times as a bridge of sorts, between the dark colours we're using, to define the blog more and make it easier to read. Change the background colour for #blog_head to this hex code. Change the border colour to the darker blue hex. This will be the blue area outlined in the screenshot above.

Edit the CSS and refresh to see your changes:

Bug Fix

In regard to the blog head, there is a bug fix to be added. After the following:

#blog_head img.avatar {
display:inline;
}

Add:

#blog_head:after {
content: "."; 
display: block; 
height: 0;
line-height:0;
clear: both; 
visibility: hidden;
}

The Blog 'Sub'

The #blog_sub is the menu of the blog. It contains links for the blog's owner, and a search facility for searching within their entries.

Change the background for the #blog_sub to the new hex code.

You have now completed the header of the blog.

The Blog Entries

The entries are what makes the blog, a blog.

Look for div.blog_entry and change it's background colour to the new hex code.

Now, you can sadly see a product of the blog feature being added as late as it was. The blog entries are blockquotes, which as you know, are also being used for quotes. Therefore:

#blog blockquote {
background:none;
border:none;
font-size:85%;
padding:0 10px;
}

The CSS for the #blog blockquotes, are effectively ruining the quotes in blog entries, as you can see in my screenshot. Each time there is an embedded quote, the font size gets smaller. It is because of the font-size: 85% attribute in the snippet of CSS above. For each blockquote in the blog, it's font size is 85% of the size that it is in it's parent element.

But this is easily rectified, and we an also make the quote and code boxes look more like they should, by backtracking through the CSS, and then adding something to the CSS (which we will call a bug fix).

Go back up through the CSS and find the original blockquote selector:

blockquote {
background:#1C273D;
border:1px solid #0a101b;
margin:10px auto;
padding-bottom:1px;
width:98%;
}

We're going to add a new selector to share those attributes with. So blockquote needs to become blockquote, #blog blockquote blockquote , to refer to blockquotes inside the blog entries (that are blockquotes!).

If you're a little confused by this, the CSS snippet now needs to look like this:

blockquote, #blog blockquote blockquote {
background:#1C273D;
border:1px solid #0a101b;
margin:10px auto;
padding-bottom:1px;
width:98%;
}

Once you've got that sorted, scroll back down and find:

#blog blockquote {
background:none;
border:none;
font-size:85%;
padding:0 10px;
}

After it, add:

#blog blockquote blockquote {
font-size: 100%;
padding:0;
}

This will ensure that the font size stays the same if someone's blog has embedded quotes. It also removes the side padding that is added to the blog entries.

Edit the CSS, and refresh the page if you've added embedded quotes to a blog entry. If not, doesn't it look so much better? :)

Entry Dates

Now we've fixed the unhappy quote boxes, we can take a look at the blog date. As with the main blog base, rounded corners have been added to this area.

This is the CSS that controls the blog date:

div.blog_date {
background:#f6f6f6;
border:1px solid #3a5197;
color:#5a70b3;
float:right;
font-weight:700;
margin:0 15px;
text-align:center;
text-transform:uppercase;
width:40px;
}
 
div.blog_date span {
background:#fafafa;
border-top:1px solid #e7e7e7;
color:#e77700;
display:block;
font-size:130%;
font-weight:700;
padding:2px 4px;
}

.blog_date is the base of the blog date, and it contains the month. .blog_date span contains the date, and added the dark blue border around the outside.

For the .blog_date, use the (lighter) dark blue hex for the background, change the border hex code, and use the lighter text hex code for the font colour.

To finish up, use the same hex codes for the .blog_date span as you've just used, except don't change the text colour. Keep this orange. A case of keeping just a hint of ZB's orange present on this theme :P

Edit the CSS, and the blog dates are now finished.

Blog Options and Sidebar Blocks

The blog options are the 'footer' to every entry. Currently, it's the light grey capsule at the end of the entry. Luckily, you can edit these, and several other areas of the blog all in one swoop:

#blog_categories,#blog_readers,#blog_about,div.blog_options {
background:#f6f6f6;
margin:15px 0;
padding:5px 7px;
}

Locate this snippet of CSS, and change the background colour to the darker blue hex.

As you can see, it's not only altered the end of the entry, but also the 'About Me' part of the blog's sidebar. Not in the screenshot, it will have also edited the block containing a list of users reading the blog, and the block containing the categories (if your blog has any).

Finishing Up

On the front of the blog, all that is left is some blue text, and the background of the sidebar.

The sidebar's ID is #blog_sidebar, change it's background colour to the new hex code. (#2c3952 ;) )

The blue 'About Me' and 'Readers Online' are both an H3, therefore locate this snippet:

#blog_sidebar h3,#blog_sidebar dt {
color:#5a70b3;
font-weight:700;
}

and change the font colour to the lighter text hex code.

For the blog entry titles, they're links, and they're H2:

#blog h2,#blog h2 a,#blog h2 a:hover {
color:#5a70b3;
}

Change the hex code here using the same hex code you've just used.

The Horizontal Rule Under the contents of the About Me block at the top of the sidebar, you'll notice a straight blue line above the warn markers. This is a horizontal rule.

hr {
background-color:#5a70b3;
border:0;
clear:both;
color:#5a70b3;
height:1px;
}

The CSS for it is at the very top of the CSS. Remove the clear:both line, as this can cause things to mess up if a rule is used in the blog or in posts in the Portal feed. The horizontal rule should function normally without it. Change change each hex code listed, to #0a101b.

Bug Fix

When the table BBcode is finalised, someone might post a table in a blog entry. If they do, they'll run into a problem. Therefore you'll need to add this to your CSS:

#blog table {
clear:none;
}

The front of the blog is now complete :)

One Last Thing...

If you've commented on a blog entry (or someone else has), you'll have noticed that the comments have an alternating background. Locate:

#blog_comments li.odd {
background:#f6f6f6;
}

Change the hex code to the darker blue hex.

You've now completed the blog.


Go to Part 8: Finishing Touches->



themes/themeguide/part7.txt · Last modified: 2016/09/21 14:51 by Helena