Log in

02 July 2015 @ 03:35 pm
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

jesterlady: TMMMM!!!!jesterlady on January 13th, 2016 06:58 am (UTC)
Thank you so much for all this, it's amazing. I'm having trouble getting my tags to show up when I've changed to your Parker layout.
This is my tag code. I think I don't properly understand how to update it.

/*-----------Tags Page---------*/

ul.ljtaglist {
color: #black;
font-family: "arial";
font-size: 16px;
text-align: left;
text-transform: uppercase;
padding: 8px 8px 8px 50px;
background-color: #blue;
border: 0px solid #dedede;

ul.ljtaglist li { list-style-type: disc;
list-style-position: outside;
list-style-image: none;
Thanks in advance!
Jill aka Josireesanwar on January 14th, 2016 12:06 am (UTC)
The coding looks good. Make sure the tags are turned on for your sidebar in the customization.
jesterlady: PBmichaelgeniusjesterlady on January 14th, 2016 04:30 am (UTC)
Ok, that worked! Thanks!
Jill aka Josireesanwar on January 16th, 2016 01:17 am (UTC)
You're welcome. Glad it was easy.