RP Tutorials

February 2023

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728    

Tags

Posts Tagged: 'tools:+html'

May. 3rd, 2016


[info]tessisamess
[info]rp_tutorials

[info]tessisamess
[info]rp_tutorials

The Ultimate Generator Tutorial


[info]tessisamess
[info]rp_tutorials

This is a tutorial I've been meaning to do for literal years! It took forever to get to it, but today we're going to pick apart the train wreck that is Generator in hopes that more people can actually use it to create custom content. Exciting stuff!

This tutorial is going to cover any and everything I've ever learned while fighting working with Generator, so it's going to be extremely long. It's worth it, though; I promise! If you've ever wanted to make your own Generator layout, but the task seemed too daunting, you are right where you need to be. And, with that, away we go!

Don't forget to post the creations you make using this new workable base at [info]rpresources and the new community, [info]s1generator, which I've created for all Generator-specific needs!


INTRODUCTIONFRAME BREAKDOWNCSS GLOSSARYDIVS OR SPANS?
GENERATOR SETTINGSFAQ & TROUBLESHOOTING
VIEW EXAMPLE JOURNALVIEW THE DOCUMENTATIONASK A QUESTION

Aug. 8th, 2012


[info]tessisamess
[info]rp_tutorials

[info]tessisamess
[info]rp_tutorials

Code Tester


[info]tessisamess
[info]rp_tutorials
Hey guys! So, normally, I send people to DRAAC to live-test their HTML and div styled codes but, recently, they've added, uh.

This really ugly sidebar. )

And, idk about you guys, but for me it's super distracting. I was getting a bit sick of all the text on the page anyway, so here you go. A new code tester based on their code (because I'm lazy lmao), with a clean, un-distracting page layout.

Just like DRAAC's, my code tester is good for HTML codes, div styled codes, and full HTML/CSS pages (but not CSS alone). Oh and, even after previewing, CTRL+Z still works, which is always a big bonus for me.

Apr. 11th, 2012

[info]tellthenight
[info]rp_tutorials
[info]tellthenight
[info]rp_tutorials

Firefox Aurora

[info]tellthenight
[info]rp_tutorials
I just discovered this in my web design II class, and after playing with it some, I have to post about it. This may not help everyone, but it can be a great asset for those of us who design or tweak layouts, or just play with any of those design or coding languages.

ONE WORD OF CAUTION: This is a pre-beta release, so it's not perfect and there will be bugs. If this bothers you, I would strongly recommend waiting.

Resized Screenshot of Welcome Page


Firefox Aurora is a recently-released pre-beta build of Firefox. It may not be interesting for general users, but for those of us who RP and play around with web design/development, this is a pretty awesome tool. Supposedly, Aurora is going to incorporate HTML5, which is beyond cool. It also has some awesome new features, like a 3D view of problem areas in your website/layout. Like so:

See a screenshot (and more about this really awesome new tool) below the link. )


Anyway, this was so cool I had to share. I hope somebody else finds it useful! (If this isn't appropriate here, I'll be more than happy to take it down. <3 I may also have overtagged, so please correct me if I did!)

EDIT: My server is performing maintenance, so the pictures got temporarily moved to Photobucket. They were resized by Photobucket, so when they go back to my server, the full-size images will be big again, I promise. Sorry to anyone else who couldn't see them because of the server issue! ):

Jan. 20th, 2012


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

Everybody likes bingo...


[info]wastintime
[info]rp_tutorials
So, I run a few fan work bingo communities and I love them. I also love sharing things. So, for those who care, here is a link to an open source spreadsheet/workbook on Google Docs that you can use on Google Docs or Excel to create your own bingo cards!

link

There are tons of memes and fun stuff you could do for your games or fandom with this. Enjoy!

Nov. 17th, 2011


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

I'm feelin' SASSy...


[info]wastintime
[info]rp_tutorials
What is SASS? SASS stands for Syntactically Awesome Style Sheets. SASS is a command-line script that you can run while you're editing a SASS file and it will generate a corresponding CSS file. Why is SASS awesome? Because it allows you to use VARIABLES (yay) and FUNCTIONS (yay yay yay) to generate stylesheets. So, basically, what this means is that, say, for a color you use repeatedly? You can store it in a variable and use that in your SASS stylesheet and then the script will place the color in every spot you desire. So, if you want to change, say, an accent color, you only have to do it ONCE. \o/ I've been playing with it all morning and it is the sexiest thing I've seen in a while.

