Kjell Iver Johansen

It may be handy at times, to be able to add some of the blocks you see in pages, or even your own custom blocks, into external webpages. Within IPS4 we give you the ability to choose any block to embed externally directly from the admin CP.
 
In order to embed one of your blocks on an external page. First log into your admin CP and visit Pages>Page Management>Blocks.
Once you are in here, select the dropdown box next to the block you wish to embed externally, and select "External embed"

Selection Menu
 
Once you have selected this, you will be presented with a screen similar to the below.

Embed Text
Copy the code into the relevant areas of your own website code to embed the block. Note that there is a checkbox to "Inherit key styles from parent page". If this is selected, then the styling of the block will also be brought across. If not, then you would need to style the block from your own websites code.
 
 

By default, we use the 'comments' icon from FontAwesome to represent forums on the read/unread badges. IPS4 also includes an option to upload an image that will be used instead of the icon. But what if you want to use a different FontAwesome icon for each forum?
The good news is this is possible using some custom CSS. Each forum row in the index template includes a data attribute with the forum ID, meaning we can write a style to specifically target each individual forum and overwrite the icon it uses.
Note: Although this method isn't terribly complex, it does require editing custom CSS and working with unicode characters.
 
Determining the icon unicode value
The method we're going to use involves replacing the icon using a CSS rule, rather than changing the icon classname in the HTML. The reason we take this approach is it won't make upgrading your templates difficult later - our custom CSS persist through IPS4 versions easily.
What this means however is that we need to identify the unicode value that FontAwesome assigns to the icons we want to use.
To do so, head over to the FontAwesome icon list on this page. Locate the icon you'd like to use, and click it. On the information page, you'll see the unicode value for the icon. Make a note of this code. For example:

Do this for each icon you'll want to use.
 
Adding the CSS
We're going to add our CSS to our custom.css file so that it persists through upgrades. In the AdminCP, go to Customizations -> Themes, and click the code edit icon next to the theme you want to change. On the CSS tab, open the custom.css file:

The rule we need to use looks like this:
[data-forumid="..."] .fa-comments:before { content: "\f123"; } You'll need to adjust this code to include the forum ID for the forum you want to change. You can find the forum ID by hovering on the link to the forum, and noting the number you see in the URL: 

You'll also need to replace the f123 unicode value with the one for the icon you want to use that you noted earlier.
 
Example
Let's say we have forum ID's 1 and 2, and we want to use FontAwesome's bicycle and car icons, respectively. We note the unicode values for those icons, which are f206 and f1b9.
The CSS we'd add looks like this:
[data-forumid="1"] .fa-comments:before { content: "\f206"; } [data-forumid="2"] .fa-comments:before { content: "\f1b9"; } Once we save it, we can see the result: