Tweak

InsaneJournal

Tweak says, "driver picks the music."

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

the sublime fruit of injustice. ([info]quiller) wrote in [info]rp_tutorials,
@ 2011-07-02 18:48:00

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



Long time watcher, first time writing, blah blah blah ad nauseam. I don't normally publish layouts, but I thought this one turned out rather nicely, and I'm sure there must be other players out there who've harboured a secret ambition to run a fake news portal! What it is, is a port of The Guardian template, usable on both free and paid accounts.

PART I(a)
Journal Title: guardian
Subtitle: .co.uk
Style System: S2
PART I(b)
(optional) Go to the actual Guardian page. The links you want to snag are located on the row directly below the logo. It's the colourful section, a bit hard to miss (NOT the breadcrumb below it). Copy each link into your Links List. Because the navigation in my coding is slightly wider than the original, it cannot accommodate all fifteen; I've left out 'Offers' in mine, but you can replace them completely with your own links, or do whatever. Just note that, if you change the links and wish to keep the multi-coloured effect, there is another step involved in PART III.
PART II
Layout: Complete Style
Theme: Basic Black and White
PART III
Layout Type: Three column (Sidebars on Right)
(optional) Number of journal entries to show on recent entries page: 1
(optional) Number of journal entries to show on friends page: 1
Body of custom sidebar module: This is where you place your social networking icons. (cf. diagram)
Body of second custom sidebar module: This is where you place your news ticker, weather, what have you. (cf. diagram)
Display of tags in sidebar: List
Show tag count in hierarchical list? No
Cut off tag display in sidebar after certain limit: No
First item in primary sidebar: Links
Second item in primary sidebar: Calendar
Third item in primary sidebar: Page Summary
Fourth item in primary sidebar: Custom Text Two
… item in primary sidebar: (none)
First item in secondary sidebar: Custom Text
Second item in secondary sidebar: Tags
… item in secondary sidebar: (none)

Custom external stylesheet URL: Now, for the fun part. This stylesheet is too long to fit directly into the box IJ provides, so you will have to link to an external host in this section. The stylesheet itself is located here, but I strongly recommend uploading it to your own server, for everyone's benefit. Additionally, if you've made any changes to the links in PART I(b), you will have to alter the code accordingly, which will again require you to host your own custom code.

So, how do you customise those links? Hit CTRL+F, or whichever hotkey to search text on your Browser/OS. You will have to find this: .module-typelist li a[href*="http://www.guardian.co.uk/"] Seeing a pattern? What you need to do is to set a[href*="link"] and a:hover[href*="link"] for each of the url in your Link List that you wish to customise. If you want to keep the Guardian style, you need only to replace the url with your own.
Well, that's about it! As I said, it's not exactly a professionally published layout, but perhaps some of you out there will find it useful. Er… Not really all that great at support either, so you're on your own with these instructions, though I will try and quip in if it is within my power to troubleshoot. Just wanted to contribute what I can, since this community has been incredibly beneficial in many ways. 'Till another time then, Tschuess!


(Read comments) - (Post a new comment)


[info]eyelet
2011-07-03 03:57 am UTC (link)
I mean, *good with tables

(Reply to this) (Parent) (Thread)


[info]quiller
2011-07-03 03:59 am UTC (link)
I can't promise anything, but sure, I can take a look at it. This is a mock-up of Twitter and not an actual Twitter layout we're dealing with here, yes?

(Reply to this) (Parent) (Thread)


[info]eyelet
2011-07-03 04:05 am UTC (link)
Yea, it's more so a mock-up of status updates, made up of multiple tables. This is what I have so far, but like I said, I can't get the spacing between the divider to die down.

(Reply to this) (Parent) (Thread)


[info]quiller
2011-07-03 04:13 am UTC (link)
Is this what you wanted?

(Reply to this) (Parent) (Thread)


[info]eyelet
2011-07-03 04:17 am UTC (link)
That didn't work for me?

(Reply to this) (Parent) (Thread)


[info]quiller
2011-07-03 04:22 am UTC (link)
I'm not sure I've understood your request correctly, but if the issue is that the divider isn't showing up, I think it's just that the colour you've chosen is too light. You might want to try a darker value than #EEEEEE, which is the one you have currently. Here's a version with #CCCCCC, for example:



If I have the wrong idea, feel free to clarify and I'll try to look into it further for you.

(Reply to this) (Parent) (Thread)


[info]eyelet
2011-07-03 04:25 am UTC (link)
This isn't a layout or for the userinfo, it's for an entry. Once you plug my codes into a post and hit preview, you'll see what I mean by the spacing being cooky.

(Reply to this) (Parent) (Thread)


[info]quiller
2011-07-03 04:27 am UTC (link)
Looks like this on mine?

(Reply to this) (Parent) (Thread)


[info]eyelet
2011-07-03 04:30 am UTC (link)
Mine shows space but do you think the coding for the divider is "right" without unnecessary spaces between one table and the next?

(Reply to this) (Parent) (Thread)


[info]quiller
2011-07-03 04:36 am UTC (link)
Well, the one you posted originally used underscores, which adds lineheight, and that might be the space you're referring to. The ones I posted use bottom border for the existing table, which should have resolved the problem. The coding itself looks fine to me; if the line breaks are cumbersome, you can enclose the whole thing in and work out the breaks manually.

(Reply to this) (Parent) (Thread)


[info]eyelet
2011-07-03 04:39 am UTC (link)
I think the bottom border must've done it! I was going to try that out but couldn't figure out where to stick it. Thank you so much for giving me another set of eyes on the fly!

(Reply to this) (Parent) (Thread)


[info]quiller
2011-07-03 04:41 am UTC (link)
My pleasure. I was mildly concerned because you commented that it didn't work, but I'm glad if it's worked itself out.

(Reply to this) (Parent)


(Read comments) -


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