Beginner 2

Web Developer Tools


Here are some tools to aid you in editing your site / maintaining it with ease!

Web Inspector

Use this to inspect and test your html, it is also a good way to identify the css classes Enjin uses (or others).

Firefox:


Right +click > inspect element.

Safari:


Preferences>Advanced > Show develop menu in top bar
- Then just right click

Google Chrome:


Right click > inspect element

Using the web inspector

- Right click on some text in the above mentioned Enjin thread > Inspect element.

As you can see there is a bunch of scary markup:

See the part that says:


.m_forum .post-content { 
font-size: 110%; 
}

If this was your website and you wanted to change your forum text to red, you can see how that would look before you actually perform any edits!

- click underneath font-size: 110%;
- type:
color:red;

Now you can see what it looks like as a non destructive test. So....if you want to change this for real on your site, you would add this to your html module:

.m_forum .post-content {
color:red;
}
This is a good way to learn html and to see how certain elements are executed on a certain site. It is also a good way to adjust the positioning of your custom stuff without going to the enjin back end and doing the ol' make change>save>refresh page>make change>save>refresh page...

If you need to modify huge css files or if you like to pre-create your enjin modules before you place them in your site.

Text Wrangler (Mac):



This is a free software for mac and it has support for like every script language! SO when you do your html, you can easily see syntax errors etc. This is how it looks, pretty slick:




This is the Text Wrangler equivalent for PC.

A short list, but both necessary things to have when making changes or updating your site (-50% headaches)