Tweak

InsaneJournal

Tweak says, "Yeah, I'm listening."

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.


(Post a new comment)


[info]specter
2012-08-06 06:07 pm UTC (link)
Wow okay so. I have been trying for a week to figure out how to do .ca-menu animated stuff, not for a mod journal just as a cool way to link things and I see that you're using them there. Would you ever consider a quick run down of how to do the in-the layout portion of the animated menu/links?

(Reply to this) (Thread)


[info]chromaticqueen
2012-08-06 07:03 pm UTC (link)
For the menus in the actual post? I used a modified version of this.

This:


is the part of her code that controls the animated menus. That CSS can be added into any journal layout.

If you're talking about the navigation links on the side, that's part of the code in this chestnutgallery layout. I just modified it a lot.

(Reply to this) (Parent)



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