InsaneJournal

Tweak says, "One Tweak to rule them all..."

alter (splott) wrote in rp_tutorials,
@ 2009-10-19 21:24:00

Entry tags:

resources: s1 layouts

S1 headers and Navigation for huali

S1 Generator Header/Navigation Tutorial
ABOUT
TUTORIAL. On header/navigation overrides for S1 Generator Layouts.
Getting Started
FIRST.Read How to install s1 layouts. Specially the part about overrides. that is where these will go. ALSO, this doesn't cover changing how comments are read or link colors.

SECOND. you need a working (or bumbling) knowledge of CSS and HTML, especially style tags. I'm not going to go into a tutorial on CSS and stuff like that. You can easily google CSS help and get pages and pages on it. If you have any questions, I can help a little bit. [Note to readers; i took classes in high school on Java and computer programming, but all this CSS I am self taught. for the generator layout I just went through and fucked around with stuff to see what did what and tried to figure out what things did and what I could do with them. Don't be afraid to fool around, just. Do stuff and save stuff and figure it out.]

THIRD. this is going to be a pretty specific and tailored tutorial to fit the request by huali about having a "Friends Only" entry at the "top". You can't really do that, but you can add text under a header to do it. huali asked for 2 images to be used, one as a banner/header and one as a mini-banner that went above the links. In the original example, they had a third background image, which I'm still fiddling to figure it out. The example of what code I am working on looks like this.

FOURTH. if you just want the code, you can get it here (just copy/paste into the override box)
Parts of Code
Now onto the tutorial. I learned all my stuff from ~everything_lj and just poking around google and stuff.

GLOBAL HEAD.
GLOBAL_HEAD<= <style type="text/css">  </style> <=GLOBAL_HEAD
This is the "head" that controls everything when it comes to formatting. If you want to just change the links on the friend's page or just the color on the most recent page, you would use FRIENDS_HEAD or LASTN_HEAD or CALENDAR_HEAD or DAY_HEAD. Global just changes all four of those.

The Style tags are what changes things like background color, fonts etc. Basically, all your stylistic changes. You don't have to have a style tag for everything you do, you just put all of your changes in between the arrows.

HIDE USERPIC.
GLOBAL_HEAD<= <style type="text/css">  </style> <=GLOBAL_HEAD
This hides your default userpic. if you want it visible, just delete "display:none" or the whole thing.

.shadowed is the CLASS. Basically IJ/websites see .shadowed and go "OH, I know where that is! *does not show it*." But we don't want the WHOLE thing gone, we just want the userpic, IE the IMAGE. Thus why it is .shadowed img.

BODY COLORS AND BG IMAGE.
GLOBAL_HEAD<= <style type="text/css">  </style> <=GLOBAL_HEAD
background-color is the color on the page BEHIND the entries. In this example, the color is #70774B. Make sure to always have # before your hex code or it defaults to a different color.

