OS EDU - Dear CSM : I'm not a big HTML user, but are there any EASY tips and tricks you can share?

Question : We don't have any people on staff with "coding skills" but I know I can do more with my PTE with just a little bit of code. Is there anything you suggest?

Answer : Oh... you just opened a big door of awesome! - YES!!

Here's what we suggest :

First, make yourself a private workgroup (just you, and anyone you want to help you) and a page called "Testing"  You should be able to have a safe place to "play" in while you learn. If you have a Sandbox or Test Portal, even better (especially if you want to graduate into making Theme changes, etc later)

Second, remember that Google is your friend. The newest version of the portal supports a lot of things in "HTML5" and a quick Google search for "How do I xxx in HTML5?" can often get your pretty solid results. 

Third, HAVE FUN. No, really!! There is very little that feels as good as admiring something YOU made all by yourself. Give yourself permission to enjoy and learn!

But, to actually answer your question : Here are two things I like to add to my PTE for fun - 

• Rounded Edges - This creates a background color on your PTE with rounded edges. This works in all currently supported versions of the portal.

You need to know the "hex code" of what you want the background color to be for this to work. First, in design mode, type in the content you want to display. Don't worry - You can go back and change this later, add pictures, etc) 

Then switch to HTML mode.  ABOVE your typing, paste in the code below.#90EE90 is light green - you can change that to your Hex Code.

<table style="width: 100%; height: 100%; border-radius: 25px; background-color: #90EE90;" border="0" margin="0" padding="0">
<tbody>
<tr>
<td>

Below your typing, paste the code below:

</td>
</tr>
</tbody>
</table>

That's it!! You can now go back and center your text, as I did below, if you like. Or add an image or links. Easy-peasy!

• Filter Your Images - Warning : This is a little "fancy" and does not work in Internet Explorer, Edge 12 or Safari 5.1 and earlier.

We really do suggest you edit your images before you put them in the portal. Honestly, do that. It's just easier. But this is still a cool trick. There are a handful of filters that you can try for fun - Google will tell you more. My current favorites are

blur(px) - Applies a blur effect to the image. A larger value creates more blur. 

opacity(%) - 0% is totally transparent, 100% is no transparency at all

grayscale(%) - 100% is totally gray - play with this one

saturate(%) - Like greyscale, but not quite. 0% is unsaturated, 100% is fully saturated

invert(%) - A little spooky - gives you the "negative" of a picture

First step. Add an image to your PTE and set it to 100% width. (Don't forget the %, it is important!) This will force the image to be 100% as wide as the PTE it is in and give you a "style" code to play with. 

Then switch to HTML mode.

You should see something like this :

Since we already have a style code in there, this is super easy. Look for where it says style=width: 100% Park your cursor AFTER the semi-colon and BEFORE the quotation marks and add exactly this:

filter:blur(5px);

So it should look like this

<img alt="" src="https://success.passageways.com/Services/Files.svc/2f373f6de2444b0f9d0755ebf19be365" style="width: 100%; filter:blur(5px);" />

Congrats! You made a blurry picture! 

If you like, you could also try to add things like:

filter:opacity(50%);

filter:grayscale(75%);

filter:saturate(50%);

filter:invert(60%);

Pro tip - if you want the image to feature TWO filters, just separate them with a space like so

filter:blur(5px) grayscale(50%);

Good luck and show off your skills in Spark!