r. images + background-color

Hello. Sorry for not doing the requested tutorials in order... orz. They're too complicated for me to deal with right now since I'm sick *sniffles,* but I'm also bored. So here goes a quick, easy tutorial that hopefully makes sense: images + chaning background-color. This was requested by CATlyInLuv25. I hope this helps!

Inserting and Image/GIF

This is actually quite easy and simple to do, all you need is an image and some a very basic html tag.

First, choose which image you'd like to use. For example, this:

In order to insert this image, I used the following format:

< img src="imageurlhere" >

Quite simple, right? And if you want to add a border, just add: style="border: 1px solid #000;", like this:

< img src="imageurlhere" style="border:1px solid #000;">

And then customize it to your liking! You can always re-size it in the original editor mode by double-clicking on the image. Make sure to press the lock icon in order to keep the original proportions!

This works for gifs and images, so if it doesn't work, you must have a problem with your code, so make sure to check that out if the image isn't appearing. It's either that, or the image's hosting site is unavailable.

Now, for the next part of this tutorial...

Changing the background-color

This is also an easy thing to do, as long as you know how to navigate through the source code and find the correct div. I'm going to use on of my own layouts (sugar) to show how to change this.

First, insert the code of your layout. In this case, this.

min yoongi

rapper

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.

Delightful

Now, there is only two 'background-color' in this, so finding the correct one won't be difficult. If you can't find it, just use ctrl+f to do so.

Now let's say I want to make the blue part pink, and the background a lighter grey (gray?). In order to do this, just go to your background-color:#(hexcolor) and add a new color. Since the code uses 'hex' colors, be sure to enter a 6-digit (or 3-digit in some cases) number where the previous one was. I usually use this website whenever I need colors: http://html-color-codes.info/

For the colors, I chose #FFD0D0 and #FEFEFE.

The first color goes into the second div with background-color (the one inside everything, with an image and 'min yoongi' inside), and the second one is the second line down.

Now, my layout should look like this:

min yoongi

rapper

Delightful

And ta-da! The background has now changed color! If you don't like how it turned out, just continue to replace colors until you find something you like. ^^

I'm literally dying right now... sed hep..

← Previous Chapter Next Chapter →

Comments

You must be logged in to comment

Lost_Pharaoh #1 Jul 13, 2020 17:31:04

Chapter 5: I am still really confused on where to put the codes

aristarchus #2 May 7, 2018 04:06:38

Chapter 5: hi !! ahh so glad to hear that you're thinking of returning. this thread has helped me so much,, welcome back :-)

seungjjang #3 Dec 27, 2017 11:39:29

Hi! Your tutorials are easy to understand and helps me with coding in aff..so thank youu<3
And I have a question...do you know why this: https://imgur.com/a/Ajlnx happens?
Just wondering if you've encountered a problem like this.. ouo;

mochiji #4 Aug 26, 2017 19:45:16

ajndaj im glad ur back :')

Iamdead #5 Aug 23, 2017 12:32:38

woHOOo MAyBE Now i cAn uNdErsTAnd SUch a ThInG as CodINg
daNK yOU So mUCh <3

seonho #6 Aug 21, 2017 15:54:07

Chapter 16: i am So Damn Glad ure back

_SakuraRoleplay_ #7 Sep 10, 2016 14:53:10

Chapter 15: haaalp~ T.T i'm trying to do that horizontal scroll with bigger size but i can't do it T.T