background-image:url() is where you put your background image. In most cases, this is where you would put a pattern to go in the background like here. In THIS case, it is the main header image. Make sure to put your image there (I've moved the example header to my server for this tutorial. Do not hotlink or use without credit to huali). When you put your image, DO NOT USE QUOTES. They are unneeded and will get in the way.

background-position: is how you tell it to be at the top and in the center. If you want your image to be all the way left you can change that.

background-repeat: is how you tell it NOT to repeat. You can have an image repeat just across, or just down or both (tiling) or you can have it just stationary. If you want it to repeat across (like these) you do background-repeat-x: repeat;. If you want it to go down only, do background-repeat-y: repeat;. If you want it to repeat like a tile do background-repeat: repeat;. In this case we do not want it to repeat more than just showing.

margin-top is how much you want to push the entries down. Generally you want this to be the height of the image you've got as your "header".

overflow-x specifies whether content is clipped when it overflows the element's content area. Same thing with the above -x and -y examples, -x handles stuff to the left and right and -y to the bottom.

HEADER IMAGE AND ID.
GLOBAL_HEAD<= <style type="text/css">  </style> <=GLOBAL_HEAD
Like .shadowed being a CLASS #x is called an ID. If you think of a CLASS like a lot of people (like 18-24 year olds or women are considered a class) an ID is a very unique identifier (like a drivers license number or student id or SSN). There's a lot more theory and stuff behind #id.class, but for this tutorial we want an id so we can have the little lyric image show up. I've named it x but you can name it jabberwocky or applesauce or header or whatever your heart desires (just make sure to read the rest of the tutorial before you begin changing stuff).

position is exactly that - it positions the element.

visibility makes it show up. If you want to make it disappear you can, but the whole point of this tutorial is to have a second image so. Yes.

background-image:url() is just as above. Here I've put in the small "lyric" image.

left makes the middle of the page halfway through. If you resize your browser it will stay 50% through, instead of using a fixed number of pixels which will make stuff wonky.

margin-top and margin-left is how you move the image around a bit. Here we moved it DOWN (margin-top - the amount of "padding" on top of the image"). Generally it would be how tall the TOP header image is, but it looked wonky so I made them overlap a little. You want NEGATIVE 1/2 of your image width (the lyric one not the header) because you want it to straddle that 50% line. So take the width of the image, divide it in two and put a negative there.

height, width is the defining numbers for that. Put in the exact px.

#x img is JUST like .shadowed img, BUT we want this one to show up and to be "inline". You can display images in different manners, but we want this element to flow with the others.

Hidden Stuff (Journal Names and default stuff)
GLOBAL_HEAD<= <style type="text/css">  </style> <=GLOBAL_HEAD
#lj_controlstrip_poweredby I found this on everything_lj, and I think it works here, but IDK. I think its good to throw in, certainly doesn't hurt anything.

tr.caption hides the [entries | friends | calendar] part on the top right of your generator layout.

table table tr.caption td.caption hides the the name on the top left of your generator layout.

table table table table .meta hides the website/userinfo/calendar links.

table table table table table .meta shows the new navigation you have (your lastn_website overrides (when you add the #x img and linkies)

table.entrybox a.index img makes your friend's userpics show up.

table.entrybox a.index makes the friends username show up under their pic.

td.caption If you're not hiding your journal name, this is where you would put font-family and size and such, but since we are, it's blank.

.shadowed td div hides the journal name on the center of the generator layout above the links.

GENERALLY, you just put this in and don't mess with any of the declarations inside of them. You can, but I wouldn't recommend it.

R (and other classes)
GLOBAL_HEAD<= <style type="text/css">  </style> <=GLOBAL_HEAD
r is just a class I made to make the "FRIENDS ONLY" bigger. If you want to call it robinhood or fonly or something, feel free. BUT this is kind of like using <b> <i> or <u> really. Just telling it what to do. In this layout I used it with the FRIENDS ONLY to make it 25pt and centered.

for the font-family you have to use web safe fonts, a.k.a. fonts that every computer has. If you want to use funny ones that you downloaded, they won't be on EVERYONE's computer, so if you use something like Pea Kathy, it won't show up except for those who have that handwriting font.

Table Edits
GLOBAL_HEAD<= <style type="text/css">  </style> <=GLOBAL_HEAD
table is the changes to the Entry table [including the header] with respect to width and space between entries. Generally I keep the width of the entry content the same as the header image. There are like 12-24(?) px between entries, so the less/more you want between them then you can do this. -12 = completely flush entries. 0 = moderate space. 12 = regular space.

table table and table table table don't mess with these. Really, it's for the best, kids.

THAT is it for Global changes. Now, we need to get this to show up on the layout! If you put this stuff in as it is, you'll only get the bg image and colors.
Finshing touches
Next, you need _WEBSITE. I am just going to do LASTN_WEBSITE because it is just the same as all the others, except FRIENDS_, CALENDAR_, and DAY_. Srsly the same. Unless you want it different.

JUST like GLOBAL_HEAD, LASTN_WEBSITE works just like that. ONLY, it goes AFTER that.

Making the new navigation!.
GLOBAL_HEAD<= <style type="text/css">  </style> <=GLOBAL_HEAD LASTN_WEBSITE<= <div id="x"> </div><br/><br/><br/><br/><br/><center> <a href="http://www.imeem.com/people/qGecGjP/music/n4LvatVd/zhang-ziyi-mo-li-hua-kaimp3/">CLICK TO LISTEN TO AUDIO</a><br /> <R>FRIENDS ONLY</r><br /> • <a href="http://USERNAME.insanejournal.com">journal</a> • <a href="http://USERNAME.insanejournal.com/profile">info</a> • <a href="http://USERNAME.insanejournal.com/friends">friends</a> • <a href="http://kerning.insanejournal.com/">credit</a> •  <div>& nbsp;</div> <=LASTN_WEBSITE
You need <div id="x"> BECAUSE, we called the ID X for the lyric image, right? This is "calling" for it. So when the code loads, the layout will be like OH RIGHT I remember this, I need to make the X show up. The reason I have all the BR breaks there is because ~~that is the lazy way to~~ I couldn't figure out how to get them all to go down. I will fiddle some more, but this works.

<R>! In use! See, it will make FRIENDS ONLY just like how we want it to. SEE LOOK, IT IS IN USE.

The USERNAME links are your new navigation. You can totally take those out OR you can put lyrics or just about ANYTHING you want there.

the 
<div>& nbsp;</div> NEEDS to stay there. Don't remove it, lest the unfortunate IE users get mucked up views.

Other than that, you can pretty much put it HOWEVER you want. There are ways to move the links left or right and to edit stuff more but, that's another day. So your full code is here and you can just, copy paste that or your edits into that.

	alaskamods 2009-11-20 05:06 pm UTC (link)
	THANK YOU FOR THIS! I found it right when I was looking for info about how to do headers. Will be using. :] (Reply to this)

	hammertech 2010-03-17 04:41 pm UTC (link)
	You prove to be BAMF as usual. :D (Reply to this)