Tweak

InsaneJournal

Tweak says, "the glorious Pitts."

Username: 
Password:    
Remember Me
  • Create Account
  • IJ Login
  • OpenID Login
Search by : 
  • View
    • Create Account
    • IJ Login
    • OpenID Login
  • Journal
    • Post
    • Edit Entries
    • Customize Journal
    • Comment Settings
    • Recent Comments
    • Manage Tags
  • Account
    • Manage Account
    • Viewing Options
    • Manage Profile
    • Manage Notifications
    • Manage Pictures
    • Manage Schools
    • Account Status
  • Friends
    • Edit Friends
    • Edit Custom Groups
    • Friends Filter
    • Nudge Friends
    • Invite
    • Create RSS Feed
  • Asylums
    • Post
    • Asylum Invitations
    • Manage Asylums
    • Create Asylum
  • Site
    • Support
    • Upgrade Account
    • FAQs
    • Search By Location
    • Search By Interest
    • Search Randomly

Ally -- are you already gone? ([info]wastintime) wrote in [info]rp_tutorials,
@ 2012-03-05 14:28:00

Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:layouts: journals

Make your mod journal look like an actual school website
Temporary Live Preview: [info]graphically

So, I saw the badassery that is [info]chestnutgallery's gallery layout and I thought, "THIS NEEDS MORE HARRY POTTER!" Obviously.

I was already working on putting together a mod directory page, but I realized this was a) so much cooler and b) so much easier and more customizable. So, I banged the two together and came up with this.


INSTRUCTIONS
1. Go to Customize Journal
2. Make sure you are in Style System S2 (if not, switch and click Save Changes)
3. Under "Look and Feel" select Layout -> Generator and Theme -> (Default Layout)
4. Under "Custom Options" set "Number of journal entries to show on recent entries page" to 1
5. Use layout's stylesheet(s) -> No
6. Copy and paste this code into the Custom Stylesheet

7. Don't forget to hit Save Changes
8. Create a new entry in the journal
9. Set the entry's date to way distant in the future and check the "Date Out of Order" box
10. Check the "Disable Auto-Formatting" box
11. Copy and paste this code into the entry area

12. Post and refresh your recent entries to feast your eyes on the amazing-ness


Crediting [info]chestnutgallery and [info]rp_tutorials is a must, okay?

If you have any questions, feel free to leave them here.


(Post a new comment)


[info]grantaire
2012-03-05 09:02 pm UTC (link)
There are no words for how amazing this looks.

(Reply to this)


[info]mydecember
2012-03-05 09:31 pm UTC (link)
This is kind of epic just so you know!

(Reply to this)


[info]evaakeru
2012-03-06 01:35 am UTC (link)
OH MY GAWD

(Reply to this)


[info]herstory
2012-03-06 04:15 am UTC (link)
This is beautiful! I'm bookmarking it for future use. Well done!

(Reply to this)


[info]tellthenight
2012-03-06 05:49 pm UTC (link)
I have literally no use for this, but it's so awesome, I am dying to find something to do with it now. Seriously, this is sexy.

(Reply to this)


[info]chestnutgallery
2012-03-06 05:50 pm UTC (link)

COULD YOU BE ANYMORE FANTABULOUS!!

(Reply to this)


[info]superiors
2012-03-07 11:47 pm UTC (link)
Love it; but how do I change the colors? :/ I tried to read the code, and it says like background: rgba? Do I edit the color scheme by throwing in the color specs? What does the a stand for?

.info-box .hidden .info-box-links a {
display: block;
text-decoration: none;
padding: 3px 5px;
margin: 0 10px 3px 10px;
background: rgba(0,0,0,0.8);

(Reply to this) (Thread)


[info]evaakeru
2012-03-08 07:37 am UTC (link)
the 'a' is for 'alpha'...this new css coding allows you to set an opacity via the alpha channel

if you want to change the colors but don't want to deal with opacity you would enter your rgb values [first 3] and then change your final value to 0
[which in the case of your example would be 0.8 changed to 0]

(Reply to this) (Parent)


[info]honeyspider
2012-03-08 05:37 am UTC (link)
This... is... incredible.

(Reply to this)


[info]dybim_mods
2012-03-10 01:48 am UTC (link)
Using it here !

One question though, is there any way to change the default font on the headers (how the page looks when still, not when moused over) ? If there is that would be GREAT. I'm not very familiar with CSS, I'm afraid.

Thanks!

(Reply to this)


[info]chromaticqueen
2012-03-28 10:02 pm UTC (link)
This layout is gorgeous. I'm using it (altered) over here. Thank you so much for sharing!

(Reply to this) (Thread)


[info]vdas
2012-04-04 07:02 pm UTC (link)
how did you make it not super wide?

(Reply to this) (Parent) (Thread)


[info]atwarmod
2012-04-05 12:13 am UTC (link)
In the code where it says

/*Table Width*/
table:first-of-type {
position: absolute;
left: 600px;
top: 0;
width: 50%;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px;}

That's what controls how big your entry is. It's set to be 600px off to the left, and 50% of the total space (so anther 600px). You can change the "left:600px;" if you don't want it to be so far over, or you can change the "width: 50%;" so the entry space isn't so wide. You can set it to be a different percent or a set number of pixels. For my variation, I did "left: 0;" and "width: 100%;"

...I think that's the answer, anyway. I changed a lot of things and did most of it by trial and error, so let me know if it doesn't work.

(Reply to this) (Parent)


[info]brenhall
2012-10-19 12:07 am UTC (link)
if i may, how did you change the colors on the dropdown menu and the font color on the headers?

(Reply to this) (Parent) (Thread)


[info]atwarmod
2012-10-19 02:12 am UTC (link)
I changed a lot of the CSS code and had to add a few lines, but I don't quite remember what I did. It was several days of trial and error to make it work.

(Reply to this) (Parent)


[info]diefightingmod
2012-05-03 08:31 pm UTC (link)
Using it on this journal, just changed the background and colors! Amazing layout!

(Reply to this)


[info]diefightingmod
2012-05-23 09:21 pm UTC (link)
I have one question. Is it possible to add in another layout for the friends page?

(Reply to this)


[info]olympusmods
2012-09-26 01:46 am UTC (link)
I seriously love you. But, there is always a but. I am stupid. Very much so. I have played around with it for a while now to get things the way I want them to annnnd... I can't get the boxes to change color. Because I love purple but it shouldn't be here. What I did was make the background vanish completely because I'm a magician.

If you maybe had two minutes to point me in the right direction? Because I'm usually staring right at my problem and do so until I get to smack myself in the forehead but... my online time right now is limited. I would seriously appreciate your help.

Oh. This journal, I should probably MENTION that.

(Reply to this)


[info]brenhall
2012-10-19 12:01 am UTC (link)
hi! i am so in love with this layout and i've tweaked it a bit, but i've run into a problem and i was hoping you could help. i'd like to change the font on the headers to yellow and change the dropdown boxes to blue, but i can't seem to figure it out! any help would be really appreciated!

(Reply to this)



Home | Site Map | Manage Account | TOS | Privacy | Support | FAQs