◆ 𝙝𝙩𝙢𝙡 𝙜𝙤𝙤𝙙𝙞𝙚𝙨 𝙗𝙮 ❷🎯❷

Swapping image URLs is pretty easy. First, locate the URL of the image currently in place. In my code, this is already pointed out by surrounding comments next to the URL.

Highlighted is the URL you will replace. When swapping, you will need the URL of the image you want to use. Make sure it is a valid URL (paste it into your searchbar and see whether you get led to the image itself - the URL is valid! - or to an error page - something's wrong with your URL).

Colors are slightly trickier because you will have to use color codes. A color code (either in hexadecimal or RGB format) is a specific code that translates to a specific color. This site contains a plethora of information about colors in HTML, as well as a color picker, which you should be using to find your color codes.

Like with URLs, my code should point out where color codes are used and can thus be interchanged to your liking. Highlighted is a hexadecimal code. Use the color picker provided to select a color you prefer, copy the hex code generated for you, and swap this highlighted bit out for your own hex code.

As mentioned, my codes have comments written out throughout them to show you where colors and images can be changed, but did you know that you can write your own, too? In general, comments are excellent for keeping notes about which pieces of your code does what, and if this would sound useful to you, don't be afraid to write out your own.

One of the great things about the latest HTML update is that the editor now preserves your comments exactly as you type them! Previously they would just disappear upon saving changes, which made commenting useless. To create a comment, follow the shown format: one left-facing bracket + one exclamation mark + two dashes opens a comment, and two dashes + one right-facing bracket closes a comment.

This slideshow supports three images exactly, adding more or less slides could break the slideshow. In the future I may plan to write versions for four images, five images, etc.

Don't want the floating black descriptions for a particular slide, or for all slides? Find and delete this highlighted bit of code to get rid of a slide's description box.

When hitting "Preview" and looking at the previewed box, the tabs may appear squashed or shortened. This is normal! Upon hitting "Save Changes", the tabs will appear normally. I have no idea why they do that in the preview.

You can add and delete tabs to your liking. Read the code and see that each tab has its own repeating section of code, as shown below; the highlighted bit represents one tab. Copy/paste this chunk of code to add a tab, or delete it to remove a tab.

You can change the position of the pagedoll. See the bit that says div class="float bl ani"? The bl part is short for "bottom left". You can swap this out for br (bottom right), tl (top left), or tr (top right). The ani part is short for "animated"; if you want your pagedoll to stand perfectly still and not bounce, remove ani and the space before it. e.g. div class="float bl" will get you the pagedoll bottom left without the bounce animation.

Don't need the speech bubble, just want the image? Simply delete this highlighted portion and this should get rid of the bubble. Make sure to not accidentally delete the second "div" tag.

When hitting "Preview" and looking at the previewed content, the hexagon may be aligned a little low. This is normal! Upon hitting "Save Changes", the hexagon will align normally. I have no idea why it does that in the preview.

Don't need the extra caption, just need the image? Simply delete this highlighted portion and this should get rid of the caption.