#html css text

[nickycodes]

age like fine wine - PT

I might be a little obsessed with Polaroid movie posters

5 pages to write on

minimum writing space, no scrolling at all (you can add them if you want, of course)

Very simple design

No gallery page

Link your friends' wall in 'relation'

1 OOG & Credit page

*When posting on wox sits, remember to click ‘save’ directly after pasting the code, don’t click the 'sources’ button again, it might break the code!

Please read the TERMS OF USE before using my code

Link: Notion

Pictures used in demo: old movies from Pinterest

[numbpilled-themes]

rareware roulette - abyssal/minimalist html nekoweb/neocities theme

LIVE PREVIEW DOWNLOAD

[trexv]

Matcha | Profile Text

Finally a new code from me!!

Profile Text

4 Pages (About, Looks, Aesthetics, Relationships)

Basic Info Column

Playable Spotify Music Embed

Price: $4

Link: Kofi Shop

Please lmk if you have any questions at all !!

[glossamerr]

Monkey king | profile text

This is for a personal request for a PT with more quick facts and less writing. This has lots of image slots and four pages. The about page might look a bit off in the codetester but it will be spaced correctly on site. Inspired by the black myth wukong game hehhe. If you use it, leave a like or repost. And I’d love to see what you do with it. Hope you enjoy!

Codepen: https://codepen.io/glossamerr/pen/MWNaNgK

Jsfiddle: https://jsfiddle.net/glossamerr/9fuc1d40/

[websgraphicscollections]

[leacodes]

lovisa

this is a special one to me :) it was originally made for just a small group of people, or rather their characters, a special occasion thing, if you will (love goes out to the gang <3)

well, after some time i figured... this one is too nice to just stay hidden in the catacombs forever :D

so here we finally are! i am sharing this code, that is very close to my heart, with you guys so you better cherish it! :P

this profile text has space for a sacrilegious amount of pictures (heaven to some, hell to others, i guess xD) and you can basically add as much content as you want to each of the pages, if you like tinkering :D

as it is published, the code contains separate pages for general relations and family. hey, some people have a lot of family! but if that isn't you, you can always change that family page to be a little backstory! or something else, that's entirely up to your imagination! (always feel free to ask with help on that one :D)

so, i think that's it! feel free to show me what you did with it, if you use it! i'm always curious :)

do not remove credit or claim as your own.

love, lea ♥

codepen

[dailypokemoncrochet]

Website for if you haven't seen it yet! :D

Updates since last time: more stuff on the about page, a chatbox, a kudos button, gallery pages for Pokemon I haven't done yet for more seamless navigating with prev/next buttons.

I still haven't figured out the PC box thing yet! D:

So far I've tried doing some pagination/tab combo. I got as far as making the prev/next buttons with number auto changing in the middle, but couldn't figure out how to make it so the correct corresponding tabs would appear.

Also tried doing iframes with each PC box being its own file. Put one on the homepage but couldn't figure out how to style it right.

[ultraviollettt]

Finally finished my Ao3 Workskin Generator Website. Please take a peek, this took forever, and I still want to finish the tumblr and twitter mockup generators:

[kiinaya]

How To Get Multiple Colors in a Text

warning this is might be long due to my over-explanation!!!

Some time ago I got a comment on my post asking how I got the color fading effect in my text and used non-default text colors, like the title above. I also got a few messages about this.

I swear wanted to respond sooner, but I completely forgot. When I finally got the time to reply, I noticed my response turned into an essay! So, I decided it would be easier to make a post instead, and if you're like me and are a visual learner don't worry I included images!

Also, I have ADHD and over-explain things. I realized that while drafting my reply, it came across as patronizing. So if I sound that way in this post, I assure you it's not my intention; I just tend to explain things in detail because I prefer having things explained to me like that with the smallest details addressed. I tried to make it super simple for those who are new to Tumblr.

Here is the website I used: https://patorjk.com/text-color-fader/

If you got how it works congrats, If not, and you're confused, feel free to read the steps I take when using it!

HOW TO GET THE CODE!

1.) The first step is to enter your text which is done here!

2.) Choose the number of colors you want your text to have. At least 2 colors are needed for your text to have a fade effect. For using just one color without fading, refer to 3.c.

3.a) Choose your colors from the presets which btw automatically change the number of colors used but you could simply change it.

3.b) If you would like to choose your own colors, ignore the presets and simply click on the color to edit the Hex code. Keep in mind that the order of the colors, as shown above, is the same order in which they will appear in the text when the code is generated.

3.c) To use a single color without any fade effect, set the color amount to 2, which is the minimum allowed. Then edit the two colors to have an identical hex code.

4.a) You can choose your Fade type using the below options. For this post, I will be using the horizontal fade type, as it's the one I prefer. I haven't explored the other options much, so feel free to experiment and choose whatever you like!

