ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Фонд форумаРеклама на сайте
Стать модераторомОтзывыДонат

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Портфолио » Дизайн для MyBB форума Киберпанк


Дизайн для MyBB форума Киберпанк

Сообщений 1 страница 10 из 92

1

[html]
<div id="port-block1" class="free">

<a class="tip" id="cover" title="Дизайн для MyBB форума в стиле Киберпанк">
  <div id="icon"></div>
  <img src="http://gerda.moy.su/MyBB_files/FD/Cyb/Cyb_1.jpg" class="postimg">
</a>

<div id="cover-block">
Дата: 17.11.2012<br>
Автор: <a href="http://forumd.ru/profile.php?id=2" target="_blank">Герда</a><br>
Платформа: MyBB<br>
Стоимость: 850р<br>
Бесплатный дизайн<br>
Описание: Дизайн для MyBB форума в стиле Киберпанк<br>
<a href="https://yadi.sk/d/B3g7JI8e3WTk6y" target="_blank">СКАЧАТЬ</a>

</div>

</div>

<div id="port-block2"  class="free">
<a class="tip" title="Главная страница: юзер-панель, новостной блок, окантовка форумных таблиц"><img src="http://gerda.moy.su/MyBB_files/FD/Cyb/Cyb_2.jpg" class="postimg"></a>
<a class="tip" title="Страницатопика: оформление профиля и окантовка цитат"><img src="http://gerda.moy.su/MyBB_files/FD/Cyb/Cyb_3.jpg" class="postimg"></a>
<a class="tip" title="Форма ответа и копирайт форума"><img src="http://gerda.moy.su/MyBB_files/FD/Cyb/Cyb_4.jpg" class="postimg"></a>

</div>[/html]

подробное описание

ГРАФИКА
Дизайн выполнен в стиле Киберпанк с окантовками разделов и блоков.
Весь графический интерфейс дизайна (кроме фонового изображения) нарисованы вручную.
В дизайн добавлена гиф-анимация низа форума.

ВЕРСТКА
Выполнена окантовка форумных таблиц.
Сделано два блока для баннеров (или любого другого контента) внизу с разным стилем.
Добавлен блок для новостей форума в шапке. Также имеется дополнительный информационный контейнер для контактов администрации.
Осуществлен перенос стандартных ссылок меню форума во встроенную скриптом юзер-панель.
Ссылки меню навигации и под сообщением пользователя оснащены индикатором активности через css-спрайты.
Прописан стиль окантовки профиля и наград.
Свечение активных форм ввода текста с помощью CSS3.

ТЕХНИЧЕСКОЕ ОСНАЩЕНИЕ
Встроена юзер-панель, в которую вошло: стандартные ссылки юзер-меню форума и ссылки из меню навигации, строка статуса, отображение аватарки пользователя
Установлен скрипт Пиар-входа, ссылка для входа размещена в юзер-панели.

Код стиля

HTML-верх

Код:
<!-- шапка начало -->
<div id="logotop">

<!-- табло Новостей -->
<h1>Новости</h1>
<div id="news-screen">

<p><span>01.04.12.</span> Регистрация осуществляется только по приглашениям</p>
<span>07.12.11.</span> Желающим играть <a href="#">...подробнее</a></p>
<p><span>дата</span> новость</p>

</div>
<!-- табло Информации -->
<div id="info-cont">

Тут любая ваша информация, например, контакты админов

</div>

<!-- юзер-панель -->
<div id="u-ava"></div>

<script type="text/javascript">
if (UserAvatar == ""){UserAvatar = "http://s1.uploads.ru/i/fTuib.png"}
var arr=document.getElementsByTagName("div")
i=0
while(arr[i] ){
if(arr[i].id=="u-ava") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<a href='/profile.php?section=avatar&id="+UserID+"' title='Изменить аватару'><img style='max-width:75px;max-height:97px;' src="+UserAvatar+"></a>"+name
}
if(arr[i].id=="u-ava" && GroupID == "3") {
arr[i].innerHTML="<img style='padding-top:8px;' src='http://s1.uploads.ru/i/fTuib.png'>"+name
}
i++}
</script>

<div id="u-text"></div>
<script type="text/javascript">

var arr=document.getElementsByTagName("div")
i=0
while(arr[i] ){
if(arr[i].id=="u-text") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<a href='/profile.php?id="+UserID+"'>Мой профиль</a> <a href='/messages.php'>Личные сообщения</a>"+name
}i++}
</script>
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].id == "u-text" && GroupID == "3") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<li id=\'navpiar\'><a onclick=\'PiarIn()\'><span style=\'cursor:pointer\'>Пиар-вход</span></a></li>"
}i++}
</script>

</div>
<!-- шапка конец -->


<script type="text/javascript">
rusffLive.enable = false;
RusffCore.sets.tags = false;
RusffCore.sets.share = false;
</script>


