Post by Joker on Jul 17, 2016 12:58:40 GMT
First, we have to set our definitions.
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,255,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,0,0.3);}
</style>
</head>
</html>
The six lines of number combinations represent different background colours. I have listed only six, but please feel free to experiment with others.
To choose one font size, font colour, font face and background colour, the command string may look like this:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,255,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,0,0.3);}
</style>
</head>
<body>
<p class="normal">
<font color="red">
<font face="comic sans ms">
<p id="p1">
This is where we place our text.
</p id="p1">
</font face="comic sans ms">
</font color="red">
</p class="normal">
</body>
</html>
Note that the entire code string is placed between <html> and </html>, the definitions go between <style> and </style>, which is a part of the content between <head> and </head>, while the commands should be between <body> and </body>.
Now, copy the string and paste it into a new widget on your customs page.
Optional exercise: Change the colours of your background and font to p2 and green.
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,255,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,0,0.3);}
</style>
</head>
<body>
<p class="normal">
<font color="green">
<font face="comic sans ms">
<p id="p2">
This is where we place our text.
</p id="p2">
</font face="comic sans ms">
</font color="green">
</p class="normal">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,255,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,0,0.3);}
</style>
</head>
</html>
The six lines of number combinations represent different background colours. I have listed only six, but please feel free to experiment with others.
To choose one font size, font colour, font face and background colour, the command string may look like this:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,255,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,0,0.3);}
</style>
</head>
<body>
<p class="normal">
<font color="red">
<font face="comic sans ms">
<p id="p1">
This is where we place our text.
</p id="p1">
</font face="comic sans ms">
</font color="red">
</p class="normal">
</body>
</html>
Note that the entire code string is placed between <html> and </html>, the definitions go between <style> and </style>, which is a part of the content between <head> and </head>, while the commands should be between <body> and </body>.
Now, copy the string and paste it into a new widget on your customs page.
Optional exercise: Change the colours of your background and font to p2 and green.
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,255,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,0,0.3);}
</style>
</head>
<body>
<p class="normal">
<font color="green">
<font face="comic sans ms">
<p id="p2">
This is where we place our text.
</p id="p2">
</font face="comic sans ms">
</font color="green">
</p class="normal">
</body>
</html>