The SmugMug profile block doesn't allow HTML code to be entered, only plain text. This means that if you want to perform even simple formatting like bolding text, or adding links with custom link-text, you have to use an HTML or text block instead. But creating an HTML box from scratch that looks as nice as the SmugMug profile block is pretty difficult.

Instead, you can convert your SmugMug profile block into an HTML block, and maintain its appearance. After conversion, you'll be able to enter whatever HTML code you like into your profile description!

I'm only going to describe how to do this in Google Chrome. The process in other web browsers is similar, but you will need to know how to use your browser's Developer Tools to continue.

Start by creating a private or unlisted page that you'll use to help you build the profile block code. I called mine "Profile block code". Enter the customiser and drop a profile block onto the page. Get it set up the way you want it to look by using the settings on the profile block. Now publish your changes. Here's what my profile block looked like when I was done, notice that none of the HTML I wanted to use is working:

Now, right click on your profile block and click "inspect element". A window of code will open at the bottom of your browser window that looks like this:

A line of code will be highlighted, which is the element on the page that you right-clicked on. You want to find the element that contains your entire profile block, this will be a line of code above the highlighted one that says exactly "sm-page-widget-profile" on it. I've circled that text in red on the image above.

Right-click on the line that contains the text "sm-page-widget-profile" and click "Copy as HTML".

The HTML code you copied is really gnarly, with no linebreaks, which makes it really hard to read. So at this point we're going to take a detour so we can format the code for you nicely.

Go to http://www.ctrlq.org/beautifier/. Right click inside the text box and click paste, you should see the crazy HTML code for your profile block get pasted. Now click the "format code" button, and you should end up with something like this:

SmugMug adds some stuff to the code that we don't really need. If you like tidy code, then wherever it says id="" (with a bunch of random letters and numbers inside the quotes), remove that whole 'id="..." section. (You can skip this step if you can't be bothered!) After doing that, here's the code I ended up with for my profile block:

Here's the section of that code that contains my actual profile text (it appears towards the end):

Now I can edit that code to add the HTML code to it that SmugMug doesn't allow in profile blocks! I add paragraph tags, bold text, italic text, and a link with custom text that opens in a new window.

Finally, make an HTML block on the page where you want your new profile to appear. Copy all the HTML code you edited and paste it in. On the CSS tab, paste this code in to restore the broken hover-text feature:

My SmugMug theme automatically removes bold and italic text styles, so I added this CSS as well to bring them back in:

Now save! Here's what my finished profile block looks like:

If you want to tweak the appearance of your profile block further, check out my tutorial on expanding your profile block.