New Layouts

[kf_creations]

I thought it was time to recode my layout and give this place a new look, and kf_creations also. Had I not had a months worth of computer issues, I might have done it sooner :-(. As ever I hate IE!! Firefox is so much easier

Screencaps, as always as a reminder to myself :-)

Comments

[kf_creations]

Hi :-)

Thank you for liking the layouts so much. I am delighted to hear that you want to start to make your own. I cannot recommend this site enough, s2flexisquares they have a wealth of knowledge that will come in handy, as will this post ~ HERE~ this is a break down of what code does what on a flexible squares layout. great for pinpointing code that you don't know yet until you become familiar with what does what.

To make the layout I have now, I have recycled the code which I painstakingly adapted from the original code, bit by bit, a few years ago. I make it a wide layout so that the header can have the width it needs to have the scrolls at things that you see 'on the background' it is still part of the header. the content of the journal then has a individual background that has a white centre but joins with the background colouring to align with the header. I then push in the content of the journal (the wording) by using both the padding and margins in the code so that it falls where I want the visual sides of the journal to be. it is all an illusion :-) All this allows me space to make an elaborate header at the top, as I got tired of using just a plain 'rectangle' :-) I know I have a paid account, but i am not using the features which it allows me other than userpics really - i am not using extra layers to my coding. I cannot text it out on another journal if I do that, so have just played around with what is available to every one, including changing the content of the sidebar to suit my purposes. (all was changed in the blurb part of the sidebar pannel)

I hope that helps you. Do have a thorough look at the s2flexisquares community though, as that will save you a lot of head banging as many people will already have asked questions you want to ask, and if not, there are people there that should be able to assist you :-)

let me know how it goes :-)

[loveinstar]

WOAH! thank you sooooooooooooo much...it means a lot that you answer me and than so much =D
I try to understand all of your help and I will look to the sites too...it´s still confusing...
1rst. because english is not my mother language of course I can understand but with CSS =D..
2nd. I never worked with CSS and I must be patient...always try and try again...so I wanna just thank you so much..for your help..
And I will let you know how it goes..it will need a little time maybe...;D
I think I will do it step by step..!!!!

[kf_creations]

Your very welcome *hugs*

Just take it nice and slow, and learn by trial and error.

A few hot tips I can mention. Get a 'dummy' account - sign up for a new LJ or even a community attached to yoru existing name. use this place to try out your code changes till you like how it looks, then you can insert the code and other customizations you have into the journal you want them to be in. I couldn't live without my spare account!

Use a notepad program to copy the original code into, and do your editing from that, saving different versions so that you have the one that last worked, if you make an error. also, it means you can use a Ctrl+F key to 'find' any given code for example, numbers, that change different colours

I am sure the more you play about with it, the more easy it will get. I know it took me a while to get started. it was all nonsense, but I couldn't find a code available on the ready made places that did what I needed.

I first started using this tutorial, by liz @ the_lj_reboot

http://community.livejournal.com/the_lj_reboot/1609.html

That got me knowing enough to understand the 'where everything is and does what' link I gave you

Happy tinkering :-)

[loveinstar]

cool thank you for the tips...that really helps...
the last two days I worked with CSS and it goes step by step...really....thank you so much....all the tips helped me a lot.. =D
what is a notepad program????? never hear from that.

and you are right the more I play around with CSS the easier it get...
______
I just have one question...=D
here is my site...
http://community.livejournal.com/dusty_flyings/
I know at the moment is not so much to see but I have the problem with the links in the header.I figured already out how I can put it below the header but I want make them invisible and made the links in the sitebar like you can see how I make it with my Profile link. Do you know the CSS code to let them disappear?
Thank you again!
*hugs back* =D

[kf_creations]

I love what you have so far :-) and your header is lovely <333

Notepad is a plain text editor that comes with any windows pc. It doesn't corrupt text when you copy and paste it in - especially CSS. If you don't have window, I am sure there is an equivalent program on your machine :-)

right, let me go get you your code and i will be right back :-)

[kf_creations]

ok, if you insert this code under the first ul.navheader in your CSS

ul.navheader li {
display: none;
}

.title {
display: none;
}

.subtitle{
display: none;
}

that will turn off your navigation bar, your title and subtitle. what you will need to do then is in your link list in your sidebar page of your customization, you insert the links to the places you want, and call them the appropriate names, ie, profile, friends, etc. that is how you make your links in the side bar rather than along the top :-)

You will probably not need the #header-content line in this flexable squares layout, as you are using an image as your header. when you have decided on the width of your journal, you can resize the header to fit the width of the journal and then it will fit precisely.

Sorry not to get back even sooner - I am not feeling well tonight.

Hope that helps :-)

[kf_creations]

oh, and regarding a 'sticky post' you can always cheat *cough* by making your header bigger in depth and placing your sticky wording on that, and increase the depth of your header in the CSS, as well as pushing back up your sidebar content. I have used a 'minus' figure, not something the people on the flexisquares community would recommend I believe as it my well mess with other browsers, but it appears to work ok for me, so give it a go and see what happens, changing the minus figure to suit your depth of layout.

you will need to try with this:

#sidebar {
margin: -150px 0px 0px 0px;
}

If it doesn't work you can always remove it :-)