Tweak

InsaneJournal

Tweak says, "AMAZEBALLS"

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
chromaticqueen ([info]chromaticqueen) wrote in [info]rp_tutorials,
@ 2012-08-01 18:57:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
This is less of a tutorial and more of a "wow, cool, that worked."

Ladies and Gents, are you tired of IJ's journal entries page harshing your vision? Are you sick of trying to find a color scheme that doesn't clash with yellow tweak heads? Do you wish you could use more than just the most basic of HTML to code the awesomeness that is your game? Turns out you can!

In both S1 and S2 journal layouts, under the Custom Options tab, you can add literally any CSS you want. Super-badassery such as this or this can be done right here on IJ and worked seamlessly into your journal layout.

How, pray-tell, does one accomplish this? Through the copious use of class and id in CSS. Here's a quick run down. Basically, just use something like
.mystuff {color: #000000; background-color: #FFFFFF; font-family: georgia; font-size: 14px; line-height: 15px; text-align: left!important; font-weight: normal; text-transform: uppercase; letter-spacing: 2px;}

in the journal layout and then
(div class="mystuff")Content here(/div)

in the actual entry.

Pseudo-classes work, too.
.mystuff a {color:#968EAA;text-decoration:none;font-weight: none;font-family: century gothic;}

will change the links in your mystuff div above, but not the links anywhere else in the layout.

Now, obviously you can do to simply format texts and links with a minimum of hassle, and that's all part of what makes CSS so awesome. But the rest of what makes CSS so awesome is that you can do cool tricks with hidden divs or hover effects or...well, all sorts of other stuff. ([info]chestnutgallery is the queen of such tricks.)

The three things to keep in mind are: 1) don't name your classes the same as something in the layout. It'll mess things up. Make sure your class names are unique, or at least do a quick ctrl+F to see if they're already being used. 2) this will only work on the main journal's page. You can't make it work on individual entry pages. So don't hide things being a text-cut. If you want to link to a specific page, use http://YOURJOURNAL.insanejournal.com/?skip=# . Your stuff will look all messed up once you click onto the entry page. 3) if it's not looking right, try hitting the "disable auto-formatting" at the top. Just remember to add in all your line breaks if you do.

And because I just can't help a little bit of pimping on the side, here's how I used all this at my own mod journal.


(Read comments)

Post a comment in response:

From:
( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 

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