randomtology: (spiffy hats (Reno & Rude))
Yuff ([personal profile] randomtology) wrote in [community profile] yuff2016-06-20 11:37 pm

DRIFT FLEET: FANCY SHIP CODE VERSION 2.0

So sometime last year, I modified a code from this Insanejournal post that could be used for [community profile] driftfleet ship pages! Now a year later, I've managed to come up with a revised update for the code!

So what's been updated?

➣ HTML and CSS has been updated and streamlined so it fits HTML5 and CSS3 guidelines about 99% of the time.

➣ Alt tags have been added to the non-background images to make it readable for screen readers and other devices!

➣ Bugs in the code with the text spacing, images and the mysterious floaty bit has been fixed! No more weird untouchable box of mystery.

➣ Navigation Comments have been added through the code so it's easier to tell what's affects what, and there was a general attempt to make the code more user-friendly

➣ An option to add a background that includes your ship's logo has been added!


WARNING: I tried my best to troubleshoot the worst of the problems, but other ones could still to pop up. I'd also recommend having some knowledge in HTML/coding if you want to use this code. It's easier than it was before, but it can still be tricky. Don't worry if you decide not use it, these sorts of pages are COMPLETELY OPTIONAL fun thing for your ship!

.... SS SHIP NAME, ATROMA DRIFT FLEET
The SS SHIP NAME
CATCHPHRASE
NAMESS Ship Name
RANKAtroma Drift Fleet
DESIGNATIONDFSS-#
LAUNCH DATEMonth Xth, 20XX

CAPTAINName
FIRST MATEName
UPGRADESPurchased Upgrades
CAPACITY#/#
.... SS SHIP NAME, CREW
Name Name
Captain
Augment
Info | Inbox
Name Name
First Mate
Augment
Info | Inbox
Name Name
Augment
Info | Inbox
Name Name
Augment
Info | Inbox
Name Name
Augment
Info | Inbox
FORMER CREW Former Crew Names
.... SS SHIP NAME, AMENITIES

BUNKING

RANK#
BUNKSBunk Description
STORAGEPersonal Storage Description
BEDDINGBedding Description

BATH

RANK#
TOILETToilet Description
SHOWERShower Description
BATHTUBBathtub Description
CHANGING AREAChanging Area Description
HOT WATER# Minutes Per Hour
SUPPLIESSupplies Description

KITCHEN

RANK#
SEATINGSeating Description
APPLIANCESAppliances Description
POTS & PANSPots and Pans Description
PROTEIN CONSISTENCIESProtein Consistencies Available
PROTEIN FLAVORSProtein Flavors Available
DRINKSDrinks Available
FOOD DISPENSERFood Dispenser Available
SPICE RACKSpices Available
REAL FOODReal Food Available

RECREATION

RANK#
EXERCISE MACHINESExercise Machines Description
ENTERTAINMENT Entertainment Available
MISC. Other information

SHUTTLES

# OF SHUTTLES#
OCCUPANCY# People
SPEEDSpeed Rate
MISCOther Information
.... SS SHIP NAME, STATIONS

SPECIALIZED AUGMENTS

COMMUNICATIONS

COMMUNICATIONS OFFICERName.
SHIP NOTESCommunication Ship Notes
FUNCTION NOTESJob Description

ENGINEERING

ENGINEERName
SHIP NOTESEngineer Ship Notes
SHUTTLE NOTESEngineer Shuttle Ship Notes
FUNCTION NOTESJob Description

LAB SUPPORT

LAB SUPPORTName
SHIP NOTESLab Support Ship Notes
FUNCTION NOTESJob Description

PILOT

PILOTName
SHIP NOTESPilot Ship Notes
FUNCTION NOTESJob Description

SECURITY

SECURITY OFFICERName
SHIP NOTESSecurity Ship Notes
SHUTTLE NOTESSecurity Shuttle Notes
FUNCTION NOTES Please Don't Shoot the Hull

CIVILIAN AUGMENTS

COOK

COOK Name
SHIP NOTESCook Ship Notes
FUNCTION NOTESJob Description

MAINTENANCE

PERSONNELName
SHIP NOTESMaintenance Ship Notes
FUNCTION NOTES Job Description

PERSONNEL SUPPORT

PERSONNELName
SHIP NOTESPersonnel Ship Notes
FUNCTION NOTESJob Description

TACTICAL

PERSONNELName
SHIP NOTESTactical Ship Notes
FUNCTION NOTESJob Description
.... SS SHIP NAME, NOTES

SHIP ADDITIONS

SHIP AREA
  • Addition
  • Addition
SHIP AREA
  • Addition
  • Addition

PERSONAL INVENTORY

NAME
  • Item
  • Item
  • Item
NAME
  • Item
  • Item
  • Item
code by wearestardust @ supersuits


Live Preview
SS Blue Fish

CODE


NOTES


PLEASE DO NOT REMOVE THE CREDIT LINE. Credit towards me is optional since all I did was modify it, but pleaaaase credit the original creator of the code.

➣ The ship Designation # will be whatever number your ship is on the ship and crew list.

➣ On the first page, sometimes adding too many lines will cause the browser to go out of whack in firefox. We're not sure why, and I'm still working on a solid fix for it. But if you're editing that area heavily, make sure to double check how it works in Firefox! It should work just fine in Chrome.

➣ That said, it's highly recommend that if you're the one editing, to double check how it looks in both Chrome and Firefox since their coding alters slightly. If you don't have both, ask a friend to check for you. I, myself, have no idea how it looks in IE, nor do I care.

➣ Please use your own images! Lots of cool ship concepts can be found with a google search! The one on the first page is 200x200 pixels, while the sidebar image is best at 200x175 pixels - but it will resize. Remember that you'll have to change the sidebar image for every page.

➣ If you wish to have a background image with the logo (as seen in the live preview), you'll need to make an image like this one, with the logo in the lower left hand corner. Size dimensions are 700 x 396px. The code should work just fine without it though, if you decide you don't want to do that extra step.

➣ The code looks best on the Dreamwidth default comment pages. If you REALLY want to use your style of comment page, you may have to modify the colors (right now set at #F7F7F7) in some areas to keep up the invisible corners. Also, there may be some spacing issues with the borders.

➣ If you want to edit the colors, just find/replace the following:
#FFF #000 #050a1d #090c20 #2a3b5a #172a51 #173874 #4fa6d7 #842320 #B80600
Remi suggested getting/using a program that has a "replace term" option in your word searches, as some of these colors appear 80+ times. For PC users, Notepad has this option if you hit ctrl+H. OpenOffice and other word processing programs also offer this!

➣ If you have any other ways you'd like to edit it, feel free! 8D I love seeing what you guys come up with.