Post by Joker on Jul 2, 2016 16:04:28 GMT
We use code definitions to specify how we want the text to appear; and commands to start and end sequences where we'd like the text to have certain characteristics, like colour, font size and font face. In other forums, I have inserted the definitions in the layout templates' forum wrapper, so that I don't need to specify them each time (we may do that in a later lesson), while here, it is necessary.
Open a second version of the forum, go to your custom page, open it in the edit page mode, add a new widget, choose HTML box and type the words "insert text here". Click on Save.
Open a third version of the forum, go to your custom page and open it in the view page mode to see your progress. For each time you add something in the "edit" mode, you must refresh the page in "view" mode to reflect the changes.
Now, we want to define our font size parameters, so our definition will look like this:
<!DOCTYPE html>
<style>
p {font-size: 1.400em;}
h1 {font-size: 1.800em;}
</style>
The commands normally have a start (<...>) and an end (</...>) version. We can call our font sizes whatever we like, but they are normally expressed with p (normal size) and h1, h2... (indicating increasing sizes).
A typical simple font command string may look like this:
<font color="red">
<font face="comic sans ms">
<p class="normal">
insert text here
</p class="normal">
</font face="comic sans ms">
</font color="red">
Go to your widget, open the HTML box, copy the definition and the command string above; and paste it in Line 2 below the text in Line 1. You open a new line by placing your cursor behind the last character and pressing "enter". Check the result in the view mode.
Here is a different command string:
<font color="green">
<font face="impact">
<h1 class="normal">
insert text here
</h1 class="normal">
</font face="impact">
</font color="green">
Open the same widget and insert the new command below the previous one. Check the result in the view mode.
Control that you have the correct result by opening my custom page (preferably in the view mode).
Hint: Make sure that you select font faces among the 8 that are supported by ProBoards. Good luck!
Open a second version of the forum, go to your custom page, open it in the edit page mode, add a new widget, choose HTML box and type the words "insert text here". Click on Save.
Open a third version of the forum, go to your custom page and open it in the view page mode to see your progress. For each time you add something in the "edit" mode, you must refresh the page in "view" mode to reflect the changes.
Now, we want to define our font size parameters, so our definition will look like this:
<!DOCTYPE html>
<style>
p {font-size: 1.400em;}
h1 {font-size: 1.800em;}
</style>
The commands normally have a start (<...>) and an end (</...>) version. We can call our font sizes whatever we like, but they are normally expressed with p (normal size) and h1, h2... (indicating increasing sizes).
A typical simple font command string may look like this:
<font color="red">
<font face="comic sans ms">
<p class="normal">
insert text here
</p class="normal">
</font face="comic sans ms">
</font color="red">
Go to your widget, open the HTML box, copy the definition and the command string above; and paste it in Line 2 below the text in Line 1. You open a new line by placing your cursor behind the last character and pressing "enter". Check the result in the view mode.
Here is a different command string:
<font color="green">
<font face="impact">
<h1 class="normal">
insert text here
</h1 class="normal">
</font face="impact">
</font color="green">
Open the same widget and insert the new command below the previous one. Check the result in the view mode.
Control that you have the correct result by opening my custom page (preferably in the view mode).
Hint: Make sure that you select font faces among the 8 that are supported by ProBoards. Good luck!