4.b) For the output code ALWAYS KEEP IT AS HTML when using it on Tumblr. Unless something changes with the website, HTML is the default, so you don't need to worry about making any changes.

5.a) Click the generate button at the bottom of the page to create the code.

5.b) This is how the results will appear with multiple colors and just one color. By default, the background color is set to black, but you can change it to white or another color to test how your text will look. This option can be found at the lower right side of the results, titled "View Against Background." (NOTE: The background color does not affect the code and is not included in the code itself.)

5.c) If you want to edit something, simply press the "create new fade" button at the bottom. Don’t worry; it won't reset anything; it will just take you back to the previous page!

6.) When you are okay with the results copy the code. To do this press the select all at the bottom right of the code. This will just highlight the code so you will need to either press ctrl c, ⌘ c, or whatever you do to copy text on your device!

NOW, HOW TO PUT THE CODE INTO TUMBLR!

7.a) Head over to Tumblr and create a post! Make sure you're editing using HTML by pressing the little setting button on the upper right side of your post.

7.b) Scroll down to the text editor. The default should be rich text. Press the dropdown and choose HTML.

7.c) Paste the code in the HTML editor. Then save it as a draft to make sure it looks good before posting.

8.) Here's how it should look. Be aware that the HTML editor does mess up your image placements a bit when editing, but that's an easy fix. You just edit the draft and drag the images back to where you wanted them, and it won't mess with the code.

POTENTIAL PROBLEM YOU MIGHT FACE

You might get a warning like this when using bulky paragraphs with color-fading text on Tumblr, as it wrongfully considers them to exceed the character limit. This warning doesn't appear for single-colored text. When I switched to a single color, the warning disappeared, allowing me to save my draft. When this warning appears, you will not be able to save your draft at all, which puts you at risk of losing all your work. What I usually do when I get this warning and am unable to save the draft is change the text editor, use HTML, and save the draft from there.

Please be aware of two minor issues with this hack: First, HTML can interfere with your images. If your images are stacked, that's fine; however, if they are side by side, HTML will change them to a stacked format. Second, the "read more" link will be deleted by HTML. While both issues can often be resolved using the rich text editor, you won't be able to fix them in this scenario because the rich text editor won't let you save the draft or post due to incorrectly seeing the character limit.

To work around this issue, I sometimes save the draft as HTML on my computer to bypass character limits. Then, I use the Tumblr app on my phone to adjust the image placement and re-add the “read more” link. This may not always work so just be aware of these potential issues!

That's it! If you have any questions, feel free to comment or message me, I'm kind of new at this too so bear with me!

PS, @angel-dustspo I’m so sorry for the late reply!!

[nickycodes]

Faerie of Light - PT

This was supposed to be a one-page PT... but I couldn't resist doing just a bit more

Basic information section

3 additional pages to write on + 1 oog & credit page

Quote section

Gallery section (scrolled horizontally)

Decorations here and there

Some different chart styles I've never used before!

Special cursor

Pink pink pink pink pink--

*When posting on wox sits, remember to click ‘save’ directly after pasting the code, don’t click the 'sources’ button again, it might break the code!

Matching backstory: HERE

Credits:

Pie Chart code copied from HERE

Grid pattern background code made using THIS website

Folder icon from free Canva element

Please read the TERMS OF USE before using my code

Link: Notion

Pictures used in demo: Elle Fanning

[flyingpoodlecodes]

Hi everyone! This took me a bit longer than usual, but it has a very nice aesthetic (idk how to describe it) and it's called Pink Roses. I basically filled it with a bunch of pictures of ROSÉ, who I think is a great singer!

There's lots of space to write and it has stat bars for personality and other things! It also has a "Basics" section, and it's a really great code! Remember, please don't remove the credits, however, you are allowed to edit the color to match your aesthetic (but please make sure it is still visible)! Enjoy this code!

Note: I was thinking about making a matching backstory code, so you should look out for that soon! (If I make it ;D)

Link: pastebin

[codingflicks]

CSS Animated Text Overlay

[trexv]

Lumos - Lesson

another one :) video quality ruined it but i hope you can get the idea! had fun trying new things w/ this one

Lesson

1 Page (includes image slot w/ a note, assignment, and requirements boxes)

Light effect that follows your cursor

Old parchment-style code

Link: Kofi Shop

Price: $2

[glossamerr]

ID | Profile Text

Enjoy. (Matching backstory)

Codepen: https://codepen.io/glossamerr/pen/VYLvELM

Pastebin: https://pastebin.com/HrE9Wwji

Make sure to hit publish after you paste the code onto site, DO NOT click source again as it will mess up the spacing.

[codenewbies]

Text Typing Effect

[g8d]

distributing digital books as pdf files (only) is an abuse of the medium