?

Log in

 
 
25 June 2015 @ 11:05 am
Making A Layout: Calendar Page  
Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Calendar Page
Links: Code Index

Right now our Calendar Page looks like this:
Techincally you could leave it like that but I wouldn't.

The coding I would like to work with is from my layout Oxygen.


Let's grab the coding we'll be working with...

This might require a little demenstration...
We are starting off with ul.year. This is what you see in red. In the coding we are giving it a background-color, padding, and text-align. The background-color isn't actually needed if you are going to have the content behind it set to a background-color. For layouts with floating posts you would want to code for these background-colors.

Now we need to make that list change to what we see in the red which is why we are doing the ul.year li. Here all we are adding is display: inline; but this will give us the line element we want.

We also have ul.year a and ul.year a:hover which is where you'd change the colors if you want. I don't have them set so they default to the link colors back in the main area of our coding. But I do have a little extra padding here for the links.

Let's move onto what you see in blue. This is the table.yeartable. You might want to get a little more in-depth with this coding.

  1. So here we've done a width which will match out subcontent or posts.

  2. You'll also noticed I have the margin-left and margin-right set to auto which will center the table for us.

  3. padding is the next thing you might find important. First, if this were a floating post type of layout you'd definitely what this. As you can see above the "month" doesn't reach the top of the blue. This is because there is padding. Now look at the left and right of the "month". Againt there is a gap. So as you will noticed in my coding I went with padding: 10px 100px 10px 100px;. The 100px are for the right and left sides. Should you make these numbers 50px the "table" of the calendar month will spread out more towards the sides of the blue area.

  4. background-color is only necessary if you are going to have a stand alone posts or float posts like some of the journals including Layout Lounge. (Feel free to go to our Calendar Page for examples of this.) If you were going to have "float" posts then you might want borders around this part or even border-radius for rounded corners.

Now for the rest of the coding:
table.yeartable td.yeardate: this is what you are seeing in red. Here I'm just giving it a text color and a border.

table.yeartable td.yearday: this is what you are seeing in blue. The text-align for this is really for when there is a link to posts in the box. Again I'm giving this a text color and a border.

td.yearmonth: you should be able to see in Purple which here it says February 2015.

And that is the Calendar Page.

So what do we have so far...


Any questions about this tutorial? Please Comment