The 39 Clues Message Board Wiki

Filter Posts Reset

Categories

Sort By

  • All
  • Following

Message Wall Greetings, and how to make them

Upon the closer inspection of several user message walls, you may find various greetings embedded into their pages.

My greeting. A couple of years ago, I made a tutorial based around the creation of one of these, albeit in such a badly-formatted state I'm surprised at myself for even posting it without articulating certain base points.
Regardless, such a greeting is quite cute (and will make you seem incredibly pro in the long run despite it being really quite easy to make) so if you do want to make one, here's how:
1) Create a page called: Message Wall Greeting:Your username here (e.g. Message Wall Greeting:ReadingLavender9). It should be blank. Click on "Edit the page!".
2) Following this, you can basically do whatever you want to the page itself; any text/picture/code will appear on the panel above your message wall - this is basically where you can let your artistry run wild. However, this is where methods diverge, with two options available for you to use as vectors of creation.
OPTION A - simpler

Chu's message wall greeting created using option A. You can photoshop/draw/eq. your own message wall greeting on an external program (such as Adobe Photoshop), in which case you can just insert it as an image onto the greeting page itself (via. the right-hand editing panel) and be done with it.
OPTION B - challenging

Option B - despite it being called "challenging" - is still fairly easy to utiltise well enough to create a greeting as it involves the usage of simple coding; something that, in reality, is quite easy to learn.
As a result of this, you will want to go into source mode to ensure your code will work efficiently and, as a result, not be seen in your final product.

It should also be completely barren prior to you typing up any code on it which, post-edits, should look vaguely like those visible on my greeting (see left). Feel free to copy my code and alter it to your tastes should you wish to do so.
Now, to talk you through it:
- Code is almost always written in American English. Therefore, words such as colour or, in the instance above, centre become color  and center. Wikia will not register your code if it isn't in American English.
And line-by line ... (ignore the dots that separate the code from the brackets)
Line one: <.div style="border:5px solid yellow;padding:20px;border-radius:25px".>
"div" defines a division or a section in a HTML document (upon which we're building our message wall greeting on).
"border:5px solid yellow" states that the border must be 5px thick and be in solid yellow. Simple enough.
"padding:20px" defines the space betwen my border and the actual text I want displayed on my greeting.
"border-radius:25px" allow my borders to become rounded-edged. Deleting it would give you sharp edges.
Line two: <.center.>
"Center" allows for my greeting to stay smack-bang in the centre of a page and, as a result, not be askew.
Line three: <.font size="3" face="calibri" color="yellow">Welcome to the Moffat-filled world of Jane!.</font.>
"Welcome to the Moffat-filled world of Jane!" is the first bit of text I want displayed on my greeting; all other instructions handed to my computer for its final look are surrounding it.
"font size="3" face="calibri" color="yellow"" states that I was the aforementioned bit of text to be size three when displayed and be in the font calibri and be yellow. The quotation marks separate each piece of information within the brackets <> to ensure that the computer does not mess up any of the information and, thus, mar the final image of my greeting.
"b" represents bolding, with my request being that the text also be in bold. This is in a separate bracket.
<./b>.<./font> represents me finishing off this line of code; it acts like a period in a sentence, for instance.
Line four:<.font face="calibri"><.font color="yellow">Message wall - tell quickly if convenient. If inconvenient, tell anyway. Muchas gracias.</.font><./font>
This line is almost identical in terms of code to line three. This time, however, the text I want displayed is "message wall - tell quickly if convenient. If inconvenient, tell anyway. Muchas gracias" with no bolding. 
Line five: the code to my signature (which won't display properly in this post). Learn how to make one here[[ ]] . By no means is this necessary in a message wall greeting. In this bit of code, the bit displayed in my final greeting is "ReadingLavender9, souffle girl of 221B" and a timestamp, with surrounding bits of information symbolising it linking to my profile as well as typeface (see: papyrus) as well as colour (brown).  
Lines six and seven: <./center> <./div> As mentioned, these act like periods in a sentence, finishing off my code - in this case, it is used to tell the computer there is no further use for center and the div command beyond my greeting. And after this, taaaaadaaaaa! A message wall greeting :D
2 9

Adding Pictures on Articles

Hello guys, this is Jess speaking to you today on the topic of adding/editing pictures on an article.When you go to edit, hit the drop down arrow and click “Classic Editor” as the new editor will not always work for you, and it’s what I’m using for this tutorial.


On the top right hand side there should be two tabs. One should be called “Visual” and the other should be called “Source”. You should have defaulted to visual, but we’re going to go to source mode. On the far right, you should see the title “Add features and Media” and underneath is five buttons. Click photo.



Since most of you have avatars, I’m going to guess you all know how to upload photos. But if not, click the choose file button, choose a file and hit upload.


This is what should pop up once you hit upload. Usually, you put in what you want, it spits it out onto the page for you, and you’re done. But you can do so much other stuff with pictures than just the basics here. So add the photo using the basics, and I’ll show you how to change alignment, size, link things, and caption without using the default.
When I added the picture it gave me [[File:Tumblr_11.jpg|thumb]]
Size
Say you want to make the picture bigger. All you have to do is replace “thumb” with a number, let’s say “350px”
So you would then have [[File:Tumblr_11.jpg|350px]] Replacing thumb with a number and adding px (I believe it stands for pixels) will decrease or increase size.
Alignment
So you have your nice 350px picture, but its showing up on the left instead of the center, and you have no idea how to fix that. Here’s the fix: You’re going to add another one of these to your coding: |
If you have no idea where to find that, it should be under the backspace button. If not, your keyboard is weird.
[[File:Tumblr_11.jpg|350px|center]] should center the picture, if you want it to the right, you replace center with right. If you are worried about not getting any of these steps right, you can go back and look in the visual mode and switch back to source mode.
Linking
If you want someone to be able to click on a picture that takes you to another page on the wiki, you need to add another |

For example: [[File:Tumblr_11.jpg|350px|center|link=User:CobrastyleNinja30]] If I were to click on the picture, it would take me to my User page. You can do this with regular articles also.
You must have the "link=" part, or it will be a caption. You can have links and captions on the same picture.
Captions
Lastly, If you would like to add a caption, make another | and add what you would like to say.
[[File:Tumblr_11.jpg|350px|center|We must defeat the Huns]]
You will not be able to see the caption on the visual mode. If you publish, you will be able to see your edit. 


Then your final product is:
1 13