Layout Lounge

Flexible Squares Solution for PAID accounts

Tue, 01 Oct 2019 16:51:00 GMT

Posted by: sireesanwar.livejournal.com

First, DO NOT CHANGE FROM FLEXIBLE SQUARES if you want to use it and are currently using it. You'll lose it unless you are a paid member of LJ.

Okay so I got to thinking about Flexible Squares not being supported and I'm going to work on newer layouts in supported formats but remember Dreamwidth doesn't have Flexible Squares either and we can use it there. It just takes a little finessing. And once my mind got going on that train, we left the station.

So I dug. And so now the dilemma is that you can use Flexible Squares IF you are a PAID member. So to all the free members out there, I'm going to work on some different themed layouts for those who don't want to pay LJ. But for the paid user here is the hoops to jump through.

( All the hoops. Jump! )

comments

Making A Layout: Recent Posts From This Journal

Tue, 07 Jul 2015 17:14:00 GMT

Posted by: sireesanwar.livejournal.com

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... )

comments

Making A Layout: Customizing the Sidebar

Fri, 15 May 2015 12:00:00 GMT

Posted by: sireesanwar.livejournal.com

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... )

comments

Making A Layout: Header Section (Navbar) & HeaderImage

Wed, 13 May 2015 12:00:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Header "Navbar" Section
Links: Code Index // Position at W3Schools.com // z-index at W3Schools.com // Background & Header Images Tutorial

The links at the top of your journal are contained in the header section of your coding. This doesn't include your header image but you can put it in this section. I tend to have mine at the bottom so it is easy to find. Your header image is controlled by the coding for headerimage. These two elements will effect each other.

( Learn More... )

comments

Making A Layout: Body Coding and Background Images

Fri, 08 May 2015 15:18:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Body & Background Images
Links: Code Index // Custom CSS // Theme & Layout Change for Beginners // ColorPicker.com // Background & Headers Tutorial // Tutorials

Okay, I thought I'd pace these tutorials farther out (maybe once a week) but there are a few I think I should just get out there, just in case you are "practicing" what I'm explaining.

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.

To start out we will be working in Custom CSS of a Flexible Squares Layout. You should use the THEME & LAYOUT CHANGE FOR BEGINNERS to start things off and then come back here to proceed. If you already understand this process then the template I use is Flexible Squares: Autumn. Remember to choose NO for all three options (unless you are using PAID LAYER customizations and then the first one is a yes).

( Learn More... )

comments

Making A Layout: A Few Things to Start Off

Thu, 07 May 2015 16:47:00 GMT

Posted by: sireesanwar.livejournal.com

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... )

comments

Comment Bar Problems...

Sat, 04 Apr 2015 00:02:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: All
Theme: Flexible Squares
Actions: Full Size Comments Bar Appearing In Custom Posts.

So in my support request about this problem, LJ informed me they fixed the problem and yet this issue didn't go away. So I went to s2flexisquares because I wasn't sure the fix I thought I found would work entirely. Thank goodness because fueschgast seriously helped me out but teaching me a new trick. Always good to keep learning even when it seems hard.

There are a few pieces of the coding we need to change the openers to so it goes back to working properly.
( How To.... )

Also, I have a feeling this is a problem a lot of people are experiencing so I would appreciate it if you spread the word but clicking the repost below.

comments

Random Numbers On Sidebar

Wed, 18 Mar 2015 14:13:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: All
Theme: At least Flexible Squares maybe more....
Actions: Random Numbers on Sidebar

I don't know what LJ is doing but they are making all sorts of issues. As you can see there are numbers popping up on this sidebar. I've never encountered this before but suddenly there they are.

What they are is essentially numbering for a list. It is a long explaination but your links and tags are essentially a bulleted list that has been customized with coding by LJ and layout makers. Now numbers are showing up.

In your coding you might see something like this:

( Read more... )

Pass the word on by reposting this message....

comments

Mind the Friends Page Gap

Mon, 06 Jan 2014 14:22:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: All
Actions: Gap on the Friends Page
Theme: Flexible Squares

This is what your journal looks like...

( Mind the gap... )

comments

SB Tutorial: Mixed Content Side by Side or Tables

Tue, 27 Aug 2013 13:25:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: All
Actions: Mixed Content Side by Side
Theme: All

What you want to accomplish:

( Learn how.... )

comments

SB Tutorial: Float Images and Staggering....

