tutorials
♥︎ add custom fonts
♥︎ make your own fonts
♥︎ positioning elements
♥︎ rotating elements
♥︎ changing the audio in a music player
♥︎ making a text or container scrollable

how to add fonts!

click on the images for visual steps

PRO STANDARD:
(option 1)
1. pick out your font then copy & paste the code into an embed
2. put your text in between the "> <"
(ex: <div id="id">text goes here</div>)
3. if this isn't included in the code, then copy & paste it under "</style>" and match the "id" to what ever the #id in your code is (you can also change it but they must match)

(option 2)
1. pick out your font then copy and paste the code into an embed
2. for the text you wanna apply the font to, click the gear on your text settings (at the top) and copy the ID (ex: #text01)
3. replace the ID in your code to the one from your text & type whatever u want in the text!

PRO PLUS:
(option 1)
1. pick out your font then copy & paste the code into an embed
2. copy the style id from your code and into your text settings (or vice versa)

(option 2)
1. pick out your font then copy & paste the code into an embed
2. put "font-family: name of font;" into the style settings of your text

back to tuts

how to make & download fonts!

click on the images for visual steps

_{you will need a dropbox account to do this! no, you don't have to pay}
it's best & most recommended to do this on desktop

1. find a site where you can download fonts for free, a popular one is dafont.com which i will be using here
2. download any font you come across that you like
3. open your files app, if the folder with the font is zipped then unzip it (this process is different depending on your device, i suggest following a yt video)
4. upload the .otf or .ttf file from the folder onto dropbox
5. once it's done uploading, copy the link & replace the 'www.' to 'dl.' & delete the '?dl=0' at the end
6. set up your code, giving it a @font-face, style #ID, naming your font, & inserting the link (example in the pictures). make sure your font-family under the ID and font-face match!!
7. if needed, add div tags. tutorial for adding custom fonts into carrds is here

! STEP 3 IS NOT PICTURED !
this step is different for everyone

back to tuts

how to position elements!

PRO STANDARD:
1. insert what ever code you're using into an embed
2. in your style settings (under the ID), copy & paste the following:
position: relative;
z-index: 100;
top: 10px;
3. you can change 'top' to bottom, left, or right. whichever one you put, the element will be pushed from there
to specify:
top = element will be pushed downwards from the top
bottom = element will be pushed upwards from the bottom
left = element will be pushed rightwards from the left
right = element will be pushed leftwards from the right
4. you may also play around with the number (after the direction) by making it bigger or smaller depending on how much you want the element pushed, do not delete the 'px'

how to rotate elements!

PRO STANDARD:
(option 1)
1. create a code with your element (i'll be using text)
2. under the ID add this:
transform: rotate(-20deg);
3. play around with the number! if you wanna rotate your element the other way, remove the - in front of it (ex: 20deg)

(option 2)
1. match the ID of your element from advanced settings to a code
2. add transform: rotate(-20deg); under the ID in the code
3. publish it and change to your liking!

how to change the audio in a music player!

_{you will need a dropbox account to do this! no, you don't have to pay}
it's best & most recommended to do this on desktop

1. copy the link of a song/audio you want from youtube
2. paste the link onto this site & download it to your device as an mp3
3. upload the song file into dropbox
4. copy the link & change the 'www.' to 'dl.' & delete everything past mp3 at the end
5. paste your modified link into the audio source of your music player & you're done!

dropbox links don't work with glenthemes music
players anymore, check here for different ways to
apply music to them

back to tuts

how to make text & containers scrollable!

click on the images for visual steps

PRO STANDARD:
for text:
1. set up your embed as you would a usual text
2. match the style ID to the one of your text
3. add the following under your style ID -
overflow: auto;
height: pick your desired height px;
width: pick your desired width px;

for container:
1. set up an embed similar to the one for text
2. match the style ID to the one of your container
3. add the following under your style ID -
overflow: scroll;
height: pick your desired height px;
width: pick your desired width px;

PRO PLUS:
for text:
1. set up your text & add the highlighted content from the pro standard tutorial into your style settings

for container:
1. place a container and under your style settings add the highlighted content from the pro standard tutorial

how to put a border on your elements!

~ this looks best on containers & images
but works on mostly everything!

PRO STANDARD:
1.
2.
3.

PRO PLUS:
1.
2.
3.

back to tuts

how to put a border on the top of your page!

this works on carrd free & pro

1. set the background of your carrd as an image & insert the picture you want
2. set position to top
3. set tile to horizontal
4.the size setting isn't important but you can mess with it until it fits your liking

back to tuts

LINKS ~
some links to other carrds & resourceful sites!

coding

codecademy • w3schools • js free code • pastebin • codepen • stack overflow

---

carrds

fitz • yokai • neogeo • watermelon • sweetie • hauntedmansion • xyz • pochi • vampy • marigold • floras • noodles • love • rico • himiko • lifted • gardenia • resource • hatecrime • pix • html • mist • swan

---

misc

symbols • punycode • hex codes • gif compressor • dafont • google fonts • mf2fm • responsinator • butter

---

graphics

tomomi • jasmine weebly pixels • gifs 4 carrd • cursors4u • pixel buttons • graphic effects • cute cursors • pixel diary • pix • pixelbank • charm