So, how to do you use it? Well, first of all you need to get SASS and its available on Windows, Mac, and Linux. Here's the Download Page.

For Windows users, you'll have to install the RubyInstaller and after that is install THEN open your command line prompt (Start → Run "cmd") and simply use "gem install sass". Then you can start using SASS files. A tutorial about SASS files and how they work is located here.

So, if you're like me and are building gigantic style sheets for layouts, this makes life SO much easier. There are other scripts that can help you with CSS, but SASS is the first one I've tried and it's rocking my face.

If you don't use stylesheets regularly, you probably didn't understand a word of what I just said, but thanks for reading anyway. If you have any questions about using SASS or installing SASS, let me know in the comments and I'll see what I can do to help!

Oct. 22nd, 2011


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

Random Image Grabber


[info]wastintime
[info]rp_tutorials


Refresh this page and this image will change to a random pick of nine images.

The first thing you need to do is rename all of your files of the same file type to be a file prefix (optional) followed by a incrementing number. Then, upload them to a directory online the preserves the file name (Photobucket, FileDen, etc.) Finally, use the following code to fetch the random image script which will return the URL of a random image.

The Code


YOUR_DIRECTORY → the directory where you've uploaded your image files
YOUR_FILE_PREFIX → the prefix you've put on each file (optional)
YOUR_BEGINNING_NUMBER → the lowest/highest number in your series of images
YOUR_ENDING_NUMBER → the highest/lowest number in your series of images
YOUR_FILE_EXTENSION → the file extension on your files

What can you do with this? Well, my purpose for it was to make a header on a journal that changes every time you refresh. You can see an example here, but I'm sure you can find oodles of other uses for the trick. Have fun! If anyone wants the actual PHP script file, let me know in the comments.

Questions/Feedback? Leave a comment to this post.

Sep. 26th, 2011


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

Quick Tip: It's so stupid that it just might work...


[info]wastintime
[info]rp_tutorials
If you're having issues with Internet Explorer not honoring your widths, heights, paddings, and margins on elements in your layout, add this bit of code to your style/override: * { zoom: 1; }

The zoom property only works in IE and * { zoom: 1; } is telling the browser to render every element at 100%. You can play around with giving zoom other values and it's pretty cool because it will enlarge (values greater than 1) or shrink (values between 0 and 1) the element, BUT it will only render that way in IE. No other browser supports the property. So, basically, it's a hack, but it will save you a lot of headaches if you don't want to sit there figuring out where to add min-width on each element.

ETA: I've also found that mass setting the position to relative resolves a lot of issues in IE as well. So, putting them together: * { position: relative; zoom: 1; }

Make sure you put this one at the TOP of your style/override because if the positioning is already set for some elements, you'll want to keep that in-tact. The only problem with doing this, though, is that it can make certain elements render a little wonky, like they're just floating off to the side. To fix this, go find the rule for the element's type in the style/override (or add a rule for the type if there isn't one) and switch it to position: static; which is the default for most elements.

Sep. 24th, 2011


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

This is SO FREAKING COOL


[info]wastintime
[info]rp_tutorials
Do you use Scribbld styles for info pages? Well, I have the coolest trick ever to show you...

Click me!


The Code


Source

And the best part? People have made other awesome code with it. Like this javascript-free slideshow!

I AM FLAILING SO HARD YOU HAVE NO IDEA

Sep. 19th, 2011


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

Default Userpic Grabber


[info]wastintime
[info]rp_tutorials
Want the code so a user's default userpic always shows up regardless of them changing it? WELL, HERE IT IS...

InsaneJournal


LiveJournal


Scribbld


Dreamwidth


Example
<img src="http://krisallen.net/grabbr/ij?wastintime" /> =

:)

ETA: And here are the Grabbr files if you want to upload them to your own server.

Jul. 14th, 2011


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

S1 Overrides - Getting the most out of your GLOBAL_HEAD


[info]wastintime
[info]rp_tutorials
I'm not saying these are all the tricks you can use, but here are a few tricks that I thought were pretty nifty.