HTML-низ

Код:
<!--Кнопки вверх вниз-->
<div class="go-up" id='ToTop'><img src="http://s1.uploads.ru/Un5Q3.png" border="0" width=100% /></div>
<div class="go-down" id='OnBottom'><img src="http://s1.uploads.ru/q5SAe.png" border="0" width=100% /></div>
<script type="text/javascript">
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
  else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
  else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>

<!-- пиар вход -->
    <script type="text/javascript">
    PiarNik="paradise";
    PiarPas="1111";

    var L="<div id=\"PR_loginDiv\" style=\"display:none;\">\
    <form id=\"form_login\" name=\"login\" method=\"post\" action=\"login.php?action=in\" onsubmit=\"return check_form()\">\
    <fieldset>\
    <input type=\"hidden\" name=\"form_sent\" value=\"1\"/>\
    <input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\"/>\
    <input type=\"text\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\"/>\
    <input type=\"submit\" class=\"button\" name=\"login\"/>\
    </fieldset>\
    </form>\
    </div>\
    <li id=\"navpiar\"><a onclick=\"PiarIn()\"><span style=\"cursor:pointer\">Пиар-вход</span></a></li>";
    if($("#navlogin").html()!=null){

    $("#navlogin").after(L) //navlogin
    $("#PR_loginDiv #fld1").val(PiarNik)
    $("#PR_loginDiv #fld2").val(PiarPas)
    function PiarIn () {$("#PR_loginDiv input[type='submit']").click();}
    }
    </script>


<!-- копирайт начало -->
<div id="logobottom">

<!-- строка баннеров -->
<div id="banners">
строка длы баннеров1
</div>

<!-- Партнеры -->
<div id="partners">

Блок для баннеров2

</div>

<div id="bot-ani"></div>

<!-- текст копирайта -->
<div class="cop1">Дизайн разработан в рамках проекта <a href="http://disbb.ru/" title="Дизайн для форумов и техническая поддержка">DisBB</a>  © 2012</div>
<div class="cop2">дизайн © <a href="mailto:info@disbb.ru">Герда</a> (DisBB™) | <a href="http://disbb.ru/">disbb.ru</a> | <a href="http://disbb.ru/index/mail/0-3">info@disbb.ru</a></div></div>
<!-- копирайт конец -->



style.css

Код:
 /********** СТИЛЬ "КИБЕРПАНК" © ForumD.ru **********/
 /********** Заказ дизайна: http://forumd.ru/ **********/
 /********** Обратная связь: gerdm@ya.ru **********/

