Jill aka Jo (sireesanwar) wrote in layout_lounge,
Jill aka Jo

Making A Layout: Tags Page

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Calendar Page
Links: Code Index

Right now our Tags Page looks like this:
Techincally you could leave it like that but I like to customize things a little bit....

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

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

This is a quick change but give a little customization.
This isn't a huge change but ul.ljtaglist is basically the red section above. There is still some white behind it which is a result of the content's background-color. Technically in this layou we don't need the background-color but if we are doing a float look then it is necessary. I didn't need a width but I can always add it should it seem like I need one.

  1. I gave the text a color.

  2. I filled in font-family, font-size, and text-align.

  3. padding is much like the Calendar Page. You can make the padding whatever you want and it is going to put it around the text in this area.

  4. text-transform enabled me to make my text all look uppercase which is what I wanted for the Tag Page.

  5. I left the border coding here because if it were a float post you might want that (and border-radius for rounded corners) but I have the px set to 0 because I don't want a border here.

Now onto ul.ljtaglist li which is basically defining the list type, position, and image.

  1. list-style-type: There are many things you can put here. I put disc because the default seems to be a number which I don't want. You can see the different options HERE.

  2. list-style-position: Your options are mostly inside or outside. I have outside here though I prefer inside. You can also set them to initial and inherit but I prefer the first two.

  3. list-style-image: This is where you could put in your own image. You can see more about this HERE.

It now looks like this:
This is our coding so far:

Any questions about this tutorial? Please Comment

Tags: !layout-tutorials, #account: all, .flexible-squares, account: paid, help with: tag page
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened