Customize Your Profile

From the CouchSurfing Wiki, an informal workspace which anyone can edit.

TALK about this Page! [[1]] since it has been tweaked a bit an overview of countless vandalism!

Contents 1 Stand Out! 2 HTML (Hypertext Markup Language) 2.1 Formatting 2.2 External Links 3 CSS (Cascading Style Sheets) 3.1 Basics 3.2 Images 3.3 Little Icons 3.4 Scroll Bar 3.5 MapLoco 4 Conclusion 4.1 Output 5 Example Profiles 6 Helpful Sites

Stand Out!

---

Probably you've already been to someone's profile in CouchSurfing and seen some things in bold, different colors, line breaks, boxes, and asked yourself: "Gee! How did I miss those options!". But then, took a second look and discovered that they were NOT there. So here's a basic guide to make your profile shine.

HTML (Hypertext Markup Language)

Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big or small. To tell the browser that an "A" should be Bold we need to put a markup in front of the A. Such a markup is called a Tag. All HTML tags are enclosed in < and >.
Example:
This is an example of bold text, which when written in HTML is shown as

"This is an example of <strong>bold</strong> text."

As you can see, the start tag <strong> indicates that whatever follows should be written in bold. The corresponding end tag </strong> indicates that the browser should stop writing text in bold. Using / tells the browser to end the formatting.

Formatting

---

Make it Bold!

<strong>CouchSurfing</strong>

when using the <strong> tag, creates CouchSurfing

Make it Italic!

<em>CouchSurfing</em>

when using the <em> tag, creates CouchSurfing

External Links

---

To create a link to a website without having the URL displayed http://couchsurfing.com (which automatically converts into a working URL) a useful tip is to change the link into a descriptive word.

Check Out! <a href="http://en.wikipedia.org/wiki/CouchSurfing" target="_blank">CouchSurfing</a>!

when using the <a> tag, creates

Check Out! CouchSurfing!

href: contains the full URL to which ever file, profile or site you wish the user to access.
target: By default, links will open in the current window or frame. Therefore it is convenient to open in a new window. By inserting the following in front of target="" you can define how the link should be opened.

_blank - loads the page into a new browser window.
_self - loads the page into the current window.
_parent - loads the page into the frame that is superior to the frame the hyperlink is in.
_top - cancels all frames, and loads in full browser window.

Advice: Remember to always have closing tags</tag> as well as ending the value http://example.com with speech marks ("").

CSS (Cascading Style Sheets)

With bringing together CSS and HTML you can really bring your profile to another level, then just Bold and Italic text, which can look boring and mundane.

Looking at that small introduction above, you can see both CSS and HTML has alot to offer for trying to stand out in the sea of CouchSurfers. With little or no knowledge of Web Designing languages, you too can create something that is eye catching to those browsing your profile.

Basics

---

<div style="background-color: rgb(255,105,180); color: rgb(0,0,0); border: 2px solid rgb(255,20,147); 
font-family: Verdana; font-size: 16px; "> Visit my really Cool <strong>Profile</strong> 
where you will find more helpful examples of <em>text boxes</em>. </div>

The break down is simple. With using RGB colours, Pixels and Border styles you can customise your profile.
1. background-color: Background Colour of the division (div).
2. color: Font Colour of the text.
3. border: Split into 3 values. Border width in Pixels ... Style of the Border ... and the Colour.
4. font-family: Style of the Font.
5. font-size: Size of the Font.

CSS is designed in a way as property:(colon)value;(semi-colon) simply change the value of the property.
Cascading Style Sheets (CSS) Wikipedia

Images

---

You can add images along with the text in your profile by using the html img tag. You must specify a src attribute that is a URL that identifies the image you want to embed in your text. For example, you could put a no smoking sign in your profile:

My couch has a strict no-smoking policy ... sorry!  
<img border="0" src="http://www.nottokids.ca/ntkbeta/Images/Retail/No Smoking.jpg" />

This would look like:
My couch has a strict no-smoking policy ... sorry!
You can find out the URL of any image you see in your browser by right-clicking on the image and selecting the property menu option. Look for the text that starts with http, and copy that. You can use any image you have on your local computer by first uploading it to your CouchSurfing profile, then browsing to it and copying its URL as described here.

