Character Cloud - Resources

Steven Strait Gif Pack

Sat, 13 Jul 2024 14:50:29 -0700

Below is a gif pack containing 103 gifs of Steven Strait cut from the Expanse.

Please don’t add them to your gif hunts. Add a link to this post, sure. Dandy. Do it up. You can use them as bases or edit them for whatevers, but please link back when and where you can, and if you create anything with them, personal use or completely free for the rp community.

You may also find these on tumblr:

Episode One

Episode Two

Please, rehost!
Pretty, please!
Do not direct link my images.

Infobox

Wed, 10 Jul 2024 19:19:43 -0700

WIP - will add to this later. Gotta figure out why it isn't showing here.

Amber Rose

Basic Information

Name:

Amber Rose

Birthdate:

5/23/2004

Hometown:

Denver, CO USA

Zodiac Sign Astrology:

Gemini

Relationships

Partner:

Hazel Rose

Family:

Gloria Rose (Mother/Deseased)
Herbert Rose (Father/Deseased)
Jeremy Rose (Brother/Deseased)

Friends:

Code:
[infobox=Amber Rose][infoimg]https://images.rpgcharacter.cloud/images/2024/05/16/alt_bgdark.jpeg[/infoimg]

[cat=Basic Information][line=Name:]Amber Rose[/line]

[line=Birthdate:]5/23/2004[/line]

[line=Hometown:]Denver, CO USA[/line]

[line=Zodiac Sign Astrology:]Gemini[/line][/cat]

[cat=Relationships][line=Partner:]Hazel Rose[/line]

[line=Family:]Gloria Rose (Mother/Deseased)

Herbert Rose (Father/Deseased)

Jeremy Rose (Brother/Deseased)[/line]

[line=Friends:][list][*]TBD

[*]TBD

[*]TBD

[*]TBD

[*]TBD[/line][/cat][/infobox]

Basic Trait Bars

Wed, 10 Jul 2024 19:14:54 -0700

I will add to this.

Courage

Strength

Intelligence

Street Smarts

Survival Instinct

Code:
[bar=Courage]80[/bar]

[bar=Strength]72[/bar]

[bar=Intelligence]54[/bar]

[bar=Street Smarts]88[/bar]

[bar=Survival Instinct]76[/bar]

Responsive Gallery

Wed, 10 Jul 2024 18:56:21 -0700

Responsive Gallery is a MyCode that has a simple design and makes use of the modal windows used throughout the site. This code serves as a base that can be used on its own to create a sleak, multi-column look or combined with other coding to create something to match an existing skin.

First create a gallery container and then insert a galleryimg.

Code:
[gallery][galleryimg][/galleryimg][/gallery]

The galleryimg MyCode requires a few things to work properly.

Identifier - This is used in the CSS to make the modal pop up. It should be a unique single word with no spaces or special characters; hyphens allowed. Examples: 001, 002, 003; One, Two, Three; John-01, John-02, John-03
Image Url - This is used to generate the thumbnail and larger image. For the person that posted the character, this will show in the modal window.
Alt Description - This is used to generate a description of the picture that could be used by readers or accessibility devices to describe the image. This should be a short, literal description of the image when able.
Caption - This is used for the more character relevant description of the image and what it means to your character.

[galleryimg=Identifier,img url here,Short literal descriptions for readers]Image caption goes here.[/galleryimg]

Tip: If your gallery looks like it is spaced incorrectly, it may be because the coding has line breaks. You can condense the code manually or you can use the dohtml MyCode to collapse it for you.

[gallery][galleryimg=Identifier,img url here,Short literal descriptions for readers]Image caption goes here.[/galleryimg][galleryimg=Identifier,img url here,Short literal descriptions for readers]Image caption goes here.[/galleryimg][galleryimg=Identifier,img url here,Short literal descriptions for readers]Image caption goes here.[/galleryimg][/gallery]

[dohtml]
[gallery]
[galleryimg=Identifier,img url here,Short literal descriptions for readers]Image caption goes here.[/galleryimg]
[galleryimg=Identifier,img url here,Short literal descriptions for readers]Image caption goes here.[/galleryimg]
[galleryimg=Identifier,img url here,Short literal descriptions for readers]Image caption goes here.[/galleryimg]
[/gallery]
[/dohtml]

You can use html around each galleryimg if you would like to add things like image titles or if you want to add a caption under the thumbnail.

Code:
[gallery]

   John's Prom

   [galleryimg=John-01,http://placehold.it/100x100,Young dark haired male with acne making a face like something stinks and holding his hand out to try and block the camera shot]John wasn't super jazzed about prom, but his mom made him take pictures anyway.[/galleryimg]

   John wasn't super jazzed about prom, but his mom made him take pictures anyway.

   John on the Beach

   [galleryimg=John-02,http://placehold.it/100x100,Dark haired young adult male jumping in the air toward the volley ball flying over the net]John loves to build sandcastles and play beach volley ball.[/galleryimg]

   John loves to build sandcastles and play beach volley ball.

   John's Sunburn

   [galleryimg=John-03,http://placehold.it/100x100,An animated gif of a dancing red lobster that has the face of a mid twenties male with red, sunburned skin digitally added on top]John looked like a lobster because he forgot his sunscreen.[/galleryimg]

   John looked like a lobster because he forgot his sunscreen.

[/gallery]

John's Prom

John wasn't super jazzed about prom, but his mom made him take pictures anyway.

John on the Beach

John loves to build sandcastles and play beach volley ball.

John's Sunburn

John looked like a lobster because he forgot his sunscreen.

The modal can not be edited in the same way. You may make used of pseudo css elements to create additional text or styling in the windows if you would like.

(I will add the preview and such later.)

In the codes section, you will find the HTML and CSS that are generated when using the MyCode. You are welcome to use the HTML instead of the MyCode.

<section class="gallery-wrap">
<div class="galleryimg">
<a href="Identifier" class="open-modal" data-selector="#pic-Identifier" rel="modal:open">
<img src="Image Url" alt="Alt Description" class="thumb"></a></div>
<div id="pic-Identifier" style="display: none;" class="galimg">
<img src="Image Url" alt="Alt Description" class="inner">
<span class="caption">Caption</span>
<span class="glnk">
<a href="Image Url" target="_blank" rel="noopener" class="mycode_url">Image Url</a>
</span></div>
</section>

Basic Character Sheet

Thu, 04 Jul 2024 20:28:17 -0700

Hi. I am working on getting this setup. I am not sure how I want to style my resource posts just yet, so I'm leaving this blank for a minute.

I plan to extend this code as I develop gallery and tracker templates, but I wanted to get this part of it up for use as soon as possible for the beta open.

This template will be expanded soon! (I will also add documentation for the skin when I figure out how I want to format it.)

--ch-portrait-png is best used with a transparent png of your character. If you are unable to cut out a png yourself, you can use a service like remove.bg(external link) to do it for you!