Making A Layout: The Entries
May. 28th, 2015 12:00 pm![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeAccount Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Entries with Subject, Date, Skiplinks & Seperator
Links: Code Index
We really need to get to changing those entries in our layout. Because as they stand now. Instead we want something like what we are seeing in the second image.
The coding I would like to work with is from my layout Oxygen.
Let's pull out the coding we want to look at. Some of it is going to be from the very bottom of the coding so I'm going to reshow the MISC section.
.entry: This is what is going to customize your actual entry text. Above you can see what our entry currently looks like (I've added some colors for illustration). The orange is what is going to be effected by the .entry coding. Notice the white area between the yellow and orange. That is the Date and the Subject which we will get too.
div.entry_text li: This is going to customize the bullet lists you making in your journal. I've noticed that when not customized sometimes the list numbers or bullet points are very close together. This way we can make them the way we want. These seems to play of the line-height in .entry so I'm not sure you can set it to something smaller than the entries line-height.
.date: More often than not the .date & .subject are going to interact in some way. I often use the padding to move them a bit closer so they aren't so far away and the section of the .date & .subject isn't so big. But what if you to have a background like this below image?
This image is not from the Oxygen layout.
Theme: Flexible Squares
Actions: Creating Your Own Layout: Entries with Subject, Date, Skiplinks & Seperator
Links: Code Index
We really need to get to changing those entries in our layout. Because as they stand now. Instead we want something like what we are seeing in the second image.
The coding I would like to work with is from my layout Oxygen.
Let's pull out the coding we want to look at. Some of it is going to be from the very bottom of the coding so I'm going to reshow the MISC section.
- padding: this is what is creating the cushion above the text that says Look Here. It also created the padding to the left which is also visible where the tags are. Notice there is also a gap at the bottom. It works out in the layout but should you not want the one at the top or bottom here is where you would close those gaps.
- color: If this line is set in entry, your entry text color can be different than your body color or .maincontent color which in this case it is.
- line-height: Here it is rather large but I wanted the text clear and visible.
div.entry_text li: This is going to customize the bullet lists you making in your journal. I've noticed that when not customized sometimes the list numbers or bullet points are very close together. This way we can make them the way we want. These seems to play of the line-height in .entry so I'm not sure you can set it to something smaller than the entries line-height.
.date: More often than not the .date & .subject are going to interact in some way. I often use the padding to move them a bit closer so they aren't so far away and the section of the .date & .subject isn't so big. But what if you to have a background like this below image?
This image is not from the Oxygen layout.
How do we accomplish this? Well because the .date & .subject are essentially stacked. You could put a background color on both elements but a better option is to use the .datesubject code for background-color and rounded corners. So for coding you want to work for both, use the .datesubject section. But if you want two fonts or different colors you'd be using .date or .subject.
.subject: This is where you will be setting the font customizations for your subject. I have a border here but you can also add this to the .datesubject and it will work the same. When moving the userpic from the left or right of the entry your date and subjects margins may need to change. Always set the color here because it will be the subject color you see in your post.
.subject a, .subject a:link, .subject a:visited: Setting the link color you will see on your main page of your journal or even your friends page.
.subject a:hover: And now the hover color.
.datesubject: Here is that .datesubject coding which I'm going to move above date in the final what we've accomplished coding. It is a handy section for mass changes.
span.ljuser a b: This is the coloring and customizing of the usernames you put in your entry or even that show up on the sidebar in your communitys Page Summary Section.
span.ljuser a:hover b: This is the hover coloring and coding.
.skiplinks: Finally the skiplinks. I don't think many know what these are and I'll tell you they are the links in your post at the top. The ones that Memorize or Edit or Tag you post. So here is where you customize them. You could also add section .skiplinks a & .skiplinks a:hover if you thought it necessary but in the layout I have it falling to the link and hover for the whole journal.
And now for what appears to be the "extra" stuff in the layout. I tend to toss these in the MISC section because they are easier to change there but putting them at the end of the Entry section is perfectly acceptable.
If you go up to that colorful image I showed you, you'll notice a red line under tags. Well let me show you with the other customizations in place....
.subject: This is where you will be setting the font customizations for your subject. I have a border here but you can also add this to the .datesubject and it will work the same. When moving the userpic from the left or right of the entry your date and subjects margins may need to change. Always set the color here because it will be the subject color you see in your post.
.subject a, .subject a:link, .subject a:visited: Setting the link color you will see on your main page of your journal or even your friends page.
.subject a:hover: And now the hover color.
.datesubject: Here is that .datesubject coding which I'm going to move above date in the final what we've accomplished coding. It is a handy section for mass changes.
span.ljuser a b: This is the coloring and customizing of the usernames you put in your entry or even that show up on the sidebar in your communitys Page Summary Section.
span.ljuser a:hover b: This is the hover coloring and coding.
.skiplinks: Finally the skiplinks. I don't think many know what these are and I'll tell you they are the links in your post at the top. The ones that Memorize or Edit or Tag you post. So here is where you customize them. You could also add section .skiplinks a & .skiplinks a:hover if you thought it necessary but in the layout I have it falling to the link and hover for the whole journal.
And now for what appears to be the "extra" stuff in the layout. I tend to toss these in the MISC section because they are easier to change there but putting them at the end of the Entry section is perfectly acceptable.
If you go up to that colorful image I showed you, you'll notice a red line under tags. Well let me show you with the other customizations in place....
There is red below the Tags (above the comment link) and around the skiplinks. There is even some on the bottom of the blue area. This is the .clear { height: 0px; font-size: 0.01px; } with a height of 1 and a background color. The reason is to show you what it is. So it is important to have this coding to remove this portion all together. In some cases you may want to use the clear to make room around things but usually I use margins in the elements I want to push apart rather than using the clear element.
The blue is the .separator { height: 0px; } with a height of 20 and a background color so you can see it. You can also see in the mostly orange picture the blue at the bottom. This is the gap at the bottom or your entries. You can also control this with margins in the .sbcontent but we or padding in the .entry in this case.
So now here is what our coding has come to:
The blue is the .separator { height: 0px; } with a height of 20 and a background color so you can see it. You can also see in the mostly orange picture the blue at the bottom. This is the gap at the bottom or your entries. You can also control this with margins in the .sbcontent but we or padding in the .entry in this case.
So now here is what our coding has come to:
Any questions about this tutorial? Please Comment.
layout_lounge