Editing Your AB Profile

Many people want to know how to change their profile page, to include pictures, text about themselves, and other things.

You can use some HTML tags to "prettify" your profile. You cannot use an external or internal  stylesheet to do so... Each element must be tagged. However, as in many blogs and emails, you do not have to enter anything BUT those elements you wish to change/add.

1. Go to your profile.

   1. Click the blue button that says "View my profile and activity" under your username, in your user information box:

      
      (my user info box)

      on the top right side of the screen.

   2. Click "Edit my profile/avatar", just below the right end of the big blue GO button (just to the left of your user information box).

      
      (arrow points to link)

       

   3. This will take you to a screen with the following on it:

      
      (Edit profile screen)

       

2. In the About Me box, you will enter the information you wish the "world" to know about you. It will appear at the top of your Public Profile page, following the question and answer box. Here are many of the things I did to my profile:

   <div style="margin: 0; font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif; font-size: 1.25em; color: #005500; background-color: #f0fff0;"><div style="float: left; padding: 0 .3em .5em .0; margin: 0;">
   <img border="solid 1px #006600" src="[URL of web location of image]" alt="[title for picture]" width="191" height="300" /></div>
   <div style="font-size:1.50em;font-weight:bold;">About me</div>

   CONTENT

   </div>

   You can cut-and-paste the above and modify for your own profile

   Please note: Almost all HTML tags have an opening and closing. For example: DIV tags (<div> and </div>). The <div> opens the division of the page, and the </div> closes it.  Also note that I have two <div>s embedded within the whole page/profile <div>, above: One to control the image position and formatting, and one for my "About me" header.

   Here's what everything does:

   1. GENERAL PROFILE - The first few lines of the above (the first DIV) will do the following, starting from the left:
      1. style="[attribute codes]" tells the webpage to define this DIV statement with THIS style. Each code is separated by a semi-colon (";"),
      2. [attribute codes]
         1. margin: 0; - This forces margins to be 0, turning them off. This will ensure your whole section of the page is done as YOU wish it to be. There will be no blank lines before your section, nor will there be any extra margins on the left or right.

         2. font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif; - This is telling the user's browser that I want to use these fonts, preferably in this order. If the user doesn't have "Comic Sans MS", then it will look for Arial. If they don't have Arial, it will look for Helvetica. If they don't have any of them, it will look for their default "sans-serif" font, and use it. There are literally hundreds, if not thousands of fonts in internet-land, and not everyone has the ones YOU want your page(s) to use. The list of "safe" fonts (installed on both PC and MAC) is:

            arial, arial black, comic sans ms, courier, courier new, georgia, helvetica, impact, palatino, times new roman, trebuchet ms, verdana.

            Source: list of safe fonts for use on a html webpage New Window

            See the following page for more on fonts: HTML - Fonts New Window

         3. 1.25em; - This code is telling the user's browser to display the font at the defined size times 1.25, or 125% of the size defined for the page. I did this because I felt that AB's font size for the profile is much to small for many people to read.
         4. Colors are denoted in HEXIDECIMAL format - #RRGGBB (RR=Red, GG=Green, BB=Blue). My page uses MY preferred color. It's the color of my website. If the browser cannot handle 005500, it will display it in a color as close to it as it can get. Select a color scheme to use. While not necessary, if you want your page to have different colors than the default black on white, go to WellStyled - Color Scheme Generator 2 New Window, pick a color scheme (click on the color wheel), use the colors at the top right, copy-and-paste your selected color's hexidecimal code in place of my colors.
            1. color: #005500; - This tells the user's browser to display the fonts used in the dark green you see on my profile (and here).
            2. background-color: #f0fff0; - This tells the user's browser to make the background of the DIV the light-green you see.
      3. The ">" tells the browser that this ends the opening (page's) <div>. NOTE: The END DIV (</div>) is the last one on in the above box, after CONTENT (See #2.e, below).
   2. ADD IMAGES TO PROFILE - The next section is my picture. I defined a DIV to position it where I wanted, and put the picture in IT. The HTML for graphics and pictures is <img>. Note that <img> does NOT have a close tag. Because of the way some browsers work, the /> at the end of it closes it correctly. If you don't put the slash, I believe AB's code will. Here are the codes for the <div> statement. As above, the style="[attribute codes]" tells it how to display this DIV:
      1. float: left; - This tells the browser to float the image to the left. You can also float the image to the right (float: right;), but you will want to reverse the left/right side padding, below. You may also center your image. You can do this by, instead of the float attribute, use "text-align: center;". It sounds funny because you're doing this to an image and not text, but this is the standard HTML code to center things, left and right.
      2. padding: 0 .3em .5em .0; - This is telling the browser to put a bit of spacing around the picture. The order of the numbers is TOP/RIGHT/BOTTOM/LEFT, so I'm saying to put my picture all the way to the top (no padding), put about a third of the space taken by an "m" character to the right, 1/2 an "m" character at the bottom, and no padding to the left. This puts it in the top-left corner and keeps the words from "bumping into" the picture (sometimes making them very hard to read.)
      3. margin: 0; - I didn't want ANY margins outside of the padding. The order for margins is the same as the padding, but using only one number says that ALL of them are to use it.

      4. Now for the image, itself. Note that this is NOT a style statement, so there's no semi-colons between the attribute codes:

         1. border="solid 1px #000000" - This puts a solid, 1 pixel black border around the image. If you wish to use a different color, see 2.a.d. above. (NOTE: I changed this from the color I use.)

         2. src="[URL of web location of image]" Any image used here must appear on the internet, somewhere. If you don't have a blog, MySpace acount, Facebook account or website where you can upload the image (or already have), you can join Photobucket New Window, or another free image hosting site, upload it there, and use the URL of the image. Make sure the image is the ONLY thing displayed on the URL - The last part MUST say .GIF, .JPG, or another image extension, NOT .HTM, ;HTML, .SHTM, .SHTML, .PHP, etc. The easiest way to do this is to get the picture ONLY to display, then, as with most links, copy-and-paste the URL of the image between the quotes, above.

            In Photobucket, copy the Direct Link code in the above. If you "Show Details" below those links (in Photobucket), it will tell you the size of the picture in width then height order, which you can use in 4.d., below.

             

         3. alt="[title for picture]" - This tells the browser that has tool-tips turned on, to display whatever's between the quotes in a tool-tip, if the user holds the pointer over the picture. (Put the name of the picture in here.)
         4. width="191" height="300" - All images have a width and height. I haven't tried to leave these off, but you should be able to, and AB's code may put it on for you. If you KNOW the size of your image, you can use them, as I did, here.
         5. /> - Close the IMG tag.
      5. </div> - Close the DIV defined for the image.

      NOTE: If you wish to only add a picture to your profile, the following code is all you need.

      <img border="solid 1px #000000" src="[URL of web location of image]" alt="[title for picture]" />

      The DIV surrounding the image in MY profile is used to position the picture

      and is described above

      Use the info listed above to make changes as you desire.

      You can cut-and-paste the above and modify for your own profile

   3. HEADERS - The next DIV defines the header "About Me" that I used. I also used the same sizes for the "extra-large" headers throughout my profile. You COULD try to put them between <h1> and </h1>, <h2> and </h2>, <h3> and </h3>, <h4> and </h4>, <h5> and </h5>, <h6> and </h6> tags, but they may be defined for the page, and not work the way you wish them to.

      Here's what each of the style attribute codes do here:

      1. font-size:1.50em; - This code is telling the user's browser to display the font at the defined size times 1.5, or 150% of the size of the font defined for the page or DIV, in this case 1.5 or 150% of the font defined for the profile. This is so the main headers would be larger than the regular fonts for the page. The smaller headers are defined in my profile with 1.25em or 125% of the size defined for the div or profile.
      2. font-weight:bold; - This bolds the headers.
      3. </div> - End DIV for the headers.

   4. CONTENT - This is where everything you want to enter into your profile, besides other IMG DIVS, would go. There's no need to use the HTML <p> and </p>, as it appears that AB does that for you. Here's an example from my own profile page, showing the lack of HTML code:

      My username came about from playing video games back in the day. My kids had nicknames and I didn't want to use MY name (I was Daddy), and I'm tall (and ... let's say "big boned"), so I became "BigDaddy". When I got to the internet, I found someone else already used that name, so I added BS (my initials) to it to become BigDaddyBS. NO... The BS does NOT stand for "Bull-Sh*t" (although some may think I'm full of it! ;-) )

      ...

      Here's an answer on picking a first guitar, and some of what you will need to learn to play guitar - http://www.answerbag.com/a_view/2657984

      <b>Contact Me</b>

      NOTES:

      1. I did not need to enter any HTML for the links. AB translates it to a clickable link when it displays the page. You DO have to enter at least the "http://" part to the end, though finding the link, and copy-and-pasting the URL from the URL "bar" at the top of the browser window is the best way.
      2. The "small headers" in my profile are defined by simply bolding them. That's putting content between <b> and </b> tags. You should be able to do the same with italics (<i> and </i>), underlines (<u> and </u>), and maybe a few more font-tags, but you probably shouldn't need to.
   5. </div> - End DIV for the page.
3. When you think you have it the way you want it, hit the SUBMIT button, and click OK.
4. Check it out. Click on the See my Public Profile link right above the edit profile link.
5. If you find extra blank lines, edit your profile again, and remove them in the edit box, and do steps 3 and 4 again.

The above code, makes my profile look like this:

NOTE: Not everything I used is necessary to use, and there are other attributes and HTML code that CAN be used. For HTML purists, remember that I'm providing steps for people who may or may not know anything about HTML, and have NOT described everything in technical language.

back to top

---

Send comments/questions about this page to Bill Sanders at:

Return to OFPv2/Main - FAQ - AB User Guide Home
Return to OFPv2/Main - FAQ Central
 

Send email to Bill Sanders ()
with questions or comments about this page or site.

This site, all text and graphics (unless otherwise noted) on it
were designed, developed and published by Bill Sanders of Orange Frog Productions.
It and it's CSS was validated and complies with both the: CSS and HTML 4.01 validators from W3C.
NOTE: All CSS validates except the "New Window Buttons" which include some invalid code (ie: hacks),
added PicoSearch Tables, and warnings for using transparent backgrounds when color foregrounds defined.
Copyright © 2003, 2004, 2005, 2006, 2007 by Bill Sanders / Full site last modified: October 21, 2006
Any reproduction, printing, or selling of this content is prohibited without express written consent from William D. Sanders.