Демонстрация:


Установка:
- Заходим в ПА (Панель администратора)
- Выбираем вкладку (Стили)
- После чего, в боком меню слева (выбираем HTML-вставки)
- Включить верхний заголовок (жмем Да)
- Вставляем такой код
Код: Выделить всё
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

- Потом включаем нижний заголовок
- Вставляем туда такой код

Код: Выделить всё
<script>
var url_header = "./forum3.html";
var url_admin = "./admin.html";
var url_moderator = "./moderator.html";
var url_pressman = "./pressman.html";

var block = '<div class="forum-page-helper">'
   +'<div class="panel-side">'
        +'<h2 class="panel-side-header"><span class="fa-stack fa-lg" id="gx_icon"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-bars fa-stack-1x fa-inverse" style="position:relative; top:-1px;"></i></span> <a href="'+url_header+'"><span id="text_gx">Вакансии '+'на форуме</span></a></h2>'
       +'<div id="gx_content">'
       +'<span style="margin-right: 5px;" class="fa-stack fa-lg" id="gx_icon_content"><i class="fa fa-circle fa-stack-2x" style="color: firebrick;"></i><i class="fa fa-times fa-stack-1x fa-inverse" style="position:relative; top:-1px; color: white;"></i><a href="'+url_admin+'" target="_blank">Администраторы</a></span>'
      + '<span style="margin-right: 5px;" class="fa-stack fa-lg" id="gx_icon_content"><i class="fa fa-circle fa-stack-2x" style="color: yellowgreen;"></i><i class="fa fa-check fa-stack-1x fa-inverse" style="position:relative; top:-1px; color: white;"></i><a href="'+url_moderator+'" target="_blank">Модераторы</a></span>'
       +'<span class="fa-stack fa-lg" id="gx_icon_content"><i class="fa fa-circle fa-stack-2x" style="color: yellowgreen;"></i><i class="fa fa-check fa-stack-1x fa-inverse" style="position:relative; top:-1px; color: white;"></i><a href="'+url_pressman+'" target="_blank">Журналисты</a></span>'
       +'</div>'
       + '</div>'
       +'</div>';
$(".forum-page-body .forum-page-helper ").before(block);
</script>

<style>
#gx_icon_content {
    font-size: 10px;
    float: left;
    display: inline-table;
    background-color: aliceblue;
    border: 1px solid lightgray;
    padding: 5px;
    border-radius: 3px;
    line-height: 20px;
    width: 77px;
    text-align: center;
}
#gx_icon {
position: absolute;
    margin-left: -22px;
    font-size: 10px;
}
#text_gx {
position: relative;
    left: 2px;
}
#gx_content {
padding: 10px;
}
</style>


Важно:
- Чтобы изменить ссылки, меняем этот код
Код: Выделить всё
var url_header = "./forum3.html";
var url_admin = "./admin.html";
var url_moderator = "./moderator.html";
var url_pressman = "./pressman.html";


C Ув. Георгий Шевченко! :)