Tweak

InsaneJournal

Tweak says, "Loverly bunch of coconuts!"

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

mary_greenman ([info]mary_greenman) wrote in [info]rp_tutorials,
@ 2013-05-11 01:02:00

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

The Implemented Table








The Implemented Table
Name: The Implemented Table
Type: Character profile layout.
Credit: [info]scatterbrained or [info]mary_greenman.
Features
What can I say? I really like rounded images and this profile features 7 spots for roundifying html images! Woo! Actually this bb was the product of about a weeks worth of trying to play with tables & divs all in the same place.

I wanted a simple, sleek profile where the focus was on the text content rather than images. It's easy to edit, so if you don't like some of the stuff on the side, feel free to add/remove content. I really wanted to give people several ways to describe their characters, both in depth and "at a glance". I think my favorite part about this bb is the way the header sort of guides your eyes down to the bigger stuff. The shape is super interesting imo.

Originally, I was going to add lyrics between the six images beside the main header image. Unfortunately, due to the size of the table and the positioning of the images, there's just no way to add it in without it looking terrible. If you really want lyrics, I would suggest adding them in the History and/or Personality section.
MISC: Links to journals you're using this in would be loved! I'm a snoop and like looking at what people make from my stuff. ;)

LIVE PREVIEW HERE & slightly edited male version here.

CODE

(Post a new comment)


[info]tellthenight
2013-05-11 06:15 pm UTC (link)
Sadly, I have no use for this right now, but I want to go on record saying this is lovely and clean, and has the added benefit of looking fantastic on a mobile phone. I can't wait to get home to get a look at your codes (:

(Reply to this) (Thread)


[info]mary_greenman
2013-05-11 07:54 pm UTC (link)
Aww, thank you! Your words are so kind. <3 Let me know if anything confuses you - I'm happy to help.

(Reply to this) (Parent) (Thread)


[info]tellthenight
2013-05-11 11:27 pm UTC (link)
Okay, so I finally got home to start checking through this and omfg I love that you're using divs (I'm a web dev student and seeing nothing but tables makes my nitpicky brain go LASKJGHASKJG NOOO).

I did notice two things though: you have a doctype line in the code but you actually don't need that on IJ (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> is what's already specified in the page by IJ itself, although I love seeing the HTML5 doctype in use!), and you have a property that is align:center, which doesn't actually exist. You need to either use text-align:center or margin:0px auto; to centre your content. The former aligns the internal content, and the latter aligns the div itself.

Otherwise, this is beautiful and I love that it's by and large just a type treatment, but it's totally not visually boring. And the line-lengths are awesome asjlaghsdgk

AND NOW THAT I'VE WORD VOMITED... I will quit and leave you be, haha.

(Reply to this) (Parent) (Thread)


[info]mary_greenman
2013-05-12 12:02 am UTC (link)
Hehehe, this is my favorite kind of word vomit! The super helpful!

Thank you for reminding me about the doctype header thing. Originally I wanted to play with hover affects for images, so I was working with .tilt tags and things liek that. Unfortunately, I discovered that these selectors don't actually work on IJ posts. Yet another reason to get into layout making. Haha. But yeah.

AND THANK YOU FOR THE ALIGN: CENTER THING. I've basically been teaching myself html/css so I never know what actually works and what's out of date from the shit I read. So a lot of the time - I just try shit out to see if it'll work. But yes. Totally going to go through and fix it after posting this. BUT YOUR COMMENT(S) TOTALLY MADE MY DAY. I LOVE TALKING HTML WITH PEOPLE WHO ACTUALLY KNOW WHAT THEY'RE DOING.

(Reply to this) (Parent) (Thread)


[info]tellthenight
2013-05-12 12:10 am UTC (link)
At this point, whenever possible I've tried to move away from designing within IJ's pageframe. It drives me NUTS because things that work on an external page? Not always possible here. (I actually built my roster outside of IJ so I could use JQuery, which is The Best Thing Ever when it works tbqh.) And I'm so used to divs that I honestly SUCK at tables now, so I can't even fall back on that. ):

No worries! If you ever have any HTML/CSS questions, I am really fond of babbling about it and a am always willing to help! (No, seriously, I drive everyone else I know bananas with it because I'm excited and I found something that's awesome and.. nobody else cares. :/)

(Reply to this) (Parent) (Thread)


[info]mary_greenman
2013-05-12 12:17 am UTC (link)
Haha. Itotally know what you mean. Tables are so annoying and divs just give you so much more control but I really wanted to try my hand at tables. Originally this was supposed to be a table-only profile but things got kind of.... "oh, I wonder if this'll work, Ooooh, thats pretty, what about this?!" and it went down hill from there. Or up, rather. XD

JQuery looks super interesting! I've read up a bit on it but it's a little over my head. Oh btw, I'm always on the look out for friends to discuss html/css with just for fun (because I am such a fucking nerd, LMAO) so if you ever want to babble feel free to hit me up. I'm on all the messnegers (aim: xxmarygreenmanxx, google:xmary.greenmanx , trillion: marygreenman ... annnnnd totally feel free to not add me. lol). BUT YAY. BABBLING CAN BE FUN. (also, love that your icons are all the side characters in true blood haha).

(Reply to this) (Parent) (Thread)


[info]tellthenight
2013-05-12 12:23 am UTC (link)
OH MY GOD THANK YOU tables are the worst.

JQuery... honestly it's lovely and it works and it's fabulous BUT figuring it out can be a pain and a half. I did a lot of flailing in a JavaScript class the semester before last to figure it out, and a lot of the time getting your code to work can be finicky depending on what version of JQuery you use, whether you've got the right selectors, if you've made the right sacrifices to the JQuery gods..

UM YES I'm annoyingly chatty about HTML/CSS so I'm going to go add you on AIM right now. (I'm coldisthewater!) AWWW YISS except I haven't even gotten to put up my favourite yet (HBIC Pam).

(Reply to this) (Parent) (Thread)


[info]phillipbeckett
2013-05-12 11:38 am UTC (link)
YES TO TABLES. I mean I sometimes use them cause so many people DO NOT GET DIVS but I hate them (and it's easier teaching people html which I seem to do ALL the time but yeah divs = love). I usually cheat and combine the two to get what I want cause I'm that picky with my layouts.

(Reply to this) (Parent) (Thread)


[info]tellthenight
2013-05-16 07:10 pm UTC (link)
Within IJ, tables can be a lot easier to get to behave themselves because they automatically have the capacity to line up side by side; divs have to be forced to float and cooperate, and it can take a lot more in-html code than it would in a regular page. But I'm so used to them now that tables don't work as well for me anymore. :/ I didn't get divs for the longest time either, and then my first web professor gave us a lecture about them that made it all make sense.

(Reply to this) (Parent) (Thread)


[info]ex_dickens625
2013-05-17 05:25 am UTC (link)
That's true and most people find it easier to do but really you can do so much more with Div's. Then again I've taught myself to replicate most stuff with tables with row and col span. Pain but it works...

(Reply to this) (Parent)


[info]julieonair
2013-05-16 03:57 pm UTC (link)
Can I be a creepy stalker person and add you on AIM? I have some CSS questions and Google is not being very helpful right now!

(Reply to this) (Parent) (Thread)


[info]tellthenight
2013-05-16 07:13 pm UTC (link)
Sure! That'd be no problem at all (:

(Reply to this) (Parent)


[info]phillipbeckett
2013-05-12 11:39 am UTC (link)
THIS IS BRILLIANT. Stealing thanks :D

(Reply to this) (Thread)


[info]mary_greenman
2013-05-30 06:30 am UTC (link)
NP! Thanks for the comment! <3

(Reply to this) (Parent)


[info]upyr
2013-05-30 06:20 am UTC (link)
I absolutely love this profile layout. I was actually looking for something smaller for character blurbs (halfway between a cast list and a profile, I guess you could say), but I fell in love with your thing here when I saw it and I really wanted to work with it. So I edited it. Um, a lot. I really hope that's okay! I know you said feel free to edit, but... I did it rather extensively, lol.

Here is what I ended up with, in case you're interested. :) Again, I love love love what you've made here.

(Reply to this) (Thread)


[info]mary_greenman
2013-05-30 06:28 am UTC (link)
THAT is gorgeous. I can't believe you made something so pretty out of this <3.

No worries about the editing of it - thats how I learned to even do these things. Through editing other people's stuff. If I can get someone else as inspired about HTML as RP_Tutorials got me, I'm extremely happy and flattered and satisfied. <3

You might also be interested in this as an alternative. It's got a lot of space for character blurbs. :)

(Reply to this) (Parent) (Thread)


[info]upyr
2013-05-30 06:37 am UTC (link)
Aw thank you. <3 It took me a few days of tinkering to get it to look good, lol. Originally I was going to have a blurb with the smaller pictures going around it like a border, but that just got way too confusing for me to deal with.

Ooh, I like that profile code too. Gosh you people with your pretty layouts and good HTML writing. <3

(Reply to this) (Parent) (Thread)


[info]mary_greenman
2013-05-30 06:42 am UTC (link)
Thank you. <3

I'm prolly going to post it this week or next week I just don't want to spam the community.

To do what you're taking about you'd need to used border-image or somewhere around 50 - 100 image dives. I could play with it a little this weekend to see if its doable, I'm just not sure it is and that means writing a lot of new code.

(Reply to this) (Parent) (Thread)


[info]upyr
2013-05-30 07:28 am UTC (link)
:) Aaaand you're already over my head, lol. Definitely don't slave away over html on my account. <3 It's probably one of those ideas that seem great to someone who doesn't actually know how much work it's going to take.

(Reply to this) (Parent)

Used Elsewhere
(Anonymous)
2014-04-10 10:14 pm UTC (link)
Hello! Unfortunately I do not have a LJ, but I have made use of your code on my Tumblr RolePlay blog! http://badbitchwitharifle.tumblr.com/

You're welcome to come see it, and I've put a disclaimer and a link to your journal on the front page of said blog to showcase where I got the link.

If you'd rather I not use it on Tumblr, please drop me an ask and I'll take it down immediately.

A very lovely code, clean and just what I was looking for.

(Reply to this) (Thread)

Re: Used Elsewhere
(Anonymous)
2014-04-10 10:26 pm UTC (link)
Edit: Couldn't fit the disclaimer on the front page, so made another page dedicated to disclaimers in general. Thanks again!

(Reply to this) (Parent)


[info]avacooper
2014-04-24 05:42 pm UTC (link)
this is great! using it on this journal. thanks!

(Reply to this)


[info]leahallen
2018-07-04 05:27 am UTC (link)
I know this went up forever and ago, but I stumbled across it and liked it. So I made a thing

(Reply to this)

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