Easy, customizable, and responsive layouts
Using this stylesheet you can:
This is made with theme makers in mind, so some HTML and CSS knowledge is required, but you do not have to write CSS of your own.
How to install
It’s really easy to get carried away and ramble in the tags, but not everyone wants it to show up on their blog. With this tutorial I’ll show you how to display only certain tags so you can ramble to your heart’s content without taking up the space.
Basic HTML and CSS knowledge is recommended to fully understand this tutorial!
I use theme localization in almost all of my themes. Not only does it help translate your theme into multiple languages, it also provides link formatting for things theme makers often write out manually. It’s really easy to miss the localization page, which is linked near the end of the theme docs. It’s a long list, so I wanted to share some of my favorites.
If you use day pages, there’s a really easy way to put the links for them using this localization string: {lang:Posted on DayOfWeek DayOfMonth Month Year 3}
This automatically inserts the text for the day, month, and year of the post as well as making it a link to the day page. (here’s more info on day pages)
You can also use it for displaying content on your search pages with strings like this: {lang:Found SearchResultCount results for SearchQuery}.
There’s strings for pagination: {lang:Page CurrentPage of TotalPages}
And even some simple strings like: {lang:About} and {lang:Filed Under}
There’s a lot more strings on the page itself, and this post doesn’t even cover the many variations of some of the strings I listed above.
So for those, like myself until I did this on accident, who didn’t know:
If you type ctrl/command and ? in the theme editor, it automatically changes the line to a comment (works for html, css and js).
I’ll never have to type out <!– –> manually again
Well, luckily you don’t have to memorize everything! In any field, you’re allowed to google things. You don’t have to know everything about the subject. You’re allowed to have references.
This is especially true for web design, because it’s a constantly growing and changing thing. No one will probably ever have everything memorized, because new things are being added all the time!
I’m always using w3schools for reference just in case I remembered something wrong, even though I’ve been coding for several years now.
But to help you stay more consistent, I suggest practicing. You don’t have to make a fancy thing every day, but try to set aside some time every now and then to make something. It can just be a sidebar, a simple script, an about page, etc. You don’t have to publish these things, either. It’s just to practice.
If you’re stuck on what to make/how to practice, you can try the exercises on w3schools and codecademy. codecademy is also good for getting the basics down and they walk you through each step using real examples and scenarios.
Taking breaks is fine of course, but the more often you practice the more likely you are to remember it. It’s just like drawing, playing instruments, math, writing, and any other skill!
If you don’t have time for that yet, try writing things down for reference later! This can be a page of basic syntax, examples, ideas, etc. Basically just a cheat sheet or study guide for you to look at when you’re stuck!
But still, remember that it’s okay if you forget some things. It’s okay if you need to use references. Look at stackoverflow, for example! It’s full of so many people of all skill levels asking each other for help! You don’t have to have everything memorized to be able to code and make good things.
Some theme making advice: if you’re going to include a custom cursor option, please include a default cursor, because not everyone knows to upload one.
I’ve seen quite a few blogs using themes with custom cursors that never uploaded one so there’s just a tiny dot for a cursor/no visible cursor. It makes their blog nearly unusable and makes your theme look unusable as well.
Try to include a different cursor option for hovering over links. Unless your links are clearly different from normal text (which I also recommend doing), it will be hard to differentiate between plain text and links if the cursors are the same for both.
Note: You have to be using dashboard style captions, using the variables from the default theme. @bychloethemes made a great list of all the blocks and variables for dashboard captions
So, this is the HTML for if a user is inactive/deactiviated
{block:IsDeactivated}
<span class="inactive">{Username}</span>{/block:IsDeactivated}
For only the username part, add the class deactivated. (this is because the inactive class also appears around the image, so just using inactive won’t give you the same result)
now it should look like this
{block:IsDeactivated}
<span class="inactive deactivated">{Username}</span>{/block:IsDeactivated} You need to do this for every post type where this occurs!
Lastly, in the CSS, you need to add this
.deactivated:after {
content:'deactivated';
position:absolute;
padding-left:8px;
opacity:0;
transition:.4s ease-in-out;
}
.deactivated:hover:after {
opacity:1;}
And that’s it! You’re all done.
This is a pseudo-class that I end up using a lot, so I decided to share how to use it and how I incorporate it in my themes!
Let’s start off by explaining what a pseudo-class is. A pseudo-class is something you add to a selector to style it for a specific state. :hover is probably the one I see the most, which is used to style an element when the mouse hovers over it.
:nth-child and its related classes (nth-of-type, first-child, last-child, etc), let you style an element based on its order. This is especially useful for styling lists. This is also how I positioned the individual posts for my honeycomb theme.
Here’s how to use it!
Let’s say we want to take this list:
<article>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
<li> five </l>
</article>
and make only the second item have a blue background.
After the css for the list, we would add new styling for li:nth-child(2), which will look like this:
li {
padding: 8px;
font-family: Helvetica;
}
li:nth-child(2) {
background: cornflowerblue; /* this is just one of my favorite blues*/
}
the results:
Now we can do the same for any number in the list too, like :nth-child(3) would be the third item, and :nth-child(4) would be the fourth. If we wanted to do the first or last item, a better option would be :first-child and :last-child
If you wanted to make every third item blue, you would use :nth-child(3n).
so changing the CSS to this (and adding another list item in the html)
li:nth-child(3n) {
background: cornflowerblue;
}
will look like this:
More formula examples and explanations under the cut!