@import url(style_cs.css);
html, body {margin: 0; padding: 0}
.punbb * {margin: 0}
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {padding: 0; list-style: none;}
.punbb img {border:none}
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}
p[class="checkfield"] *, div[class="checkfield"] *, fieldset[class="radiofield"] * {height: 1.8em; vertical-align: middle}
body {font-size: 100.01%;}
.punbb {font: normal 68.75% verdana, arial, helvetica, sans-serif;}
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {font: 1em verdana, arial, helvetica, sans-serif}
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {font-size: 1em; font-weight: normal;}
.punbb h1 span, .punbb h2 span, .punbb legend span {font-size: 1.1em;}
.punbb pre {font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace}
.punbb address, .punbb em {font-style: normal}
.punbb .post-content em {font-style: italic}
.punbb .post-content em.bbuline {font-style: normal; text-decoration: underline;}
.punbb a {text-decoration: none; font-style: italic;}
.punbb optgroup {font-weight: bold;}
#pun:after, .punbb .container:after, .punbb .post-links ul:after, .punbb .main div.inline:after, .punbb .post-box:after, .punbb .linksb:after {clear: both; content: "."; display: block; height: 0; visibility: hidden; overflow:hidden; line-height: 0.0; font-size: 0;}
.acchide, #pun-index #pun-main h1, #pun-navlinks h2, #pun-pagelinks h2, #pun-status h2, #pun-ulinks h2, .punbb .forum h2, .punbb .multipage .topic h2, .punbb dl.post-sig dt span, .punbb p.crumbs strong, .punbb .divider hr, .punbb .required label em, .punbb .formsubmit label, .punbb .submitfield label, .punbb .modmenu label, #pun-userlist .main h2 {font-size: 0; height: 0; width: 0; line-height: 0.0; position:absolute; left: -9999px; overflow: hidden}
.punbb .section, .punbb .main {margin-bottom: 1em;}
.punbb .main, #tieser-bottom, #pun-about, #pun-crumbs2 {position: relative; z-index: 100;}
.punbb .category {margin-top: 0.7em;}
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {margin-top: 0;}
#pun-post .topic {margin-top: 1em;}
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {border-style: none none solid none; border-width: 0px 0px 0px 0px;}
.punbb .container {border-style: solid; border-width: 1px;}
#html-footer .container {border: none;}
.punbb .post-content {padding: 0; margin: 0; width: 100%; overflow: hidden;}
.punbb .post-content p {margin: 0; padding: 0 0 1em 0; line-height: 150%;}
.punbb .post-content img {vertical-align: text-bottom}
.punbb .post-content img.postimg {vertical-align: middle;}
.punbb .post-content .blockcode, .punbb .post-content blockquote {width: 100%; overflow: hidden;}
.punbb .post-content .scrollbox {width: 100%; overflow: auto;}
.punbb .post-content .quote-box, .punbb .post-content .code-box {margin: 0.4em 1.8em 1.4em 1.8em; padding: 1em; border-style: solid; border-width: 1px;}
.punbb .quote-box cite, .punbb .code-box strong.legend {display: block; padding-bottom: 0.7em; font-size: 1.1em; font-weight: bold; font-style: normal; margin: 0;}
.punbb .info-box {padding: 1.1em 1.7em 1em 1.7em; border-style: solid; border-width: 1px; margin: 0 0 1.1em 0;}
.punbb .info-box * {padding: 0 0 0.7em 0;}
.punbb #pun-main .info-box .legend {font-size: 1.1em; font-weight: bold;}
.punbb .formal .container {padding: 1.7em 2.3em 1.1em 2.3em;}
.punbb .formsubmit {padding: 0 0 0 1.7em; margin: 1em 0 0 0;}
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {margin: 0 0.6em 0 0}
.punbb fieldset {border-style: solid; border-width: 1px; padding: 0 18px 0 18px; margin: 0 0 1em 0}
.punbb fieldset legend {padding: 0; margin: 0 0 0 11px; font-size: 1.1em}
.punbb fieldset legend span {padding: 0 5px; margin: 0 0 0 -15px;}
.punbb fieldset fieldset {border-style: none; margin: 0; padding: 0 0 8px 0}
.punbb .fs-box {padding: 1em 0 0.8em 0;}
.punbb .fs-box p, .punbb .fs-box fieldset {padding: 0 0 0.8em 0}
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {float: left; margin-right: 1em;}
.punbb .inline .infofield {clear:both}
.punbb .datafield br {display: none}
.punbb .required label, .punbb .datafield span.input {font-weight: bold}
.punbb .datafield span.input a {font-weight: normal;}
.punbb .areafield span.input, .punbb p.longinput span.input {display: block; padding: 0 12em 0 0; height: 100%;}
.punbb textarea, .punbb .longinput input {width: 64%; margin: 0;}
.punbb .hashelp {position: relative;}
.punbb .helplinks {display: block; position: absolute; top: 1em; right: 0; font-weight: normal; width: 36%;}
.punbb #profile .helplinks {top: 1.5em;}
.punbb .helplinks span {display: block; padding-bottom: 0.2em;}
#pun-post .formal .info-box li {padding-left: 4px; list-style-type: square; list-style-position: inside; line-height: 1.5; margin: 0;}
.punbb .main .tcl {overflow: hidden; text-align: left; width: 50%;}
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {text-align: center; width: 10%;}
.punbb .main .tcr {overflow: hidden; text-align: left; width: 30%;}
#pun-userlist .main .tcl, #pun-searchtopics .main .tcl, #pun-modviewforum .main .tcl {width: 40%}
#pun-userlist .main .tc2, #pun-searchtopics .main .tc2 {text-align: left; width: 20%;}
#pun-debug table .tcl {width: 15%; white-space:normal;}
#pun-debug .tcr {width: 90%; white-space: normal;}
#pun-index .tcl h3 {font-size: 1.2em; font-weight: bold;}
.punbb td span.youposted {font-weight: bold; margin-left: -1em; position: absolute;}
.punbb td .modlist {display: block; padding-top: 0.3em}
.punbb .main td {border-style: solid none none solid; border-width: 1px 0 0 1px; padding: 0.8em 1em; vertical-align: top;}
.punbb .main th {border-style: none none none solid; border-width: 0 0 0 1px; padding: 0.4em 1em 0.4em 1em;}
.punbb .main .tcl {border-left-style: none; border-left-width: 0}
.punbb tbody.hasicon td.tcl {padding-left: 0em}
.punbb .post .container {border: none; margin-top: -1px; padding-bottom: 1px;}
.punbb .post h3 {border-style: solid none none; border-width: 1px;}
.punbb .post h3 span {padding: 0.5em 1em; display: block; margin-left: 208px; border: none;}
.punbb .post h3 strong {float: right; width: 5em; text-align: right; font-weight: normal;}
.punbb .post .post-author p {padding: 0 1em 1em 1em; line-height: 140%;}
.pa-author {font-size: 1.1em; font-weight: bold;}
.pa-author a {text-decoration: none}
li.pa-title {padding-bottom: 0.4em; font-weight: bold;}
.punbb .post-box {padding: 1em;}
.punbb fieldset .post-box {margin-bottom: 0.8em}
.punbb .post-links ul {padding: 0 1em 0 0; height: 2em; line-height: 2em; margin-left: -208px; border-top-style: dashed; border-top-width: 1px; background: transparent; text-align: right;}
.punbb .post-links li {display: inline; padding-left: 1em;}
.pl-email, .pl-website {float: left;}
.punbb .clearer {clear: both; height: 0; font-size: 0;}
.punbb .modmenu .container {padding: 0.5em 1em; text-align: right; background-image: none;}
.punbb .modmenu strong, .punbb .modmenu a {height: 1.8em; line-height: 1.8em;}
.punbb .modmenu .container strong {float: left;}
.punbb .modmenu input {margin-left: 1em;}
.punbb .info .container {padding: 0.8em 1em}
.punbb .info .container .backlink {padding-top: 0.8em;}
#profile .container {padding-left: 18.6em;}
#profilenav {float: left; width: 14em; margin-left: -16.3em; display: inline;}
#profilenav li {padding-bottom: 0.8em; font-weight: bold;}
#viewprofile ul, #profilenav ul {border-style: solid; border-width: 1px; padding: 1.5em 18px 0.8em 18px; margin: 0 0 1em 0;}
#viewprofile h2, #profilenav h2 {background: transparent; border: none; padding: 0 0 0 0; margin: 0 14px -0.6em 14px;}
#viewprofile h2 span, #profilenav h2 span {padding: 0 5px; position: relative;}
#viewprofile li, #setmods dl {padding: 0 0 0 16em; margin-bottom: 0.2em;}
#viewprofile li span {float: left; width: 14em; margin-left: -16em; padding: 0.5em 1em; font-weight: bold;}
#setmods dt {float: left; width: 14em; margin-left: -16em; padding: 0.8em 1em; font-weight: bold; display: inline;}
#viewprofile li strong, #viewprofile li div, #setmods dd {display: block; padding: 0.5em 1em; font-weight: normal;}
.punbb img.avatardemo {float: right; margin: 0 0 0.8em 1.8em}
#pun-userlist .formal, #pun-userlist .formal .container {border-bottom: none; margin-bottom: 0;}
#pun-userlist .usertable .container {padding: 0 2.3em 2.3em 2.3em; border-top: none;}
#pun-userlist .usertable table {border-style: solid; border-width: 1px;}
#pun-pagelinks {position: absolute; top: -15px; left: 0; margin: 0; border: none; padding: 0; width: 100%;}
#pun-pagelinks .container {background: transparent; border: none; padding: 0}
#pun-pagelinks .container li {display: inline}
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {height: 2em; line-height: 2em; padding: 0; font-size: 1.2em; margin-left: -9999px; display: block; float:left; width: 100%;}
#pun-pagelinks a:active, #pun-pagelinks a:focus {position:relative; margin: 0;}
#pun-pagelinks li a span {display:block; margin: 0 1em}
#pun-qjump {margin: 0; border: none; width: 50%; position: relative; float: left;}
#pun-qjump .container {border: none; background: transparent; padding: 0.8em 1em;}
#pun-about {margin-top: 0;}
#pun-about .container {border: none; text-align: right; line-height: 150%; padding: 0.8em 1em;}
#pun-about p span {display:block; padding-left: 50%;}
#pun-crumbs2 {font-weight: bold; overflow: hidden; margin-bottom: 0; border-bottom: none; position: relative;}
#pun-crumbs2 .container {border: none; padding: 0.8em 1em; font-size: 1.1em;}
#pun-break4 {display:none;}
div.punbb-admin #pun-about .container {border-top-style: solid; border-top-width: 1px;}
#pun-help .formal .info-box h3.legend {border-bottom-style: solid; border-bottom-width: 1px; padding-bottom: 0; margin-bottom: 0.8em;}
#pun-help .formal .info-box h3.legend span {padding-bottom: 0.6em; display: block; border-bottom-style: solid; border-bottom-width: 1px; font-size: 1.1em;}
#pun-help .formal p, #pun-help .formal dd {margin-bottom: 1em}
#pun-help .formal ul, #pun-help .formal dl {padding: 0 0 0 1em}
#pun-help .formal li {padding: 0; line-height: 130%}
#pun-help .formal li * {vertical-align: text-top}
#pun-help .formal dt span {font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace}
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {padding-bottom: 0;}



 /********** СТИЛЬ "КИБЕРПАНК" © ForumD.ru **********/
 /********** Заказ дизайна: http://forumd.ru/ **********/
 /********** Обратная связь: gerdm@ya.ru **********/
