glass // free customizable pet profile templates

ping group for important template updates + new releases

Hello! I am offering a free, customizable pet profile template called GLASS. This template is clean and simple with a "frosted glass" pane in the middle that complements many different backgrounds. You can easily add and remove many sections, making it as minimal or full as you wish - great for anything from spotlight pets to simple brainstorming pages.

NOTE: The clickable examples are outdated and will be updated as soon as possible. In the meantime, the templates themselves are still accurate to what is shown in the photos!.

clickable live examples: left - default, right - customized

All default code comes with a silver background and turquoise accent color.

v1. Original. Add a background for a clean, professional finish. Features: Many sections, heavy shading outside glass panel. Good for light-medium backgrounds & spotlight pets. Default includes all available sections. Shown customizations: (1) repeating bg; (2) sections removed, fixed background, top margin increased.

v2. Minimal. Features: Few sections, minimal shadows. Good for character repositories & blank/default pets. Default hides most available sections.

v3. Floating (No Pane). Default includes most available sections. Features: Removed glass pane, heavy shadows outside card sections. Good for darker backgrounds & spotlight pets.

INSTALLING THE DEFAULT TEMPLATE

Step 1. Copy the following code into your pet's description:


<style>
</style>


CREDITS


profile template (c)  (get it)

other credits go here

information
Come back later, I'm a work in progress.

Step 2. Choose the CSS of the version you want: V1. ORIGINAL, V2. MINIMAL, V3. FLOATING. COPY the css from that file, and PASTE it between the style tags in your pet's description.

Step 3. Make any changes you want to the base code, but don't remove my credit! Make sure to add any outside credit (including art, backgrounds, etc.) to the cred div. YOU MAY GET RID OF THE FLOATING CRED DIV so you don't have that floating in the corner (do this by deleting the HTML that says "div id="cred," the tags around it, and all it contains) BUT! If you do so, please add your credits in the pet description somewhere.

Step 4 (optional). Join my ping group # sophtemps for new templates and updates/fixes to existing templates in case they break.

I will provide further instructions below for common base template edits you might need. You will find comments in the code that correspond to each how to.

how to: add/remove sections

Sections you can easily add or remove: , .pet_spotlight, , , (overlay), h2 (all headers).

To remove specific headers, for example, from the treasure, use h2.

For templates v1 and v3: These come with all the sections. To remove a section, set it to display: none, like so: { display: none; } To remove multiple sections, separate them with a comma: , { display: none; }

For template v2: The sections are hidden automatically. To show a section, DELETE it from this code: , .pet_spotlight, , , , h2 { display: none; } So, if you wanted to show only the pet spotlight, but keep everything else hidden, just delete .pet_spotlight, (including the comma after it).

HOW TO: CHANGE BACKGROUND IMAGE/COLOR

Each template automatically comes with this code:

/* change background image/color */
body, html {
background-color: silver;
background-image: url("");
}

To use only a background color, change "silver" to a different color. You can also use a hex color picker to choose a specific color you want. For example, the hex code for white is , so the above code would look like:

body, html {
background-color: ;
}

To add a FIXED background image (the page scrolls but the background does not) (EXAMPLE), use the following code: body, html { background-image: url("URL OF IMAGE HERE"); background-size: cover; background-attachment: fixed; } Unsplash is a fantastic resource for beautiful, free to use images. Just be sure to credit the photographers!!

To add a REPEATING background image (EXAMPLE), find a free to use background (or one the artist has given you permission to use). It is good practice to put a background color underneath an image. Simple paste the URL to the image between the quotes to add it to the background. Some resources for seamless/tiling patterns: seamlesspatterns@tumblr, patternvomit@tumblr.

For a FIXED, REPEATING background image (the background tiles across the page but when you scroll it doesn't move) (EXAMPLE), just put the url of the tiling background into the default code and add background-attachment: fixed.

HOW TO: CHANGE THE ACCENT COLOR FOR LINKS, BOLD, ITALIC TEXT

Navigate to this part in the code:

/* change accent color */
a, a:active, a:visited, i, b, u {
color: ;
}

You can replace this color with any that you like. You can also do multiple accent colors. For example, with italic text, delete the i from the above code and give it its own color: /* change accent color */ a, a:active, a:visited, b, u { color: ; }

i { color: lightblue; }

HOW TO: CHANGE GLASS PANE OPACITY/COLOR (ADVANCED)

Navigate to the /*change glass pane */ part of the code. For the part that says background-color, the first three values are the amount of red, green, and blue; the last value is the opacity. 255, 255, 255 corresponds to white, and v1 and v2 use a default opacity of 0.65. v3 uses a default opacity of 0, since there is no pane. You can change this as you like; sometimes a higher/lower opacity looks better with a different background or background color.

HOW TO: USE AN IMPORT STATEMENT IF USING A DEFAULT TEMPLATE

coming soon!

Technical Stuff Below are a list of changes that have been made to the templates or might be forthcoming. They are small improvements that won't drastically change the layout. If you want to align your template with the changes, you can request that I publish the code fix or look at the css links provided in Step 02 of the default installation instructions to see what has changed.

changelog

03/17/2020 - (all versions) fixed links 03/18/2020 - (all versions) fixed treasure items being slightly off center (+ padding, - item size) 03/19/2020 - (all versions) added a nice default spoiler that matches, got rid of news notifications that messed up page alignment 03/21/2020 - (all versions) fixed the weird positioning of spotlight/minion within their containers; width to 100px and added 10px side padding from 120px no side padding; top padding 50px to top 25 and bottom 25, size from 64 to 60.

changelog TO-DO

- fix v3 to have less scroll at bottom? (not sure if the extra space is desirable or not)

Logged Out

glass // free customizable pet profile templates

Replies

information