A tutorial on the %%datetime%% variable for paid styles
A friend requested a tutorial on this so here it is. Word.
[X] Warning! Tutorial is image heavy! [X]
Make sure you can do/know the following things before starting this:
[X] How to create or properly edit Paid Stlyes
[X] Know at least a bit more than basic HTML/CSS
[X] You understand table tags (if you don't you're either ripping off (for shame!) or borrowing the code you're using from someone else. I would suggest making a backup copy of your style before editing it so if you fuck up the tables (since you'll have no idea how to fix them) you won't completely fuck up your style)
[X] Understand you are editing your style at your own risk. Make a back up if you're not code saavy. Seriously. If you fuck up your style and weren't smart enough to make a backup you're screwed. And I'm not helping ya. Nah-nah! =]
To get your date/time text like the picture shown above you'll need to do a few different things:
[X] Open up whatever style you're editing. duh =P
[X] Go to your LASTN_EVENT, LASTN_PROTECTED & LASTN_PRIVATE sections of your style and check to see if your %%datetime%% variable tag is inside a table row tag. If it is, remove it. We're gonna set up table rows for it right in the LASTN_DATE_FORMAT box. If you have it in another table in the sections I mentioned above, it's gonna display ALL FUCKED UP. You're putting in extra table tags that we won't need. (see picture below)
The %%datetime%% tag is inside the tabke tag like it should be but it's not inside a table row. Again, this is how we want it.
Okay let's set the commands for how we want the text to display shall we?
[X] Skip down to your LASTN_PAGE section of your style
[X] Okay now inbetween the <head> & tags of your code look for a line of code that looks like the part of the picture with the red rectangle around it.
This is where we define what we want certain elements of your journal to do. If you have this line of code or a similiar line of code you can add on the following two lines of code to it: (*note* you can change the font color and font face to whatever your preference is. [You can change the letter spacing & the size of the font as well but for now let's leave those things alone, edit it to your liking when we're done instead])
.date1 {font: 28pt; font-family: Georgia, Verdana; color: #2E5D81; font-weight: bold; letter-spacing: 20px; position: relative; bottom: 0px}
.date2 {font: 12pt; font-family: Georgia, Verdana; font-weight: bold; color: #00BAFF; letter-spacing: 8px; position: relative; bottom: 12px}
[X] If you don't have a line of code like that anywhere and you know shit about HTML & CSS STOP RIGHT NOW. No more tutorial for you. You're probably using a system generated style and will risk fucking up EVERYTHING!
[X] However if you're without the code and you know HTML & CSS then you can continue. Write the code into your style. It should look something like this: Of course you can change the text colors, the font face, the cursors etcetera to whatever your preference is.
body, div, td, p { font-family: Verdana; color: #000000; font-size: 9; CURSOR: s-resize; }
.date1 {font: 28pt; font-family: Georgia, Verdana; color: #2E5D81; font-weight: bold; letter-spacing: 20px; position: relative; bottom: 0px}
.date2 {font: 12pt; font-family: Georgia, Verdana; font-weight: bold; color: #00BAFF; letter-spacing: 8px; position: relative; bottom: 12px}
Okay if you don't know much about code you might be asking yourself "what in the hell is this ".date1" & ".date2" shit?" It's simple: They're classes. We're going to use them in a font tag in the LASTN_DATE_FORMAT section in just a few. It tells the browser how to display the date/time section of your layout. You don't have to call them .date1 & .date2 if you don't want to. You could even name them .fuckoff1 & .fuckoff2 if you really wanted to but most designers on LJ like to keep it simple and like to keep it relevant. .date1 & 2 are most commonly used for editing the %%datetime%% variable tag so that's what we're going with here.
[X] Okay now onto the LASTN_DATE_FORMAT section of the style editor...
[X] Here's the line of code that goes into the box:
<tr><td align=center><font class="date1">%%daylong%%<tr><td align=center><font class="date2">%%mm%%.%%dd%%.%%yyyy%% - %%12hh%%:%%min%%%%ampm%%<br>
See? Just as I promised we set up table rows for it right in that section. You'll see we've set %%daylong%% (the full name of the day of the week) to be displayed using the settings in the .date1 code and the rest to be displayed using the settings in the .date2 code.
The results should be text similar to the first picture. If the width of your main entries box in your journal is skinnier than the width of the text shown though, it won't look right and you'll need to make the font size smaller for both classes.
[X] You can also change the amount of space inbetween the letters by altering the letter-spacing part of the code. Also the date and time (small font) under the day of the week can be pushed further up (right on top of the day of the week) or further down by altering the bottom tag of .date2. (*note* the higher the number is, the higher up the text is. You're telling it how many pixels from the bottom of the table row you want it moved up)
[X] There are many different ways to play around with this. You could even have the day of the month, date and year as the big words underneath and the day of the week and time as the small words on top if you wanted. You can do it a thousand different ways. Different sizes, different colors, different fonts, different alignments. Play around. You'll figure out what looks best for your particular layout.
HAPPY CODING!!
Poll Feedback please!!!
If you have any questions, just ask! Drop a comment and I'll help you the best I can. =]
A much simpler tutorial on image maps (as requested by another friend) later in the week.
-Shara
[X] Warning! Tutorial is image heavy! [X]
Make sure you can do/know the following things before starting this:
[X] How to create or properly edit Paid Stlyes
[X] Know at least a bit more than basic HTML/CSS
[X] You understand table tags (if you don't you're either ripping off (for shame!) or borrowing the code you're using from someone else. I would suggest making a backup copy of your style before editing it so if you fuck up the tables (since you'll have no idea how to fix them) you won't completely fuck up your style)
[X] Understand you are editing your style at your own risk. Make a back up if you're not code saavy. Seriously. If you fuck up your style and weren't smart enough to make a backup you're screwed. And I'm not helping ya. Nah-nah! =]
To get your date/time text like the picture shown above you'll need to do a few different things:
[X] Open up whatever style you're editing. duh =P
[X] Go to your LASTN_EVENT, LASTN_PROTECTED & LASTN_PRIVATE sections of your style and check to see if your %%datetime%% variable tag is inside a table row tag. If it is, remove it. We're gonna set up table rows for it right in the LASTN_DATE_FORMAT box. If you have it in another table in the sections I mentioned above, it's gonna display ALL FUCKED UP. You're putting in extra table tags that we won't need. (see picture below)
The %%datetime%% tag is inside the tabke tag like it should be but it's not inside a table row. Again, this is how we want it.
Okay let's set the commands for how we want the text to display shall we?
[X] Skip down to your LASTN_PAGE section of your style
[X] Okay now inbetween the <head> & tags of your code look for a line of code that looks like the part of the picture with the red rectangle around it.
This is where we define what we want certain elements of your journal to do. If you have this line of code or a similiar line of code you can add on the following two lines of code to it: (*note* you can change the font color and font face to whatever your preference is. [You can change the letter spacing & the size of the font as well but for now let's leave those things alone, edit it to your liking when we're done instead])
.date1 {font: 28pt; font-family: Georgia, Verdana; color: #2E5D81; font-weight: bold; letter-spacing: 20px; position: relative; bottom: 0px}
.date2 {font: 12pt; font-family: Georgia, Verdana; font-weight: bold; color: #00BAFF; letter-spacing: 8px; position: relative; bottom: 12px}
[X] If you don't have a line of code like that anywhere and you know shit about HTML & CSS STOP RIGHT NOW. No more tutorial for you. You're probably using a system generated style and will risk fucking up EVERYTHING!
[X] However if you're without the code and you know HTML & CSS then you can continue. Write the code into your style. It should look something like this: Of course you can change the text colors, the font face, the cursors etcetera to whatever your preference is.
body, div, td, p { font-family: Verdana; color: #000000; font-size: 9; CURSOR: s-resize; }
.date1 {font: 28pt; font-family: Georgia, Verdana; color: #2E5D81; font-weight: bold; letter-spacing: 20px; position: relative; bottom: 0px}
.date2 {font: 12pt; font-family: Georgia, Verdana; font-weight: bold; color: #00BAFF; letter-spacing: 8px; position: relative; bottom: 12px}
Okay if you don't know much about code you might be asking yourself "what in the hell is this ".date1" & ".date2" shit?" It's simple: They're classes. We're going to use them in a font tag in the LASTN_DATE_FORMAT section in just a few. It tells the browser how to display the date/time section of your layout. You don't have to call them .date1 & .date2 if you don't want to. You could even name them .fuckoff1 & .fuckoff2 if you really wanted to but most designers on LJ like to keep it simple and like to keep it relevant. .date1 & 2 are most commonly used for editing the %%datetime%% variable tag so that's what we're going with here.
[X] Okay now onto the LASTN_DATE_FORMAT section of the style editor...
[X] Here's the line of code that goes into the box:
<tr><td align=center><font class="date1">%%daylong%%<tr><td align=center><font class="date2">%%mm%%.%%dd%%.%%yyyy%% - %%12hh%%:%%min%%%%ampm%%<br>
See? Just as I promised we set up table rows for it right in that section. You'll see we've set %%daylong%% (the full name of the day of the week) to be displayed using the settings in the .date1 code and the rest to be displayed using the settings in the .date2 code.
The results should be text similar to the first picture. If the width of your main entries box in your journal is skinnier than the width of the text shown though, it won't look right and you'll need to make the font size smaller for both classes.
[X] You can also change the amount of space inbetween the letters by altering the letter-spacing part of the code. Also the date and time (small font) under the day of the week can be pushed further up (right on top of the day of the week) or further down by altering the bottom tag of .date2. (*note* the higher the number is, the higher up the text is. You're telling it how many pixels from the bottom of the table row you want it moved up)
[X] There are many different ways to play around with this. You could even have the day of the month, date and year as the big words underneath and the day of the week and time as the small words on top if you wanted. You can do it a thousand different ways. Different sizes, different colors, different fonts, different alignments. Play around. You'll figure out what looks best for your particular layout.
HAPPY CODING!!
Poll Feedback please!!!
If you have any questions, just ask! Drop a comment and I'll help you the best I can. =]
A much simpler tutorial on image maps (as requested by another friend) later in the week.
-Shara