Что такое логотип?
Логотип - это первое, что бросается в глаза на вашем форуме. Наверно нет нужды и говорить, что если вы хотите начать оформлять форум по своему, что же надо изменить первым.
Картинка внизу показывает, где находятся основные элементы логотипа:
Примечание, прочтите перед началом замены логотипа:
Логотип, как и любой другой вставленный вами графический элемент, не должен ни в коем случае перекрывать или смещать рекламный баннер, или каким-либо другим способом мешать отображению последнего. За любую, умышленную или непреднамеренную попытку скрыть или убрать рекламный баннер, форум удаляется без предупреждения. Если баннер был скрыт вами неумышленно (Я понаставил кодов и скриптов, каких и откуда вообще не знаю, и баннер исчез), вы должны самостоятельно позаботиться о том, чтобы немедленно по своей инициативе прийти и сообщить администрации о проблеме. В таком случае вам помогут исправить ошибку и восстановить баннер.
Примечание:
Во всех скриптах встречается фраза адрес вашей картинки. Чтобы его получить, достаточно залить картинку на форум. Для этого нажмите 
и в появившемся окне выберите картинку, находящуюся на вашем компьютере. Обьем картинки не должен превышать 1 Мегабайта, поддерживаемые расширения jpеg, png и gif. Не забудьте набрать любой текст в окне Быстрого ответа, иначе картинка попросту не загрузится. После успешной загрузки картинки щелкните по ней правой кнопкой мыши и и в появившемся меню выберите меню Свойства. Скопируйте текст в строке Адрес (URL) - это и будет адрес вашей картинки.
Если картинка слишком большая и вместо нее в сообщение отображается ее уменьшенное изображение, щелкните по ней левой кнопкой мыши, отобразится реальная картинка.
Все нижеследующие скрипты вставляются в Администрирование --> Настройки -->HTML верх
Дополнительно:
Если ваша картинка не помещается по ширине или высоте, добавьте следующие параметры:
height (высота элемента)
width (ширина элемента)
Значения: px (пиксели) или % (проценты)
Пример:
#element1 {height: 200px; width: 100%;}
Если вам надо сделать отступ от рамки шапки, добавьте следующие параметры:
margin-top (верхний отступ)
margin-bottom (нижний отступ)
margin-left (левый отсуп)
margin-right (правый отсуп)
margin (все стороны отступа сразу)
Значения: px (пиксели)
Пример:
#element1 {margin-left: 40px;}
Если вам надо убрать какой-нибудь элемент, добавьте следующие параметры:
display (способ отображения элемента)
Значения: none (нет)
Пример:
#element1 {display: none;}
Способы вставки логотипа:
Самый простой способ, реализуемый при помощи css:
<style type="text/css">
#pun-title .title-logo {background-image: url(адрес вашей картинки); background-repeat: no-repeat;}
</style>
Если остальной фон шапки вы хотите отделать в том же стиле:
<style type="text/css">
#pun-title table {background-image: url(адрес вашей картинки);}
</style>
Если на вашем графическом логотипе некрасиво устроилось буквенное название форума:
<style type="text/css">
#pun-title h1 span {display: none;}
</style>
Логотип-картинка во всю шапку (за исключением баннера):
<style type="text/css">
#pun-title .title-logo {display: none;}
#pun-title table {background-image: url(адрес вашей картинки);}
</style>
Картинка во всю шапку, с регулирующейся шириной под разные браузеры/ расширения экрана:
Примечание:
Не работает в Firefox, Safari
<style type="text/css">
#pun-title table {background-image: none !important;}
#pun-title, #pun-title table, .title-logo-tdr {background-color: transparent;}
#pun-title table {position: relative; top: -30px ; z-index: 100 !important; height: 0px;}
#pun-title .title-logo {display: none;}
#pun-title {height: 50px;}
</style>
<script type="text/javascript">
var logot=document.getElementById('pun-title').innerHTML
document.getElementById('pun-title').innerHTML="<img src='адрес картинки'"+" style='width: 100%; position: relative; top: 30px;' />"+logot
</script>
Изменяйте красные значения, пока не отпозиционируете фон и логотип идеально для вас.
--------------------------------------------------------------------------------
Дополнительные скрипты:
Если вам надо просто стереть логотип mybb, используйте данный скрипт:
<style>
#pun-title .title-logo {display : none;}
</style>
Можно создать один большой логотип над шапкой:
<img src="адрес вашей картинки">
Если на вашем логотипе осталось буквенное название форума, его можно убрать этим скриптом:
<style type="text/css">
#pun-title h1 span {display: none;}
</style>
Верхний баннер нельзя удалять или закрывать, но можно перемещать. Для этого воспользуйтесь данным скриптом:
<style> #pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 510px; top: 190px
}
</style>
Значения, выделенные жирным изменяйте на свое усмотрение, но только в пределах от 190 до 510
Скрипт, позволяющий создавать логотипы, случайным образом меняющиеся при каждом обновлении страницы:
<script language="JavaScript">
<!--
image = new Array();
image[0]="адрес вашей картинки №1"
image[1]="адрес вашей картинки №2"
image[2]="адрес вашей картинки №3"
............................................................................var img=image[Math.floor(Math.random()*image.length)]
document.write("<style>#pun-title .title-logo {background-image: url("+img+"); background-repeat: no-repeat;}</style>")
//-->
</script>
image[*]="адрес вашей картинки №*"
Повторяем для нужного вам количества картинок, соблюдая нумерацию, и вставляем заместо многоточия
Второй вариант скрипта "случайных" логотипов, с учетом разрешений экрана:
<script language="JavaScript">
if (screen.width==1024)
<!--
image = new Array();
image[0]="адрес вашей картинки №1"
image[1]="адрес вашей картинки №2"
image[2]="адрес вашей картинки №3"
............................................................................var img=image[Math.floor(Math.random()*image.length)]
document.write("<style>#pun-title .title-logo {background-image: url("+img+"); background-repeat: no-repeat;}</style>")
//-->
</script>
<script language="JavaScript">
if (screen.width==1280)
<!--
image = new Array();
image[0]="адрес вашей картинки №1"
image[1]="адрес вашей картинки №2"
image[2]="адрес вашей картинки №3"
............................................................................var img=image[Math.floor(Math.random()*image.length)]
document.write("<style>#pun-title .title-logo {background-image: url("+img+"); background-repeat: no-repeat;}</style>")
//-->
</script>
image[*]="адрес вашей картинки №*"
Повторяем для нужного вам количества картинок, соблюдая нумерацию, и вставляем заместо многоточия.
screen.width==1280
Вставляем заместо подчеркнутых цифр размер экрана
Многие задают вопрос, а как сделать баннер. Вот готовый скрипт для него:
<a href="ссылка" title="текст при наведении" target="blank"><img src="адрес вашей картинки"></a>
ссылка
Вставляем нужную вам ссылку
текст при наведении
Текст, высвечивающийся при наведении курсора на баннер. Пишем нужный
Если вы хотите сделать себе логотип, но не имеете навыка в рисовании, вы можете заказать себе его в этой теме: