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]

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