Help - Search - Members - Calendar
Full Version: unsure of how to get a layout like this
Forums > Resource Center > Support Center > Livejournal Support > Livejournal Resolved Topics
penkwin
Sep 17 2006, 11:36 AM
Hey guys. I'm trying to achieve something like this.

I've arranged blogs and things before, but I think LJ has a totally different system. See how her userpics are in every post? I want to do that but I don't know how! With blogger you can just place code around things and make divs wherever you wanted and stuff. Is there any way to see like the whole code for your journal and make edits to it there? I'm no stranger to html and css but I'm really confused.

I've been looking at the FAQ's and the style editor... I think it's really just the syntax with all this LAST_N stuff that's confusing me. Any help would be much appreciated!
Mulder
Sep 17 2006, 12:44 PM
she's using the S2 style system - that's why her userpics are displayed in each post.
the problem with S2 is that it is not easily edited. If you have a paid/plus account, then you can make more customizations.

if you're looking to edit the actual view of your journal, then you're going to want to use S1, or S2 with a paid account.
penkwin
Sep 17 2006, 01:21 PM
I never even thought of using S2! It says "for people who don't know html and css", that's why. Tricky tricky! Thanks I'll be playing with this for a while.
penkwin
Sep 17 2006, 05:49 PM
Do you know how she changed the date format or the order of mood and tags? Mine puts tags above mood and music but I want tags to be below...
Mulder
Sep 17 2006, 06:01 PM
ah, as i suspected, she has a paid account.

so, she most likely edited that through a theme layer, though i can't be sure.

you could try editing it through the custom options panel in your "journal styles". the custom options will also be different for each layout (i.e bloggish, flexible squares).

you can learn more about theme layers here
penkwin
Sep 17 2006, 06:06 PM
That's ok I have a paid account too... I think it's "variable flow", with some edits... I've got it looking similar now, I mean I'm not stealing her design, but using it as a base... And once I figure hers out then I'll expand on mine haha. But I'm getting bulleted lists all over suddenly. I guess I'll have to see what these layer styles can do for me. Thanks!

http://justxasxshexis.livejournal.com/ Here's my journal if you want to look over my source code and see if there's something messed up. I can't really get it to center so I'm faking it with a margin. :x
Mulder
Sep 17 2006, 06:15 PM
hm..

i'm not really much of a fan of variable flow myself. When i had a paid account, i mostly stuck to flexible squares or opal. And, for the layout you're going for, i think flexible squares would work best. There's a lot you can edit with a theme layer for flexisquares. plus, i can help you more with flexible squares. *wink wink*

s2flexisquares - lots of stuff on flexible squares.
(yes, i know a community for EVERYTHING)
penkwin
Sep 17 2006, 06:52 PM
Ohh you were totally right about the flexible squares. :)

Now I'm just trying to get a) the text to not wrap around the image, I want it to go straight down like hers...and b) I can't really find what's causing it to still be starting in the middle of the page.

Thanks so much for your help though ! :D
Mulder
Sep 17 2006, 07:04 PM
CODE
.headerimage {
          width: 620px;
          height: 240px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 0px;
          background-repeat: no-repeat;
          }

is the reason it's starting in the middle of the page. set the height to 0px, or just remove headerimage from your css. You'll only need it if you're adding a header image.

i'll look into the rest


edit//

to get the text to stop wrapping, edit .userpic, and remove float:left;
penkwin
Sep 17 2006, 07:45 PM
Thanks! I think I've almost got it. :D

I'm using some code from this tutorial, and though I haven't changed the css for the tags, they won't get in there with the other currents.

CODE
.currents {
        margin-top: 10px;
        color: #9B9B9B;
        font-weight: lighter;
        text-transform: lowercase;
        font-family: "Arial", Tahoma, Helvetica, sans-serif;
        font-size: 7pt;
        }

    .currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
        color: #ff66be;
        font-weight: bold;
        text-transform: lowercase;f
        font-family: "Arial", Tahoma, Helvetica, sans-serif;
        font-size: 7pt;
        }

    .currentmood, .currentmusic, .currentlocation {
        color: #9B9B9B;
        font-weight: lighter;
        text-transform: lowercase;
        font-family: "Arial", Tahoma, Helvetica, sans-serif;
        font-size: 7pt;
        }

    .ljtags {
        color: #ff66be;
        font-weight: bold;
        text-transform: lowercase;
        font-family: "Arial", Tahoma, Helvetica, sans-serif;
        font-size: 7pt;
        }

    .ljtags a, .ljtags a:link, .ljtags a:visited {
        color: #9B9B9B;
        text-transform: none;
        font-weight: lighter;
        font-family: "Arial", Tahoma, Helvetica, sans-serif;
        font-size: 7pt;
        }

    .currentlocation a, .currentlocation a:link, .currentlocation a:visited {
        color: #9B9B9B;
        text-transform: none;
        font-weight: lighter;
        font-family: "Arial", Tahoma, Helvetica, sans-serif;
        font-size: 7pt;
        }
    
    .currentlocation a:hover, .ljtags a:hover {
        color: #ffacdc;
        font-weight: lighter;
        text-transform: none;
        font-family: "Arial", Tahoma, Helvetica, sans-serif;
        font-size: 7pt;
        }


Not sure what the problem is with that.
Mulder
Sep 17 2006, 10:05 PM
what exactly are you trying to do?
joiedevie
Sep 22 2006, 03:25 PM
i think this community: peoplemachines can help you. she has a lot of very nice, simple s2 layouts. and the summer layout looks like what you're aiming for. except for the blurb box... which i think you can get rid of by not writing anything in your blurb, choosing to not have a default user pic and no links.

hope that helps. :)
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.