Font Embedding
You want to use a super cool font or fonts as your default in your layout, but know that not every computer is going to have it? Here's a fix for you.



Replace the link to the source file for the font of your choice! There's a few sites you can find these on like Google Web Fonts. Basically, you can load as many fonts as you want, but the more you use, the longer your load time will be. Cool, right? Thanks to [info]splott for showing me this one!

Favicon Embedding
Want to make Tweak go away in the favicon space??? Make a 32px by 32px or 16px by 16px pic (use a .png with transparency or .gif for best results!), change the file type to .ico and upload it online. Then, use this fix.



Voila! No more Tweak!

Title and Meta data
Want to give your journal a custom Title and Meta data (help out search engines!)? Here's some fixes.

Title


Meta


Any and all of these fixes should go in your override for GLOBAL_HEAD.

Have fun! :D

Apr. 6th, 2011


[info]embodimentof
[info]rp_tutorials

[info]embodimentof
[info]rp_tutorials

Basic HTML Tutorial


[info]embodimentof
[info]rp_tutorials
This is a quick basic tutorial that I put together for a friend who just recently joined IJ. It just covers a few things like editing font size, color, family, letter spacing, line height, linking, etc. Just some really basic things and nothing all that fancy.

CLICK HERE FOR TUTORIAL )

Mar. 29th, 2011


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

Customizable HTML Slideshow


[info]wastintime
[info]rp_tutorials


Live Example & Code )

Feb. 27th, 2011


[info]bee_charmer
[info]rp_tutorials

[info]bee_charmer
[info]rp_tutorials

CSS Drive: Image to Colors Palette Generator


[info]bee_charmer
[info]rp_tutorials
First of all, I'd like to start off this post by saying that you know me from such journals as [info]ambancroft, [info]hrstanton, and [info]colloquialisms; however, from now on, I'm just going to post using this journal to avoid confusion.

Today, I'm here to bring attention to a nifty little tool I discovered was linked to by a fellow roleplayer while participating in some forum roleplay on GaiaOnline.

Dec. 19th, 2010


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

Character Playlist: Combining Techniques


[info]wastintime
[info]rp_tutorials


Want to make a playlist that has the songs embedded (via YouTube)?
Want to add formatted caption text, too?

Here's how! )

Dec. 17th, 2010


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

Videoless YouTube Player


[info]wastintime
[info]rp_tutorials
Do you want your YouTube player without the video?

For example:


Here's How... )

Apr. 29th, 2010


[info]squidtastic
[info]rp_tutorials

[info]squidtastic
[info]rp_tutorials

[No Subject]


[info]squidtastic
[info]rp_tutorials
We all know HTML can be a tricky beast, so now it's been broken down for you. Welcome to another resource of information. Hopefully you find it as lovable as we do. :)

How to Tame your HTML )

Apr. 20th, 2010


[info]fuckabees
[info]rp_tutorials

[info]fuckabees
[info]rp_tutorials

[No Subject]


[info]fuckabees
[info]rp_tutorials
I have a question about how to do the parentheses-less cut-tags. For example, the entry would look like this on the friends page, but when you click the link it takes you to the entry itself, like so, so that the "cut tag's" text is part of the entry. Anyone know/have any suggestions? Thanks in advance!

Jun. 3rd, 2009

[info]heartscale
[info]rp_tutorials
[info]heartscale
[info]rp_tutorials

how to: make an image map

[info]heartscale
[info]rp_tutorials
if you're like me, you've seen people have an image with several different links in different sections of it and wondered, how the hell did they do that? )

May. 5th, 2009


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

[Code] The "Magic Click"


[info]wastintime
[info]rp_tutorials
Example #1
 
 
 
click me!

Note: If this demonstration shows up as three icons in a column or clicking on the initial image does not cycle through three images in total, this HTML trick does not work in your browser. :(

code for Example #1 )

a MUCH more complex example )

That was all pretty nifty, eh? But what is this "magic click" code and how does it work?

verbose explanation of how it all works )

the magic snippet and Example #2 code )

Mar. 25th, 2009


[info]wastintime
[info]rp_tutorials

[info]wastintime
[info]rp_tutorials

Make your game's Contact List more accessible


[info]wastintime
[info]rp_tutorials
Contact List Tips )