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

Объявление

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

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее

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

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

Подробнее

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

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

Предложения

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

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


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


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

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

1

[html]<link rel="stylesheet" href="http://gerda.moy.su/MyBB_files/important/rus-port.css">
<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="https://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" id="store">СКАЧАТЬ</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>

<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
</style>
</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://forumfiles.ru/uploads/001a/11/44/2/623051.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://forumfiles.ru/uploads/001a/11/44/2/623051.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://forumfiles.ru/uploads/001a/11/44/2/878477.png" border="0" width=100% /></div>
<div class="go-down" id='OnBottom'><img src="http://forumfiles.ru/uploads/001a/11/44/2/56825.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://zlober.ru/" title="Дизайн для форумов и техническая поддержка">ZlobeR.ru</a>  © 2012</div>
<div class="cop2">дизайн © <a href="mailto:gerdm@ya.ru">Герда</a> (ZlobeR.ru) | <a href="http://zlober.ru/">ZlobeR.ru</a> | <a href="http://zlober.ru/pages/contacts">gerdm@ya.ru</a></div></div>
<!-- копирайт конец -->


style.css

Код:
 /********** СТИЛЬ "КИБЕРПАНК" © ZlobeR.ru **********/
 /********** Заказ дизайна: http://zlober.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;}

 /********** СТИЛЬ "КИБЕРПАНК" © ZlobeR.ru **********/
 /********** Заказ дизайна: http://zlober.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;}

 /********** СТИЛЬ "КИБЕРПАНК" © ZlobeR.ru **********/
 /********** Заказ дизайна: http://zlober.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("http://forumfiles.ru/uploads/001a/11/44/2/167044.jpg") no-repeat fixed top center;}
#logobottom {background: url("http://forumfiles.ru/uploads/001a/11/44/2/144371.png") no-repeat scroll center top transparent;}
#pun {background: transparent url("http://forumfiles.ru/uploads/001a/11/44/2/626136.png") repeat-y top center;}
#logotop {background: url("http://forumfiles.ru/uploads/001a/11/44/2/419181.png") no-repeat scroll center bottom transparent;}

#logobottom #bot-ani {background: url("http://forumfiles.ru/uploads/001a/11/44/2/481057.gif") no-repeat scroll 0 0 transparent;}

#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2 {background: transparent url("http://forumfiles.ru/uploads/001a/11/44/2/150344.png") no-repeat scroll top center;}
.punbb .category .container, .punbb .forum .container, #pun-stats .statscon {background: transparent url("http://forumfiles.ru/uploads/001a/11/44/2/900344.png") no-repeat scroll bottom center;}
.punbb .topic {background: transparent url("http://forumfiles.ru/uploads/001a/11/44/2/900344.png") no-repeat scroll bottom center;}
.punbb .main table, #pun-stats .container, .punbb .post .container, .punbb .post h3 {background: transparent url("http://forumfiles.ru/uploads/001a/11/44/2/833883.png");}

.post-author ul li.pa-avatar {background: transparent url("http://forumfiles.ru/uploads/001a/11/44/2/661341.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("http://forumfiles.ru/uploads/001a/11/44/2/850598.jpg") repeat scroll 0 0 transparent;}

#pun-navlinks li a, .post-links li a {background: url("http://forumfiles.ru/uploads/001a/11/44/2/70592.png") no-repeat scroll left -0px transparent;}
#pun-navlinks li a:hover, .post-links li a:hover {background: url("http://forumfiles.ru/uploads/001a/11/44/2/70592.png") no-repeat scroll left -25px transparent;}
#pun-navlinks li a:focus, .post-links li a:forus {background: url("http://forumfiles.ru/uploads/001a/11/44/2/70592.png") no-repeat scroll left -49px transparent;}

div.icon {background: url("http://forumfiles.ru/uploads/001a/11/44/2/885780.png") no-repeat 0 -2px;}
tr.inew div.icon {background: url("http://forumfiles.ru/uploads/001a/11/44/2/885780.png") no-repeat 0 -57px;}
tr.iclosed div.icon {background: url("http://forumfiles.ru/uploads/001a/11/44/2/885780.png") no-repeat 0 -115px;}
tr.isticky div.icon {background: url("http://forumfiles.ru/uploads/001a/11/44/2/885780.png") no-repeat 0 -171px;}
tr.iredirect div.icon {background: url("http://forumfiles.ru/uploads/001a/11/44/2/885780.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

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


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