Account Status: All
Theme: Expressive
Actions: Adding Tiny Icons to Currents (mood, music, location, tags)
Links: Code Index

So on some of my Expressive layouts you'll see this:

Current Tiny Icons: I after a lot of digging I think I've discovered that Expressive doesn't give you the ability to have tiny icons next to your currents (mood, location, music, etc). There is a way to do it with Theme Layers in a paid layout but again, I'm not doing this now. If you know differently please comment and tell me because I couldn't get it to work no matter what I did.

Apparently, I lied. Or forgot how to code for a moment. But I figured out how to give you tiny icons on the currents in expressive.

( Would you like to know more? )

Account Status: All
Theme: Flexible Squares, maybe others
Actions: Free Text/Blurb styling.
Links: Code Index

I've done a tutorial where you learned a little bit about tables in a post (Mixed Content Side by Side or Tables). But, now, let's talk about coding for your free text or blurb on your sidebar. See it is very different and works a little like your profile. Here is the dilemma we are presented with this image on the right. What I don't want my sidebar to do:

1. There is a gap at the top of my sidebar


2. Looks like there more than one line of a gap between my text and my textbox.


3. All my book images are on a different line


4. There is a HUGE gap between my book images and my table.

How do we fix this? First, when you see extra spacing on the sidebar, always check the blurb text coding first because sometimes it is just the coding in that section.

<center> You can see all my layouts at <a href="http://layout-lounge.livejournal.com">Layout Lounge</a> and my LJ art work at <a href="http://graffitigraphic.livejournal.com">Graffiti Graphics</a>. </center> <text area>textarea rows="10" cols="80"</text area> <image> <image> <image> <table align="center" border="1" bordercolor="black" cellpadding="5" cellspacing="0" width="100%"> <tbody> <tr align="center" bgcolor="white"> <td bgcolor=white><b>Recently Read</b></td> </tr> <tr align=left bgcolor=white> <td><b>Book:</b> Outlander <i><b>rating:</b> 5 Stars</i></td> </tr> <tr align=left bgcolor=white> <td><b>Obsession:</b> Orphan Black <i><b>minor obsession:</b> Eureka </i></td> </tr></tbody></table>

( Learn More... )

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Recent Posts From This Journal
Links: Code Index

You may have recently noticed that LiveJournal has made the "Recent Posts From This Journal" available for Flexible Squares. This is what it looks like over at my journal.

The issue I discovered when it first went live was that it doesn't match my journal layout! What to do...
The solution is we have to learn to code for it. And that is what I will endevor to accomplish in this tutorial.
( Read more... )

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.

( Learn More... )

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Customizing Your Currents, Tags and Comment Links.
Links: Code Index

Something I always forget about it the currents which are your location, music, mood and custom friends groups. The only one of these I ever really use are the custom friends groups and mood. So I tend to turn off the location & music. So I think I shoudl teach you a think or two about this area of the coding and while we are at it we will just do the entire bottom section of a post which includes ljtags and comments. This also includes Tiny Icons for the currents, users, community, and posts.

( Learn More... )

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

If you've been updating your coding and saving it as we go, your footer may be looking something like this:

( Learn More... )

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Customizing the Sidebar
Links: Code Index

Now that we've picked how wide our content is, how wide the sidebar and the posts are, what our header image & header navbar look like; it is time to make that sidebar look like something!


( Learn More... )

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Structure - Content & Sidebar
Links: Code Index

Hopefully you all understand the body section of the coding. I wanted to mention as we get into these explanations that occasionally you'll find coding sections that are not part of these tutorials. Feel free to point me to them and I will explain them. I've come across some as well but right now I can't really think of an example.

Now, we want to look at the basic structures of the layout. The different types of content (content, maincontent & subcontent) and the sidebar. I won't be going into detail about the sidebar yet. That will come later. This is just understanding the main coding for these elements.

( Learn More... )

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Learing some of the repeating coding...

Hi everyone. I've been working on a tutorial which is going to be about 13 parts. It is essentially building a layout and what different parts of the coding does. If you come across a part of my explanations that just doesn't make sense to you at all... feel free to comment and ask.

I want to work with an already made layout and show you some differences and how things work. The idea is going to be that hopefully you will be able to remove sections of your layout and replace it with coding from another. This would be required if you liked the look of a layout but wanted the sidebar from another.

Also, most coding options like font's, text alignment, etc can be found in the Code Index. If you don't find something there please post a comment to the Code Index and I will help you out.

First things first, if you are going to be messing with your own journal chances are it will look odd for a bit. So if you currently have a coded layout save it. Copy the coding. Open a Notepad Text File. Paste it into the text file and make sure Word Wrap is off. Then save it. I tend to save mine as sireesanwar03-15-2015. That way I know it was for my personal journal and what the last date was that I used it. I always save my old codes in case I want to go back to them OR I mess something up and want to go back. This will also enable you to stop working in the middle of the new coding, save it in a similar manner and reinsert your old coding so if you have to stop for the day you journal is still readable.

( Read more... )

Account Status: All
Theme: All
Actions: Social Media Icons with Hover Roll

If you'd like to see the social icons spin check out the icons on the sidebar. These images will not work on a post unless you have a paid account but the will work on the sidebar of any account type. I suspect LJ doesn't let image classes work in non-paid accounts.

1. Let's get the images. I'm including the blank image so if need be you can create your own social media icon which I did do with the bloglovin icon.


Next the coding for you blurb/free text box on your sidebar.
( See how it is done... )