Use the CSS float attribute to specify that your text should wrap around your image to the right or left. Otherwise you'll end up with a lot of empty space next to your image. Here's the code using the float attribute:

My couch has a strict no-smoking policy ... sorry!
<img style="border: 0px solid rgb(0, 0, 0); float: left; margin-right: 4px; margin-top: 4px; margin-bottom: 4px;" 
src="http://www.nottokids.ca/ntkbeta/Images/Retail/No%20Smoking.jpg">

You can also combine the img tag with the html a tag described in the previous section to make your image a link you can click on. For example:

My couch has a strict no-smoking policy ... sorry!
<a href="http://en.wikipedia.org/wiki/Thank_You_for_Smoking" target="_blank">
<img border="0" src="http://www.nottokids.ca/ntkbeta/Images/Retail/No%20Smoking.jpg">
</a>

Little Icons

You can use these icons to provide quick, visual info about your couch.

• Image:Nosmoking.png No Smoking –

   <img width="30" height="30" src="http://wiki.couchsurfing.com/public/images/3/34/Nosmoking.png" />

• Vegetarian –

   <img width="28,47" height="30" src="http://wiki.couchsurfing.com/public/images/2/2f/Vegetarian.gif" />

• Image:Gayflag.png LGBT/friendly –

   <img width="48,81" height="30" src="http://wiki.couchsurfing.com/public/images/7/76/Gayflag.png" />

• Vegan –

   <img width="30" height="30" src="http://wiki.couchsurfing.com/public/images/6/65/Vegan.gif" />

• Children/Welcome –

   <img width="30" height="30" src="http://wiki.couchsurfing.com/public/images/4/46/Children.jpg" />

Scroll Bar

---

With information becoming a key factor in becoming a good CouchSurfer, more detail is required in your profile. But because of this it is helpful to condense information into smaller boxes with scroll bars. Wouldn't it be great to have your life story within a small box? Like this...

As this may look complex to do, it is very easy! In its simplicity you are defining the width as being 100% across the screen, so if you re-size the browser window, so will the width of box. With the height you are specifying a length in Pixels to be whatever value you think is best suited. For this example I used 100px.

<div style="width: 100%; height: 100px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#000000; scrollbar-darkshadow-color: #6F4709;
scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">Content Here...</div> 

Then insert what details you would like about yourself where Content Here is displayed.

All of the color values for scrollbar-face-color will only render in the IE browser. If you're using Firefox or Opera for example you won't see the color changes.

MapLoco

---

Do you want to know where all your visitors to your site are coming from? Well why not try MapLoco. For example following this link Here, and you can see all the visitors to the CouchSurfing Wiki.
It's easy follow the setup instructions on the site, and voilà! there's a map on your site.

Conclusion

So with all the knowledge we have from the tutorial, this how you put it into practice. If you Edit your profile and then Description you will see the editable boxes where you can input your personal data. By simply adding what you have learnt to the boxes you can start to make your profile look professional.

All about you

<div style="position: relative; top: -40px; "> <div style="background-color: rgb(255,105,180); color: rgb(0,0,0); border: 2px solid rgb(255,20,147); font-family: Verdana; font-size: 11px; "> ::1st Box:: This is an example of a 1st information box, whereby you enter information about yourself. Maybe here you could input how you are trying to improve your involvement with CouchSurfing? </div> <div style="background-color: rgb(255,100,100); color: rgb(0,0,0); border: 3px solid rgb(255,20,147); font-family: Verdana; font-size: 11px; "> ::2nd Box:: This is an example of a 2nd information box, whereby you enter information about yourself. Maybe here you could input personal details such as interests or hobbies? See how I have changed some minor details to show a different output. These being the size of the <strong>border</strong> and <strong>background colour.</strong> </div> </div>

Output

Example Profiles

Here are a few examples of profiles which have taken the time to add Content as well as Style to their profile to show their commitment to the CouchSurfing Project

Kiltboy69
butidontlikecarrots
Stoemp
Running Man
Magic Pat Marker
TOTA and FHEIN - customized couchsurfing style!

Helpful Sites

Cascading Style Sheets: CSS
Cascading Style Sheets: Properties Cheat Sheet
Hypertext Markup Language: HTML
Red, Green and Blue Colours: [ rgb(0,0,0) ]