Mon, 26 Aug 2013 15:40:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: All
Actions: Float Images and Staggering
Theme: All

So the idea is to come up with something like this

( Learn How... )

comments

SB Tutorial: Textboxes Side by Side

Mon, 26 Aug 2013 14:48:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: All
Actions: Multiple Textboxes Side by Side
Theme: All

What We Hope To Achieve:

( Learn more... )

comments

LJ Navstip Customizations

Mon, 24 Jun 2013 16:07:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: Free
Actions: Customizing the LJ Navstip
Theme: Flexible Squares (not sure if it works with other themes)

The idea behind this tutorial is to change the look of the LJ Navstip at the top which looks something like this...

Here is the coding I've pieced together.

/*-----------Navstip-----------*/

.w-cs DIV {
background: none repeat scroll 0 0 transparent;
float: none;
}

.w-cs .w-cs-userinfo {
background: none repeat scroll 0 0 #23CCBC;
border-right: 1px solid #3A4449;
float: left;
height: 50px;
min-width: 405px;
width: 40%;
 }

.w-cs {
color: #000000;
font: 10px/10px 'Arial','Helvetica',sans-serif;
}

.w-cs A:link, .w-cs A:visited, .w-cs A:active, .w-cs A:link B, .w-cs A:visited B, .w-cs A:active B {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
color: #000000 !important;
font: 10px 'Arial','Helvetica',sans-serif !important;
text-decoration: none;
 }

.w-cs A:hover, .w-cs A:hover B  { color: #ffffff !important; }

.w-cs .w-cs-user-controls .w-cs-group-first, .w-cs .w-cs-group-second {
background: none repeat scroll 0 0 #23CCBC;
}

.w-cs .w-cs-status P {
background: none repeat scroll 0 0 transparent !important;
border: 0 none;
color: #000000;
float: none;
font: 12px/17px 'Arial','Helvetica',sans-serif;
margin: 0;
padding: 0;
}

.w-cs .w-cs-summary {
background: none repeat scroll 0 0 #dddddd;
border-radius: 2px 2px 2px 2px;
float: right;
margin: -1px 0 0;
padding: 1px 7px;
}

.w-cs .w-cs-summary LI.w-cs-i-tokens {
background-position: 0 -788px;
border-right: 1px solid #ffffff;
margin-right: 6px;
padding: 3px 6px 3px 0;
}

.w-cs .w-cs-text {
background: none repeat scroll 0 0 #dddddd;
border: medium none;
border-radius: 2px 2px 2px 2px;
color: #000000 !important;
font-size: 11px;
line-height: 14px;
margin: 0;
padding: 2px 0 3px 5px;
vertical-align: top;
}

.w-cs .w-cs-search .w-cs-text {
border-right: 25px solid #dddddd;
width: 150px;
}

( Explanation of Coding... )

comments

Falling Snow Background/Multiple Backgrounds

Tue, 20 Nov 2012 14:57:00 GMT

Posted by: sireesanwar.livejournal.com

Account Status: Free
Actions: Falling Snow over your Background image
Theme: Flexible Squares but should work for other layouts

Okay so the idea is that you want snow on our journal during the Christmas holiday or throughout the winter season but you don't know how to accomplish it. Or you have another transparent active gif you want to lay over a background on your journal.

Here is how to accomplish it and it is really easy.

Let's say we want to accomplish this:

Click Image to see Live Preview

( How To Tutorial... )

comments

LJ Changes Mess Up Your Layout a Bit?

Tue, 26 Jun 2012 11:12:00 GMT

Posted by: sireesanwar.livejournal.com

So I don't know what the PTBs over here at LJ are doing but they've screwed up so stuff again. I don't know if you are noticing your Tiny Icons are all messed up. Not only that but Rounded Corners are all reverting to the squared look. Tranistions and Transform of header links on some of my recent layouts is also messed up. Here is an attempt to fix some of LJ's bugs.

Tiny Icons:

This above picture is the issue I discovered. Notice how my cool Super Mario icons are present but you can see the generic LJ icons as well. Thank you for this LJ.

( Let's fix these things... )

comments

Code Index

Thu, 29 Mar 2012 10:28:00 GMT

Posted by: sireesanwar.livejournal.com

If there is something you wish to accomplish that is not listed please comment and ask and I will let you know the coding and list it. Actual coding is normal while explanations are in highlighted text.
( See coding index... )

comments