.punbb .main table {border-color: #292929; border-style: solid; border-width: 0 1px; table-layout: fixed; width: 100%;}
.punbb .category table {width: 891px;}
.punbb .topic {border-color: #292929; border-style: solid; border-width: 0 1px; width: 890px; padding-bottom: 24px;}
#pun {position: relative; width: 1000px; margin: 601px auto auto;}
#pun .punbb-admin {margin-top: -480px;}
#pun .punbb-admin #pun-navlinks {position: relative; top: 220px;}
#pun .punbb-admin #pun-navlinks .container {background: #000;}
.punbb {float: left; margin: 0 54px; height: auto; width: 894px;}
#pun-redirect, #pun-maint {float: none; position: relative; top: -430px; width: auto;}
.punbb .post-sig dt {display: block; border-top: 1px solid #888; width: 250px; margin: 5px 0;}
.punbb .linkst {float: left; position: relative; width: 100%; font-size: 1em; height: 0;}
.multipage {margin-top: 0em;}
.linkst .pagelink {color: #8A8A8A; left: 95px; position: absolute; top: -70px; width: 24em;}
.linkst .postlink {position: absolute; top: -70px; right: 1em; width: 16em; text-align: right; font-weight: bold;}
.punbb .linksb {text-align: right; padding: 0.4em 1em 0.5em 1em; font-size: 1.1em;}
.linksb .pagelink {float: left; width: 24em; text-align: left; color: #8a8a8a;}
.linksb .postlink {float: right; width: 16em; font-weight: bold}
.subscribelink {clear:both; padding-top: 0.3em; padding-bottom: 0.5em;}
.punbb div.icon {float: left; display: block; width: 65px; height: 55px; margin: 0 5px;}
.punbb .post .post-author {float: left; width: 208px; margin-top: -12px; overflow: hidden;}
.punbb .post .post-author ul {line-height: 140%; padding: 0 5px;}
.punbb .post-body {margin-left: 208px; border: none; padding: 0;}
.punbb .post-links {margin-left: 208px; border-left-style: solid; border-left-width: 1px;}
.punbb .post-links li a {display: inline-block; padding-left:17px;}
#pun-viewtopic .modmenu {padding-top: 24px;}
#html-header, #pun-title {border: none; margin: 0;}
#pun-title .container {display:none;}
#pun-title h1 span  {display:none;}
#pun-title table {display:none;}
#pun-title td.title-logo-tdl {display:none;}
#pun-title table {position: absolute; top: -600px;}
#pun-title td.title-logo-tdr {border: medium none; display: block; margin-top: 60px; position: absolute; width: 468px; z-index: 5000;}
#pun-navlinks, #pun-navlinks .container {border-style: none; border-width: 0; margin: 0;}
#pun-navlinks .container {height: 56px; margin-left: 420px; position: absolute; text-align: center; top: -270px; width: 450px; z-index: 2000;}
#pun-navlinks li, #pun-navlinks li a {display: inline-block; height: 23px;}
#pun-navlinks li a {padding-left: 19px; padding-right: 10px;}
#pun-navlinks li#navprofile, #pun-navlinks li#navpm {display:none;}
#pun-ulinks, #pun-ulinks .container {border: none; margin: 0; position:relative; z-index: 2000;}
#pun-ulinks li {display: none;}
#pun-ulinks li.item5, #pun-ulinks li.item4, #pun-ulinks li.item6 {display: block; position: absolute;}
#pun-ulinks li.item5 {margin-left: 745px; top: -186px;}
#pun-ulinks li.item4 {border-right: 1px solid #3C3C3C; margin-left: 517px; padding-right: 5px; top: -131px;}
#pun-ulinks li.item6 {margin-left: 626px; top: -131px;}
#pun-ulinks li a {font-size: 12px;}
#pun-status, #pun-status .container {border: none; margin: 0; position: relative; z-index: 2000;}
#pun-status .item1 {margin-left: 515px; position: absolute; top: -167px;}
#pun-status .item2 {margin-left: 515px; position: absolute; top: -151px;}
#pun-status .item3 {position: relative; top: -15px;}
#pun-crumbs1 {border: medium none; font-weight: bold; margin-top: 0; overflow: hidden; position: relative; z-index: 100; margin: -70px 0 0;}
.punbb-admin #pun-crumbs1 {margin: 0;}
.punbb-admin #pun-crumbs1 p.container {background: #000;}
#pun-index #pun-crumbs2 {display:none;}
#pun-crumbs1 p.container {border: none; padding: 1em 1em 0.8em 1em; font-size: 1.1em;}
#pun-break1 {display: none;}
#pun-announcement, #pun-announcement h2, #pun-announcement .container {display: none;}
#pun-stats .statscon {padding-bottom: 24px;}
#pun-stats .container {border-color: #292929; border-style: solid; border-width: 0 1px; padding: 10px; table-layout: fixed; width: 869px;}
#pun-stats li.item1, #pun-stats li.item2 {float: left; clear: both; line-height: 150%;}
#pun-stats li.item3, #pun-stats li.item4 {text-align: right; line-height: 150%;}
li#onlinelist {margin-top: 1em; border-top-style: solid; border-top-width: 1px; float: left; width: 100%; line-height: 130%;}
li#onlinelist div {border-top-style: solid; border-top-width: 1px; padding: 0.7em 0 0 0;}
.punbb .section {position: relative; z-index: 150;}
.pl-share {display: none !important;}



 /********** СТИЛЬ "КИБЕРПАНК" © ForumD.ru **********/
 /********** Заказ дизайна: http://forumd.ru/ **********/
 /********** Обратная связь: gerdm@ya.ru **********/
#logotop {height: 601px; margin-left: -54px; position: absolute; top: -601px; width: 1008px; z-index: 100;}
#logotop h1 {color: #B3B3B3; font-family: Impact; font-size: 20px; margin-left: 110px; position: absolute; text-align: center; text-decoration: none; text-transform: uppercase; top: 218px; width: 270px;}
#news-screen {color: #858585; height: 137px; margin-left: 110px; overflow-y: auto; position: relative; top: 254px; width: 270px;}
#news-screen p {margin: 3px 0;}
#news-screen span {background: none repeat scroll 0 0 #29516E; border-radius: 5px 5px 5px 5px; color: #CCCCCC; padding: 0 2px;}
#info-cont {color: #858585; height: 85px; margin-left: 65px; position: relative; top: 285px; width: 370px;}
#u-ava {height: 97px; margin-left: 462px; position: absolute; text-align: center; top: 406px; width: 80px;}
#u-text {height: 60px; margin-left: 570px; position: absolute; top: 415px; width: 345px;}
#u-text a {font-size: 12px; border-right: 1px solid #3C3C3C; padding-right: 5px;}
#logotop .ani2 {height: 82px; left: 633px; position: relative; top: -222px; width: 31px;}
#logotop .ani3 { height: 193px; left: 173px; position: relative; top: -303px; width: 202px;}
#logobottom #bot-ani {bottom: -1px; height: 150px; margin-left: 190px; position: absolute; width: 760px;}
#html-footer {margin:0;}
#logobottom {height: 334px; margin-left: -152px; width: 1190px;}
#logobottom #banners {margin-left: 152px; height: 31px; margin-top: 55px; padding: 5px 10px; position: absolute; text-align: center; width: 873px; z-index: 100;}
#logobottom #partners {text-align: center; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 25px #000000 inset; height: 75px; margin-left: 152px; margin-top: 105px; overflow: auto; padding: 10px; position: absolute; width: 873px; z-index: 100;}
#logobottom #partners img {opacity: 0.5;}
#logobottom #partners img:hover, #logobottom #partners img:focus {opacity: 1.0;}
#logobottom .cop1, #logobottom .cop2 {display: inline-block;}
#logobottom .cop1 {color: #CCCCCC; height: 60px; position: absolute; font-size: 1.1em; width: 560px; margin-left: 152px;}
#logobottom .cop2 {position: absolute; text-align: right; width: 883px; color: #CCCCCC; margin-top: -20px; margin-left: 152px;}
.go-up, .go-down {display: none; position: fixed; right: 9px; z-index: 9999; cursor: pointer; opacity:.7; margin-bottom: 5px;}
.go-up {top: 230px;}
.go-down {top: 280px;}
.go-down:hover, .go-up:hover {opacity: 1.0;}
.post-author ul li {text-align: center; width: 186px; padding: 0px 5px;}
.post-author ul li.pa-avatar {height: 232px; padding-top: 6px;}
.post-author ul li.pa-author, .post-author ul li.pa-title {border-left: 1px solid #31423F; border-right: 1px solid #31423F;}
.post-author ul li.pa-author {border-radius: 10px 10px 0 0; border-top: 1px solid #31423F;}
.post-author ul li.pa-title {border-radius: 0 0 10px 10px; border-bottom: 1px solid #31423F; margin-bottom: 5px; font-size: 0.9em;}
.post-author ul li.pa-fld1, .post-author ul li.pa-fld2, .post-author ul li.pa-fld3, .post-author ul li.pa-fld4, .post-author ul li.pa-fld5 {border-left: 1px solid #31423F; border-right: 1px solid #31423F; padding: 2px 5px; text-align: left; color: #CCCCCC;}
.post-author ul li.pa-fld1 {border-radius: 10px 10px 0 0; border-top: 1px solid #31423F; margin-top: 5px;}
.post-author ul li.pa-fld5 {border-radius: 0 0 10px 10px; border-bottom: 1px solid #31423F; margin-bottom: 3px;}
.pa-awards {margin-top: -16px !important;}
.pa-awards .mini_awards img {border: 1px solid #31423F; border-radius: 10px 10px 10px 10px; margin: 2px; padding: 2px;}
.post-author ul li.pa-avatar img {width: 170px; height: 220px;}
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {background-color: transparent; color: #858585;}
.punbb .main .container {color: #8a8a8a; padding-bottom: 24px; border: none;}
.punbb .post .container {color: #8a8a8a; border: none;}
.punbb .post h3 {color: #8a8a8a;}
.punbb-admin #pun-admain .adcontainer {background-color: #f7f7f7; color: #333;}
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2 {height: 77px;}
#pun-stats h2 span, .punbb .main h1 span, .punbb .main h2 span, #pun-debug h2 span {font-family: Impact; font-size: 25px; font-style: italic; line-height: 85px; padding-left: 110px; text-transform: uppercase; white-space: nowrap;}
.punbb-admin #pun-admain h2 {background-color: #1474C3; color: #fff;}
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {background-color: #1c1c1c; color: #ccc; border-radius:  10px;}
.punbb th {background-color: #DEDFDF; color: #000000; opacity: 0.3;}
.punbb .post h3 span, #viewprofile li, #setmods dl {background-color: transparent; color: #ccc;}
.punbb .quote-box, .punbb .code-box, #logobottom #banners {color: #ccc; border: 1px solid #565656; border-radius: 10px; box-shadow: 0 0 25px #000 inset;}
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {background-color: #000; color: #ccc; border: 1px outset #31423F;}
.punbb textarea:hover, .punbb input:hover, .punbb select:hover, .punbb optgroup:hover {border: 1px inset #31423F;}
.punbb textarea:focus, .punbb input:focus, .punbb select:focus, .punbb optgroup:focus {border: 1px inset #31423F; box-shadow: 0px 0px 5px #ccc;}
#form-buttons table {background: none; border: none;}
.offline li.pa-online strong {font-weight: normal}
.punbb .container, .punbb .post-body, .post h3 {border-color: #191919;}
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post {border-color: #191919;}
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {border-color: #191919;}
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body, .punbb .post h3 span, .post-links ul, .post-links, .usertable table {border-color: #191919;}
.punbb th {border-color: #191919}
#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {border-color: #191919}
#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {border-color: #191919}
.punbb .divider {border-color: #191919}
.punbb .formal fieldset .post-box, .punbb .info-box {border: 1px solid #191919}
.punbb a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {color: #44A4F5;}
.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {color: #333}
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault, .punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {color: #97cfe9;}
#pun-navlinks #navpiar {display:none;}
.post-links li a, #pun-navlinks a {text-transform: uppercase; font-family: Impact; font-size: 1.5em; color: #b3b3b3 !important; text-decoration: none}
.post-links li a {height:17px; font-size: 1.3em;}
.post-links a:hover, .post-links a:focus, #pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {color: #fff !important; text-decoration: none;}
#pun-pagelinks a:active, #pun-pagelinks a:focus {color: #fff;}
.stickytext, .newtext, .closedatafield {display:none;}

style_cs.css

Код:
/*--------------------- Код для Уведомлений QuadroBoards ---------------------*/
 /* _____ВНИМАНИЕ!!! если у вас НЕ форум quadroboards.ru - УДАЛИТЬ_____ */
/*****************************************************************/


#pun-ulinks li:nth-child(6) {display: block; position: absolute;}
#pun-ulinks li:nth-child(6) {margin-left: 728px; top: -131px;}
#pun-ulinks li.item6 {padding-right: 5px; border-right: 1px solid #3C3C3C;}


/*****************************************************************/
 /* _____ВНИМАНИЕ!!! если у вас НЕ форум quadroboards.ru - УДАЛИТЬ_____ */
/*--------------------- Код для Уведомлений QuadroBoards ---------------------*/



/* все фоновые картинки */
html {background: #000 url("bg.jpg") no-repeat fixed top center;}
#logobottom {background: url("bottom.png") no-repeat scroll center top transparent;}
#pun {background: transparent url("pun.png") repeat-y top center;}
#logotop {background: url("top_body.png") no-repeat scroll center bottom transparent;}

#logobottom #bot-ani {background: url("bottom.gif") no-repeat scroll 0 0 transparent;}

#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2 {background: transparent url("table_top.png") no-repeat scroll top center;}
.punbb .category .container, .punbb .forum .container, #pun-stats .statscon {background: transparent url("table_bot.png") no-repeat scroll bottom center;}
.punbb .topic {background: transparent url("table_bot.png") no-repeat scroll bottom center;}
.punbb .main table, #pun-stats .container, .punbb .post .container, .punbb .post h3 {background: transparent url("black-opacity.png");}

.post-author ul li.pa-avatar {background: transparent url("ava.png") no-repeat scroll top center;}
.post-author ul li.pa-author, .post-author ul li.pa-title, .post-author ul li.pa-fld1, .post-author ul li.pa-fld2, .post-author ul li.pa-fld3, .post-author ul li.pa-fld4, .post-author ul li.pa-fld5, .pa-awards .mini_awards img, .punbb .quote-box, .punbb .code-box {background: url("pattern.jpg") repeat scroll 0 0 transparent;}

#pun-navlinks li a, .post-links li a {background: url("button-selector.png") no-repeat scroll left -0px transparent;}
#pun-navlinks li a:hover, .post-links li a:hover {background: url("button-selector.png") no-repeat scroll left -25px transparent;}
#pun-navlinks li a:focus, .post-links li a:forus {background: url("button-selector.png") no-repeat scroll left -49px transparent;}

div.icon {background: url("icons.png") no-repeat 0 -2px;}
tr.inew div.icon {background: url("icons.png") no-repeat 0 -57px;}
tr.iclosed div.icon {background: url("icons.png") no-repeat 0 -115px;}
tr.isticky div.icon {background: url("icons.png") no-repeat 0 -171px;}
tr.iredirect div.icon {background: url("icons.png") no-repeat 0 -227px;}

Отредактировано Герда (24.05.2018 14:47:02)

+3

2

устарело

Подробное описание

Описание крутизны стиля (читай - понтуюсь;))

Графика
- Все рюшечки, бордюрчики и железные уголки нарисованы вручную.
- В дизайн добавлена гиф-анимация низа форума.
- По традиции сделан интересный низ, в этот раз - рассыпающийся осколками.
- Категории и темы замыкаются отдельной картинкой.

Верстка
- Оригинальное преобразование шрифта Impact для заголовков и меню.
- Сделано два блока для баннеров внизу с разным стилем.
- Осуществлено перенос стандартных ссылок меню форума во встроенную скриптом юзер-панель.
- Ссылки меню навигации и под сообщением пользователя оснащены индикатором активности через css-спрайты.
- Сделано замыкание категорий, форумов и самих тем картинкой.
- Окантовка профиля и наград.
- Свечение активных форм ввода текста с помощью CSS3.

Техническое оснащение
- Создан контейнер для новостей форума
- Встроена юзер-панель, в которую вошло: стандартные ссылки юзер-меню форума и ссылки из меню навигации, строка статуса, отображение аватарки пользователя
- Установлен скрипт Пиар-входа, ссылка для входа размещена в юзер-панеле.
- Добавлен и заполнен дополнительный информационный контейнер для контактов администрации.
- Написано, настроено и встроено в шапку дополнительное навигационное меню для сайта.


Описание технического оснащения
В дизайн входит...
- Скрипт Пиар-входа
- Кнопки вверх-вниз
- блок для новостей форума в шапке с настроенным стилем отображения
- блок для вашего любого контента под шапкой
- два блока для баннеров внизу форума (хотя можно не только баннеры вставить, а любой html-контент)
- окантовка профиля с рамкой для аватар (аватары строго 170px*220px)

Все блоки со скриптами закомментированы (подписаны), поэтому с распознанием проблем быть не должно. Если у кого-то появятся вопросы по их настройке, обращайтесь в эту тему, поможем.

Дизайн можно назвать "Средней тяжести", за исключением png-шапки (что планирую исправить) и низа, в нем использовано максимум приемов для того, чтоб он был максимально легким.
Если у кого-нить все же будет желание облегчить вес графики, уберите гифку из низа:

Код:
#logobottom #bot-ani {
    background: url("http://s1.uploads.ru/i/uKjPL.gif") no-repeat scroll 0 0 transparent;
}

Прошу всех милых и пушистых (а главное - благодарных) копирайт не удалять. Он ненавязчивый, текстовый.

0

3

Герда
возможно ли изменять дизайн, и конечно же копирайт полностью оставлять?))

0

4

lambdadelta
да пожалуйста. это ж свободный каталог - берите, играйтесь, правьте. )
использовать для продажи шаблон нельзя только :Р
а запрещать переправить картиночную часть под тематику форума - эт какая-то глупость.

0

5

Герда
у меня свой шаблон и css для платных дизайнов и я читал правила и понимаю, что это чужое)
ну мало ли) просто спросил) спасибо)

0

6

Герда
таки ты его не продаешь? Оо""

0

7

Skywarp
а не берут )
может, взяли бы, если бы я его продавала за 500-1000р, но он стоит гораздо дороже. мне жалко такое убийственное по времени и трудозатратам отдавать в одни-единственные ручки за копейки.

+1

8

Герда
.______. это печально же... такая красотень пропадает .____.
а чо колорфорумы всякие, не отвечает никто? ._.

0

9

Skywarp
не отвечает судя по всему

0

10

Skywarp
не отвечают )

но красота, я думаю, терь не пропадет.
кому-то должна сгодиться.

0


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Портфолио » Дизайн для MyBB форума Киберпанк


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC