Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Каталог стилей » Мобильный дизайн "Приложение". Установка сложная.


Мобильный дизайн "Приложение". Установка сложная.

Сообщений 41 страница 60 из 73

1

Это полноценный мобильный дизайн, но установка сложная. Дизайном в админке придется пожертвовать. На скриптах блоги и подфорумы данный дизайн не тестировался.

Установка:

Сначала установим мета тег Viewport: <meta name="viewport" content="width=device-width">:

Идем в Администрирование - Раскрутка и ставим в Имя: viewport, в Содержимое: width=device-width, должно получиться вот так:
https://i.imgur.com/JiQcWN4.png

Переводим Свой стиль в только для ПК (для тех у кого стоит стиль от сервиса надо предварительно его перенести в Свой стиль) Для этого идем в эту тему: Библиотека Device.js или о мобильных дизайнах - пост Деффа №12. Создаем свою страницу на своем форуме вставляем туда скрипт Деффа - открываем эту ново-созданную страницу, затем идем в Администрирование - Свой стиль - сначала из первого окна копируем всё содержимое - вставляем в ново-созданную страницу - преобразуем стиль, возвращаем в первое окно то, что получилось, затем производим ту же манипуляцию со вторым окном.

Скрипт, сам html не преобразует - его вручную заменяем на html.desktop

Далее в самый низ НТМЛ верха устанавливаем:

Код:
<!-- Общий мобильный стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/77571.css">

<!-- Цветовая схема для мобильного стиля. Зеленый стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/81991.css">

<!-- Скрипты для мобильного стиля -->
<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
<script>
$( document ).ready(function() {

$('html.mobile .punbb').prepend('<div class="newheader"></div>');
$('html.mobile .newheader').append( $('#pun-title'),$('#pun-navlinks'),$('#pun-ulinks') );

$('html.mobile .newheader').prepend('<input type="checkbox" id="nav-toggle" hidden>','<input type="checkbox" id="nav-toggle2" hidden>','<label for="nav-toggle" class="nav-toggle mask-content" onclick></label>','<label for="nav-toggle2" class="nav-toggle2 mask-content2" onclick></label>');
$('html.mobile #pun-navlinks').prepend('<label for="nav-toggle" class="nav-toggle" onclick></label>', $('#pun-status'));
$('html.mobile #pun-ulinks').prepend('<label for="nav-toggle2" class="nav-toggle2" onclick></label>');


var g_top = 0;
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( top > g_top ) {
      $('.newheader').fadeOut(400);
    } else {
      $('.newheader').fadeIn(400);
    }
    
    g_top = top;    
  });

});
</script>

Цветовую схему я вынес в отдельный файл, чтобы можно было быстро изменить под себя. На данный момент есть две цветовые схемы - зеленая и голубая, по умолчанию я поставил зеленую. Цветовые схемы я отдельно буду выкладывать во втором посту (два варианта в файле и открытую -  кому что удобнее).

Посмотреть в работе мобильный дизайн можно здесь: http://digitalferrum.bbmy.ru/ (смотреть на мобильном устройстве или через инструменты веб-разработчика.

Скриншоты

https://i.imgur.com/X7btVYY.png
https://i.imgur.com/YVgzVUg.png
https://i.imgur.com/5i7k1nR.png

При любых замечаниях по дизайну обязательно указываем на каком устройстве смотрели и в каком браузере.

Мобильный стиль от сервиса отключать ОБЯЗАТЕЛЬНО. Все свои стили, установленные в НТМЛ верху или где-то еще, переводим в стиль только для ПК по методу описанному выше для Своего стиля.

Свои варианты цветовой схемы только приветствуются - кто сделает выкладывайте для других пользователей.

Для тех, кто хочет облагородить Админку, в самый низ Первого окна Своего стиля добавить (ставить после изменений в основном стиле):

Стиль для Админки
Код:
/*************************************************************
ADMIN Style
**************************************************************/

.punbb-admin .acchide, .punbb-admin #pun-main h1, .punbb-admin #pun-navlinks h2, .punbb-admin #pun-pagelinks h2, .punbb-admin #pun-status h2, .punbb-admin #pun-ulinks h2, .punbb-admin .forum h2, .punbb-admin .multipage .topic h2, .punbb-admin dl.post-sig dt span, .punbb-admin p.crumbs strong, .punbb-admin .divider hr, .punbb-admin .required label em, .punbb-admin .formsubmit label, .punbb-admin .submitfield label, .punbb-admin .modmenu label, .punbb-admin #pun-userlist .main h2 {
    font-size: 0;
    height: 0;
    width: 0;
    line-height: 0.0;
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

.punbb-admin h1, .punbb-admin h2, .punbb-admin h3 {
    font-size: 1em;
    font-weight: bold;
}

.punbb-admin h1, .punbb-admin h2 {
    border-right-style: none!important;
}

.punbb-admin ul, .punbb-admin dl, .punbb-admin li, .punbb-admin dd, .punbb-admin dt {
    padding: 0;
    list-style: none;
}

.punbb-admin {
    margin: 0px auto 30px auto;
    width: 100%;
    max-width: 1200px;
    min-width: 840px;
    padding: 0px 21px 0px 21px;
    border: none;
}

.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
    color: #557fae;
    text-decoration: none;
    transition: opacity 0.3s ease, color 0.27s ease, background-color 0.27s ease, margin 0s linear, padding 0s linear;
}

.punbb-admin #pun-title {
    margin: 0;
    border: none;
    height: 98px;
    position: absolute;
    left: 0;
    right: 0 !important;
    top: 37px;
    z-index: 2;
    width: 100% !important;
}

.punbb-admin #pun-title {
    background: #5381b5;
    border-bottom: 1px solid #406895 !important;
}

.punbb-admin #pun-title TABLE {
    border: none;
    width: 100%;
    margin: 0 auto;
    max-width: 1210px;
    min-width: 840px;
}

.punbb-admin #pun-title TD.title-logo-tdl {
    border: none;
    width: 100%;
    padding-top: 46px;
}

.punbb-admin #pun-title h1 span {
    margin-left: 13px;
    font-size: 1.8em;
    font-variant: normal;
    font-weight: 400;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
}

.punbb-admin #pun-title h1 {
    display: block;
    margin: -1px 0px 0px -1px;
}

.punbb-admin #pun-title h1 > span {
    color: #fff;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6);
}

.punbb-admin #pun-navlinks {
    display: block;
    position: absolute;
    z-index: 9999;
    top: 55px;
    max-width: 1201px;
    min-width: 840px;
    width: 100%;
    margin: 0;
}

.punbb-admin #pun-navlinks .container {
    padding-top: 7px;
    padding-bottom: 10px;
    height: 16px;
    font-family: Sans-serif;
    font-size: 14px;
    max-width: 1201px;
    text-align: right;
}

.punbb-admin #pun-navlinks li {
    display: inline;
    font-size: 1em;
    margin: 5px;
}

.punbb-admin #pun-navlinks li a {
    color: #fff;
    text-shadow: 0 -1px 0 #385b83;
    padding: .5em 1em;
    margin: -.6em;
    text-decoration: none !important;
    -webkit-border-radius: 0.327em;
    border-radius: 0.327em;
}

.punbb-admin #pun-ulinks {
    margin: 0;
    background: #314f71;
    border-width: 0 0 1px 0;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    min-width: 980px;
    z-index: 2;
}

.punbb-admin #pun-ulinks .container {
    border: 0;
    padding: 0.8em 1em;
    background: transparent;
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
}

.punbb-admin #pun-ulinks li, .punbb-admin #pun-ulinks li a {
    display: inline;
    border-left-style: none;
    border-left-width: 0px;
    white-space: nowrap;
    font-family: Sans-serif;
    text-decoration: none !important;
}

.punbb-admin #pun-ulinks a {
    color: #fff;
    padding: 11px;
}

.punbb-admin #pun-ulinks + div {
    margin-top: 145px;
}

.punbb-admin #pun-admain h2 {
    border-color: #5F95CC;
}

#pun-admain fieldset p {
    border-left-style: solid;
    border-left-width: 18em;
    margin-bottom: 3px;
    padding: 6px 0;
    position: relative;
    border-color: #dedfdf;
    background-color: #eee;
}

.punbb-admin #pun-admain .adcontainer {
    background-color: #ffffff;
    color: #333;
}

.punbb-admin .adcontainer {
    border-style: solid solid solid solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-radius: 4px;
    border-color: #dfdfdf !important;
    margin-top: 3px !important;
}

#pun-adnav {
    float: left;
    width: 14em;
    margin-left: -15em;
    display: inline;
}

.punbb-admin #pun-admain h2 {
    background: #fff;
    color: #4A7EB3;
    border-bottom: solid 2px #5F95CC;
}

#pun-admain h1 span, #pun-admain h2 span, #pun-admain legend span, #pun-admain .adformal h3 span {
    font-size: 1.1em;
}

.punbb-admin #pun-crumbs1 {
    font-weight: bold;
    overflow: hidden;
    margin-top: 0;
}

.punbb-admin #pun-break1 {
    margin: 0 1em;
    border-style: solid none;
    border-width: 1px 0;
    height: 0;
    margin: -2px 1em;
    position: relative;
    z-index: 1;
}

.punbb-admin .divider {
    border-color: #eee #fff #fff #fff;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

Скрипт переключатель между мобильным и десктопным вариантом дизайна для планшета от Алекса, ставить после скриптов мобильного дизайна:

Код:
<script>$('html.tablet').addClass('desktop'); //или mobile, если на планшете нужен мобильный</script>

Для Русфф рабочий вариант: Мобильный дизайн "Приложение". Установка сложная. пост №27

Отредактировано kolobdur74 (Вт, 12 Ноя 2019 18:11:34)

+7

41

kolobdur74 написал(а):

я говорил о без метотега, метотег упустил из виду

Да, без метатега всё так, но по-моему это мазохизм - без адаптивности пользоваться форумом нереально, поэтому такие случаи не принимал во внимание.

kolobdur74 написал(а):

Здесь мало профессиональных верстальщиков))

Так и я не профессиональный верстальщик) Тем не менее, по-моему несколько поправок внести под мобильный стиль, включив режим эмуляции в инспекторе, не сложнее, чем верстку для десктопа сделать.

0

42

Alex_63 написал(а):

Да, без метатега всё так, но по-моему это мазохизм - без адаптивности пользоваться форумом нереально, поэтому такие случаи не принимал во внимание.

К сожалению сайтов без него до фига..)) Правда тот же 4pda обходится просто приложением, правда только под андроид - у него есть мета-тег))

Alex_63 написал(а):

Так и я не профессиональный верстальщик) Тем не менее, по-моему несколько поправок внести под мобильный стиль, включив режим эмуляции в инспекторе, не сложнее, чем верстку для десктопа сделать.

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

Отредактировано kolobdur74 (Чт, 8 Авг 2019 17:04:34)

+1

43

kolobdur74
Стандартный мобильный стиль, подключаемый скриптом - точно не тянет на решение от сервиса.
Это даже если опустить то, что совершенно несочетающиеся даже по цветовому оформлению стиль для десктопа и "стандартный" для мобильных - как дизайнерское решение весьма сомнительно.

Но если уж свой адаптировать - не вариант и очень нужен стандартный, проще тогда уж в CSS это организовать для небольших экранов:

Код:
@media screen and (min-width: 540px) {
    /* тут весь код стиля под десктопы */
}
@meida screen and (max-width: 540px) {
    @import url(/style/Classic_DarkBlue/Classic_DarkBlue.css) /*или любой другой, хотя бы твой из этой темы*/
}

Будет работать на всех страницах и устройствах, безо всяких миганий и скриптов.

+1

44

Alex_63 написал(а):

Это даже если опустить то, что совершенно несочетающиеся даже по цветовому оформлению стиль для десктопа и "стандартный" для мобильных - как дизайнерское решение весьма сомнительно.

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

Alex_63 написал(а):

Но если уж свой адаптировать - не вариант и очень нужен стандартный, проще тогда уж в CSS это организовать для небольших экранов:

Я уже думал об этом, но придется еще применять импортант почти для всего кода..

Alex_63 написал(а):

безо всяких миганий и скриптов.

Если не делать удобную панель управления, которая скрывается и появляется при скролле вверх..

0

45

kolobdur74 написал(а):

К слову сказать любой шикарный дизайн с кучей картинок сделать нормально под мобилку точно невозможно - физический размер экрана не позволит это сделать..

Оставить самое основное, мешающие элементы выпилить в css

kolobdur74 написал(а):

Я уже думал об этом, но придется еще применять импортант почти для всего кода..

Зачем импортант? Куда его применять?
Больше 540px будет включаться десктопный стиль, менее - мобильный:

Alex_63 написал(а):

@media screen and (min-width: 540px) {
    /* тут весь код стиля под десктопы */
}
@meida screen and (max-width: 540px) {
    @import url(/style/Classic_DarkBlue/Classic_DarkBlue.css) /*или любой другой, хотя бы твой из этой темы*/
}

Т.е. один другому не мешает, раз на разной ширине вьюпорта подключаются.

kolobdur74 написал(а):

Если не делать удобную панель управления, которая скрывается и появляется при скролле вверх..

:dontknow: Ну тут выбирать, либо удобная панель, мелькания и баги, либо отсутствие оных. Хотя в принципе панель можно скриптом прикрутить, тестируя ширину экрана опять же:

Код:
if ($(window).width() < 540) {
    //...
}

0

46

Alex_63 написал(а):

Больше 540px будет включаться десктопный стиль, менее - мобильный:

Про этот вариант че то не подумал)) Думал о таком варианте:

<style>
@media screen and (max-width: 540px) {
#pun-navlinks .container {background: red;}
}
#pun-navlinks .container {background: green;}
</style>

Но вот этот вариант:

<style>
@media screen and (max-width: 540px) {
#pun-navlinks .container {background: red;}
}
@media screen and (min-width: 540px) {
#pun-navlinks .container {background: blue;}
}
#pun-navlinks .container {background: green;}
</style>

Нижний код без @media screen будет перебивать оба.. То есть НТМЛ верх будет перебивать свой стиль, если что-то будет добавляться пользователем..

Буду подумать)))

Отредактировано kolobdur74 (Чт, 8 Авг 2019 19:02:11)

+1

47

kolobdur74
Та я знаю (на всякий случай проверил - так и есть), ну и плюс в стандартном сервисном мобильном стиле (а я его предлагаю не выключать, используя совместно с каким-то из стандартных сервисных стилей) много чего с !important прописано, так что не перебить

kolobdur74 написал(а):

Нижний код без @media screen будет перебивать оба.. То есть НТМЛ верх будет перебивать свой стиль, если что-то будет добавляться пользователем..

Ну коды в HTML верх и так перебивают свой стиль, даже без обертки в @media, как минимум потому, что HTML верх ниже) А так, правки можно тоже оборачивать в @media либо писать их с учетом мобильного стиля

0

48

Здравствуйте, подскажите как исправить ошибку, с мобильного устройства выглядит вот так:
https://i1.imageban.ru/out/2020/01/10/3debbdd35e6c9eec95ab4b2a589a9eab.jpg

Плюс некоторые пункты не отображены картинкой а просто крестик, или.. типа того (вверху где удалить, редактировать):
https://i5.imageban.ru/out/2020/01/10/ac747af8776a3534c6ea4725f2fdda6b.jpg



Как можно изменить, чтоб текст не наезжал друг на друга, и где можно такие изменения внести? Что я делаю НЕ ТАК? =(

Коды которые внесены на форум:

Код:
/*************************************************************
A - SETUP
**************************************************************/
 
/* A1 Import the colour scheme
-------------------------------------------------------------*/
 
/* A1.1 */
  @import url(style_cs.css);
 
/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/
 
/* A2.1 */
html, html.desktop body {margin: 0; padding: 0}
 
/* A2.2 */
html.desktop .punbb * {
  margin: 0
  }
 
/* A2.3 */
html.desktop .punbb ul, html.desktop .punbb dl, html.desktop .punbb li, html.desktop .punbb dd, html.desktop .punbb dt {
  padding: 0;
  list-style: none;
  }
 
/* A2.4 */
html.desktop .punbb img {
  border:none
  }
 
/* A2.5 */
html.desktop .punbb .main table {
  table-layout: fixed;
  width: 100%;
  }
 
/* A2.6 */
html.desktop .checkfield input[type="checkbox"], html.desktop .radiofield input[type="radio"] {margin: 0 0.3em;}
 
/* A2.7 */
html.desktop p[class="checkfield"] *,
html.desktop div[class="checkfield"] *,
html.desktop fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }
 
  /* A3 Text setup
-------------------------------------------------------------*/
 
/* A3.1 */
html.desktop body {
  font-size: 100.00%;
  }
 
/* A3.2 */
html.desktop .punbb {
  font: normal 71.98% verdana, arial, helvetica, sans-serif;
  }
 
/* 3.3 */
html.desktop .punbb textarea, html.desktop .punbb input, html.desktop .punbb select, html.desktop .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }
 
/* A3.4 */
html.desktop .punbb h1, html.desktop .punbb h2, html.desktop .punbb h3, html.desktop .punbb h4, html.desktop .punbb table, html.desktop .punbb th {
  font-size: 1em;
  font-weight: normal;
  }
 
/* A3.5 */
html.desktop .punbb h1 span, html.desktop .punbb h2 span, html.desktop .punbb legend span {
  font-size: 1.1em;
  }
 
/* A3.6 */
html.desktop .punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }
 
/* A3.7 */
html.desktop .punbb address, html.desktop .punbb em {
  font-style: normal
  }
 
/* A3.8 */
html.desktop .punbb .post-content em {
  font-style: italic
  }
 
/* A3.9 */
html.desktop .punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
  }
 
/* A3.10 */
html.desktop .punbb a {
  text-decoration: underline
  }
 
/* A3.11 */
html.desktop .punbb optgroup {
  font-weight: bold;
  }
 
/* A4 Float clearing and hidden items
-------------------------------------------------------------*/
 
/* A4.1 */
html.desktop #pun:after,
html.desktop .punbb .container:after,
html.desktop .punbb .post-links ul:after,
html.desktop .punbb .main div.inline:after,
html.desktop .punbb .post-box:after,
html.desktop .punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
  }
 
/* A4.2 */
html.desktop .acchide,
html.desktop #pun-index #pun-main h1,
html.desktop #pun-navlinks h2,
html.desktop #pun-pagelinks h2,
html.desktop #pun-status h2,
html.desktop #pun-ulinks h2,
html.desktop .punbb .forum h2,
html.desktop .punbb .multipage .topic h2,
html.desktop .punbb dl.post-sig dt span,
html.desktop .punbb p.crumbs strong,
html.desktop .punbb .divider hr,
html.desktop .punbb .required label em,
html.desktop .punbb .formsubmit label,
html.desktop .punbb .submitfield label,
html.desktop .punbb .modmenu label,
html.desktop #pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
  }
 
/* A5 Basic page layout and borders
-------------------------------------------------------------*/
 
/* A5.1 */
html.desktop #pun {
  margin: 0 auto 0 auto;  
  width: 938px;  
background-color: #917a5a;
  }
 
/* A5.2 */
html.desktop .punbb {
  background: url(http://forumstatic.ru/files/0018/63/9f/85272.png) top center no-repeat,
url(http://forumstatic.ru/files/0018/63/9f/90057.jpg) bottom center no-repeat , url(http://forumstatic.ru/files/0018/63/9f/87204.jpg) 50% 0% repeat-y;  
  float: left;  
  height: auto;
  padding: 0px 19px;
  width: 900px;
  }
 
/* A5.3 */
html.desktop #pun-redirect, html.desktop #pun-maint {
  background-color: #917a5a;
  background-image: none !important;  
  float: none;  
  margin: 75px 20% 12px 20%;
  text-align: left;
  width: auto;
  }
 
/* A5.4 */
html.desktop .punbb .section, html.desktop .punbb .main {
  margin-bottom: 1em;
  }
 
/* A5.5 */
html.desktop .punbb .category, html.desktop .punbb .post {
  margin-top: 0.4em;
  }
 
/* A5.6 */
html.desktop .punbb #pun-category1, html.desktop .punbb .toppost, html.desktop .punbb .topicpost {
  margin-top: 0;
  }
 
/* 5.7 */
html.desktop #pun-post .topic {
  margin-top: 1em;
  }
 
/* A5.8 */
html.desktop .punbb .section, html.desktop .punbb .forum, html.desktop .punbb .formal, html.desktop .punbb .modmenu, html.desktop .punbb .info,
html.desktop .punbb .category, html.desktop .punbb .post {
  border-style: none;
  border-width: 0px
  }
 
/* A5.9 */
html.desktop .punbb .container {
  border-style: none;
  border-width: 0px;
  }
 
/* A5.10 */
html.desktop .punbb .section h2, html.desktop #pun-main h1, html.desktop #pun-main h2, html.desktop #pun-stats h2, html.desktop #pun-debug h2 {
  padding: 0.5em 1em;
  border-style: none ;
  border-width: 0;
  }
 
/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/
 
/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/
 
/* B1.1 */
html.desktop .punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  }
 
/* B1.2 */
html.desktop .punbb .post-sig dt {
  display: block;
  border-top: 1px solid #7b664d;
  width: 350px;
  margin: 5px 0;
  }
 
/* B1.3 */
html.desktop .punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 130%;
  }
 
/* B1.4 */
html.desktop .punbb .post-content img {
  vertical-align: text-bottom
  }
 
/* B1.5 */
html.desktop .punbb .post-content img.postimg {
  vertical-align: middle;  
  }
 
/* B1.6 */
html.desktop .punbb .post-content .blockcode, html.desktop .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;  
  }
 
/* B1.7 */
html.desktop .punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
  }
 
/* B1.8 */
html.desktop .punbb .post-content .quote-box, html.desktop .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  border-style: solid;
  border-width: 1px;  
  }
 
/* B1.9 */
html.desktop .punbb .quote-box cite, html.desktop .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;  
  }
 
/* B2 Information boxes
-------------------------------------------------------------*/
 
/* B2.1 */
html.desktop .punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 0px;
  margin: 0 0 1.1em 0;  
  }
 
/* B2.2 */
html.desktop .punbb .info-box * {
  padding: 0 0 0.7em 0;
  }
 
/* B2.3 */
html.desktop .punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
  }
 
/* B3 Pagination and posting links
-------------------------------------------------------------*/
 
/* B3.1 */
html.desktop .punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;  
  }
 
/* B3.2 */
html.desktop .multipage {
  margin-top: 3em;
  }
 
/* B3.3 */
html.desktop .linkst .pagelink {
  position: absolute;
  top: -3.4em;
  left: 1em;
  width: 24em; color: #2a2218;
  }
 
/* B3.4 */
html.desktop .linkst .postlink {
  position: absolute;
  top: -3.4em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: bold;  
  }
 
/* B3.5 */
html.desktop .punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1.1em;  
  }
 
/* B3.6 страница 1 */
html.desktop .linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left; color: #2a2218;
  }
 
/* B3.7 */
html.desktop .linksb .postlink {
  float: right;
  width: 16em;
  font-weight: bold;
  }
 
/* B3.8 */
html.desktop .subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  }
 
/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/
 
/* C1 Form layout
-------------------------------------------------------------*/
 
/* C1.1 */
html.desktop .punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;
  }
 
/* C1.2 */
html.desktop .punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;  
  }
 
/* C1.3 */
html.desktop .punbb .formsubmit input, html.desktop .punbb .formsubmit a, html.desktop .punbb .formsubmit span {
  margin: 0 0.6em 0 0;  
  background-color: transparent;
color: #000; border: solid 1px ##472b18 !important;
  }
 
/* C1.4 */
html.desktop .punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0;  
  }
 
/* C1.5 */
html.desktop .punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em;  
  }
 
/* C1.6 */
html.desktop .punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;  
  }
 
/* C1.7 */
html.desktop .punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0;  
  }
 
/* C1.8 */
html.desktop .punbb .fs-box {
  padding: 1em 0 0.8em 0;  
  }
 
/* C1.9 */
html.desktop .punbb .fs-box p, html.desktop .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0;  
  }
 
/* C1.10 */
html.desktop .punbb .inline .inputfield, html.desktop .punbb .inline .selectfield, html.desktop .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
background-color: transparent; color: ##472b18;
  }
 
/* C1.11 */
html.desktop .punbb .inline .infofield {
  clear:both;  
  }
 
/* C1.12 */
html.desktop .punbb .datafield br {
  display: none;  
  }
 
/* C1.13 */
html.desktop .punbb .required label, html.desktop .punbb .datafield span.input {
  font-weight: bold;  
  }
 
/* C1.14 */
html.desktop .punbb .datafield span.input a {
  font-weight: normal;  
  }
 
/* C1.15 */
html.desktop .punbb .areafield span.input, html.desktop .punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%; /* For IE */
  }
 
/* C1.16 */
html.desktop .punbb textarea, html.desktop .punbb .longinput input {
  width: 64%;
  margin: 0;  
border: #554835 solid 1px;
  }
 
/* C1.17 */
html.desktop .punbb .hashelp {
  position: relative;  
  }
 
/* C1.18 */
html.desktop .punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;  
  width: 36%;  
  }
 
/* c1.19 */
html.desktop .punbb #profile .helplinks {
  top: 1.5em;
  }
 
/* C1.20 */
html.desktop .punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  }
 
/* C1.21 */
html.desktop #pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;  
  }
 
/* C2 Table layout
-------------------------------------------------------------*/
 
/* C2.1 */
html.desktop .punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;  
  }
 
/* C2.2 */
html.desktop .punbb .main .tc2, html.desktop .punbb .main .tc3, html.desktop .punbb .main .tcmod {
  text-align: center;
  width: 10%;  
  }
 
/* C2.3 */
html.desktop .punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%;
  }
 
/* C2.4 */
html.desktop #pun-userlist .main .tcl,
html.desktop #pun-searchtopics .main .tcl,
html.desktop #pun-modviewforum .main .tcl {
  width: 40%;  
  }
 
/* C2.5 */
html.desktop #pun-userlist .main .tc2,
html.desktop #pun-searchtopics .main .tc2 {
  text-align: left;
  width: 20%;  
  }
 
/* C2.6 */
html.desktop #pun-debug table .tcl {
  width: 15%;
  white-space:normal;  
  }
 
/* C2.7 */
html.desktop #pun-debug .tcr {
  width: 90%;
  white-space: normal;
  }
 
/* C2.8 */
html.desktop #pun-index .tcl h3 {
  font-size: 1.2em;
  font-weight: bold;  
  color: #17090d;
  }
 
/* C2.9 */
html.desktop .punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;  
  }
 
/* C2.10 */
html.desktop .punbb td .modlist {
  display: block;
  padding-top: 0.3em;
  }
 
/* C2.11 */
html.desktop .punbb .main td {
  border-style: ridge none none ridge;
border-color: transparent;
  border-width: 0px 0 0 0px;
  padding: 0.8em 1em;  
  }
 
/* C2.12 */
html.desktop .punbb .main th {
  border-style: none none none ridge;
border-color: transparent;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em;  
  }
 
/* C2.13 */
html.desktop .punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0;  
  }
 
/* C2.14 */
html.desktop .punbb td div.tclcon {
  margin-left: 100px;
padding-top: 5px;
}
 
/* C2.15 */
html.desktop .punbb div.icon {
  float: left;
  display: block;
  width: 90px;
  height: 45px;
  padding-top: 1px;
  margin-top: 1px;
background-position: center;
background-repeat: no-repeat;
}
 
  /* C3 Topics
-------------------------------------------------------------*/
 
/* C3.1 */
html.desktop .punbb .post .container {
  border-style: none none solid none;
border-color: #7b664d;
  border-width: 1px;
  margin-top: -1px;
  padding-bottom: 1px;  
  }
 
/* C3.2 */
html.desktop .punbb .post h3 {
  border-style: none;
  border-width: 0px;  
  }
 
/* C3.3 */
html.desktop .punbb .post h3 span {
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  border-left-style: solid;
  border-color: #7b664d;
  border-left-width: 1px;  
  }
 
/* C3.4 */
html.desktop .punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal;  
  }
 
/* C3.5 Design by Wilhelm*/
html.desktop .punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: -1.5em;
  overflow: hidden;
  }
 
/* C3.6 */
html.desktop .punbb .post .post-author ul, html.desktop .punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;  
  }
 
/* C3.7 */
html.desktop .pa-author, html.desktop .pa-avatar {
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;  
  }
 
/* C3.8 */
html.desktop .pa-author a {  
  text-decoration: none
  }
 
/* C3.9 */
html.desktop li.pa-title {text-align: center;
  padding-bottom: 0.4em;
  font-weight: bold;  
  }
 
html.desktop li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0.7em;  
  }
 
/* C3.11 */
html.desktop .punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0;  
  }
 
/* C3.12 */
html.desktop .punbb .post-box {
  padding: 1em;  
  }
 
/*C3.13 */
html.desktop .punbb fieldset .post-box {
  margin-bottom: 0.8em;  
  }
 
/* C3.14 */
html.desktop .punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-color: #7b664d;
  border-left-width: 1px;  
  }
 
/* C3.15 */
html.desktop .punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top-style: solid;
border-color: #7b664d;
  border-top-width: 1px;
  background: transparent;
  text-align: right;  
  }
 
/* C3.16 */
html.desktop .punbb .post-links li {
  display: inline;
  padding-left: 1em;  
  }
 
/* C3.17 */
html.desktop .pl-email, html.desktop .pl-website {
  float: left;
  }
 
/* C3.18 */
html.desktop .punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
  }
 
/* C4 Moderator menu
-------------------------------------------------------------*/
 
/* C4.1 блок модменю и активны*/
html.desktop .punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;  
  }
 
/* C4.2 рсс атом ники*/
html.desktop .punbb .modmenu strong, html.desktop .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;  
  }
 
/* C4.3 */
html.desktop .punbb .modmenu .container strong {
  float: left;  
  }
 
/* C4.4 */
html.desktop .punbb .modmenu input {
  margin-left: 1em;  
  }
 
/* C5 Message boxes
-------------------------------------------------------------*/
 
/* C5.1 */
html.desktop .punbb .info .container {
  padding: 0.8em 1em;  
  }
 
/* C5.2 */
html.desktop .punbb .info .container .backlink {
  padding-top: 0.8em;  
  }
 
/* C6 Profile
-------------------------------------------------------------*/
 
/* C6.1 */
html.desktop #profile .container {
  padding-left: 18.6em;  
  }
 
/* C6.2 */
html.desktop #profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;  
  }
 
/* C6.3 */
html.desktop #profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;  
  }
 
/* C6.4 */
html.desktop #viewprofile ul, html.desktop #profilenav ul {
  border-style: solid;
  border-width: 1px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;  
  }
 
/* C6.5 */
html.desktop #viewprofile h2, html.desktop #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;  
  }
 
/* C6.6 */
html.desktop #viewprofile h2 span, html.desktop #profilenav h2 span {
  padding: 0 5px;
  position: relative;  
  }
 
/* C6.7 */
html.desktop #viewprofile li, html.desktop #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;  
  }
 
/* C6.8 */
html.desktop #viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;  
  }
 
/*C6.9 */
html.desktop #setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;  
  }
 
/* C6.10 */
html.desktop #viewprofile li strong, html.desktop #viewprofile li div, html.desktop #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;  
  }
 
/* C6.11 */
html.desktop .punbb img.avatardemo {
  float: right;  
  margin: 0 0 0.8em 1.8em;  
  }
 
/* C7 User list
-------------------------------------------------------------*/
 
/* C7.1 */
html.desktop #pun-userlist .formal, html.desktop #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;  
  }
 
/* C7.2 */
html.desktop #pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;  
  }
 
/* C7.3 */
html.desktop #pun-userlist .usertable table {
  border-style: solid;
border-color: #7b664d;
  border-width: 1px;  
  }
 
/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/
 
/* D1 Logo and description
-------------------------------------------------------------*/
 
/* D1.1 */
html.desktop #pun-title {
  margin: 0;
  border-style: none;
  border-width: 0;  
  }
 
/* D1.2 */
html.desktop #pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em;  
  }
 
/* D1.3 */
html.desktop #pun-title .container {
  border-style: none solid none solid;  
  }
 
/* D1.4 одно названьице шапка нормальная*/
html.desktop #pun-title h1 span {
  font-size: 1.5em;  
  }
 
html.desktop #pun-title table {
  border: none;
  height: 464px;
  width: 938px;  
  margin-left: -19px !important;  
  background-image: url(http://forumstatic.ru/files/0018/63/9f/98609.jpg);  
background-repeat: no-repeat;
background-position: top center;
background-color: transparent;
}
 
html.desktop #pun-title td.title-logo-tdl {
  border: none;
  width: 100%;  
}
 
html.desktop #pun-title td.title-logo-tdr {
  border: none;
vertical-align: top;
  top: 0px;
margin-top: 0px;
position: relative;  
}
 
/* D2 Page navigation
-------------------------------------------------------------*/
 
/* D2.1 */
html.desktop #pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;  
  }
 
/* D2.2 */
html.desktop #pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0;  
}
 
/* D2.3 */
html.desktop #pun-pagelinks .container li {
  display: inline
  }
 
/* D2.4 */
html.desktop #pun-pagelinks li a, html.desktop #pun-pagelinks a:link, html.desktop #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;  
  }
 
/* D2.5 */
html.desktop #pun-pagelinks a:active, html.desktop #pun-pagelinks a:focus {
  position:relative;
  margin: 0;  
  }
 
html.desktop #pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }
 
/* D3 Forum navigation
-------------------------------------------------------------*/
 
/* D3.1 */
html.desktop #pun-navlinks, html.desktop #pun-navlinks .container {
  border-style: none;
  border-width: 0;
  }
 
/* D3.2 */
html.desktop #pun-navlinks .container {
  padding: 0.7em 1em;
  position: absolute;
  top: 383px;
  text-align: right; width: 895px;
  }
 
/* D.3 */
html.desktop #pun-navlinks li {
  display: inline;
  padding-right: 1em;
  }
 
/* D3.4 */
html.desktop #pun-navlinks li a {
  font-size: 1.1em;
  }
 
/* D4 User links
-------------------------------------------------------------*/
 
/* D4.1 */
html.desktop #pun-ulinks {
  margin-top: 0;
  }
 
/* D4.2 */
html.desktop #pun-ulinks .container {
  border-top: none;
  position: absolute;
  top: 438px;
  text-align: right; width: 874px;
  }
 
/* D4.3 */
html.desktop #pun-ulinks li, html.desktop #pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 1px;
  white-space: nowrap;
  }
 
/* D4.4 */
html.desktop #pun-ulinks li a {
  padding: 0 0.3em 0 0.6em
  }
 
/* D4.5 */
html.desktop #pun-ulinks li.item1, html.desktop #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0
  }
 
/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/
 
/* D5.1 */
html.desktop #pun-status, html.desktop #pun-status .container, html.desktop #pun-status .container a {
  border-bottom: none;
  margin-bottom: 0; color: #625139;
  }
 
/* D5.2 */
html.desktop #pun-status .container {
  padding: 0.8em 1em 1em 1em;  
  }
 
/* D5.3 */
html.desktop #pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;  
  }
 
/* D5.4 */
html.desktop #pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;  
  }
 
/* D5.5 */
html.desktop #pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 0.8em 1em;
  font-size: 1.1em;  
  }
 
/* D5.6 */
html.desktop #pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;  
  }
 
/* D6 Announcement
-------------------------------------------------------------*/
 
/* D6.1 */
html.desktop #pun-announcement h2 {
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  position: relative;
  font-weight: bold;
  }
 
/* D6.2 */
html.desktop #pun-announcement h2 span {
display: none;
  }
 
/* D6.3 */
html.desktop #pun-announcement .container {
  padding: 4.3em 1em 1em 1em;
  }
 
/* D7 Statistics
-------------------------------------------------------------*/
 
/* D7.1 */
html.desktop #pun-stats .container {
  padding: 0.8em 1em; color: #4b3f31;
  }
 
/* D7.2 всего тем сообщений*/
html.desktop #pun-stats li.item1, html.desktop #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;  
  }
 
/* D7.3 */
html.desktop #pun-stats li.item3, html.desktop #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;  
  }
 
/* D7.4 */
html.desktop li#onlinelist {
  margin-top: 1em;
  border-top-style: none;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%;  
  }
 
/* D7.5 */
html.desktop li#onlinelist div {
  border-top-style: none;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;  
  }
 
/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/
 
/* D8.1 */
html.desktop #pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;  
  }
 
/* D8.2 */
html.desktop #pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }
 
/* D8.3 */
html.desktop #pun-about {
  margin-top: 0;  
  }
 
/* D8.4 */
html.desktop #pun-about .container {
  border-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;  
  }
 
/* D8.5 */
html.desktop #pun-about p span {
  display:block;
  padding-left: 50%;
  }
 
/* D8.6 */
html.desktop #pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0;
  border: none;  
  }
 
/* D8.7 */
html.desktop #pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
  }
 
/* D8.8 */
html.desktop #pun-break4 {
  margin: -2px 1em;
  border-style: solid none;
  border-width: 1px 0;
  position: relative;
  height: 0;
  z-index: 1;  
  }
 
/* D8.9 */
html.desktop div.punbb-admin #pun-about .container {
  border-top-style: solid;
  border-top-width: 1px;  
  }
 
html.desktop .punbb-admin, html.desktop #pun-admain1 .adformal p, html.desktop #pun-admain fieldset p{ background-color: #957f5e !important; border-left-color: #7b664d !important }
html.desktop #pun-admain fieldset, html.desktop .adcontainer {border-color: #7b664d !important;  
border-left-color: #7b664d !important;  
border-right-color: #7b664d !important;  
border-bottom: #7b664d !important; }
 
/* D9 Help file
-------------------------------------------------------------*/
 
/* D9.1 */
html.desktop #pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0;
  margin-bottom: 0.8em;  
  }
 
/* D9.2 */
html.desktop #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;
  }
 
/* D9.3 */
html.desktop #pun-help .formal p, html.desktop #pun-help .formal dd {
  margin-bottom: 1em
  }
 
/* D9.4 */
html.desktop #pun-help .formal ul, html.desktop #pun-help .formal dl {
  padding: 0 0 0 1em
  }
 
/* D9.5 */
html.desktop #pun-help .formal li {
  padding: 0;
  line-height: 130%
  }
 
/* D9.6 */
html.desktop #pun-help .formal li * {
  vertical-align: text-top
  }
 
/* D9.7 */
html.desktop #pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }
 
/* D9.8 */
html.desktop #pun-help .formal .parsedmsg, html.desktop #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }
 
html.desktop #button-spoiler {
  background: url("http://forumupload.ru/uploads/0009/2d/79/375-2.gif") no-repeat scroll 50% 50% transparent;}
 
html.desktop .pa-avatar img,
html.desktop .punbb img.avatardemo,
html.desktop #profile-left img {
border: 3px double #392111 !important;
}
 
html.desktop .title-logo-tdr *, html.desktop #tieser-bottom{  
  filter:alpha(opacity=80)!important;  
  opacity: 0.8!important;  
  -moz-opacity: 0.8!important;  
  -khtml-opacity: 0.8!important; }  
html.desktop .title-logo-tdr *:hover, html.desktop #tieser-bottom:hover{  
filter:alpha(opacity=100)!important;  
opacity: 1.0!important;  
-moz-opacity: 1.0!important;  
-khtml-opacity: 1.0!important; }
 
html.desktop #pun-live-rusff, html.desktop #pun-live-rusff-peoples {display: none}

html.desktop .punbb #image-area {
  background: #b9a98f;  
  border: 1px solid #7b664d;
}






/*************************************************************
ADMIN Style
**************************************************************/
 
.punbb-admin .acchide, .punbb-admin #pun-main h1, .punbb-admin #pun-navlinks h2, .punbb-admin #pun-pagelinks h2, .punbb-admin #pun-status h2, .punbb-admin #pun-ulinks h2, .punbb-admin .forum h2, .punbb-admin .multipage .topic h2, .punbb-admin dl.post-sig dt span, .punbb-admin p.crumbs strong, .punbb-admin .divider hr, .punbb-admin .required label em, .punbb-admin .formsubmit label, .punbb-admin .submitfield label, .punbb-admin .modmenu label, .punbb-admin #pun-userlist .main h2 {
    font-size: 0;
    height: 0;
    width: 0;
    line-height: 0.0;
    position: absolute;
    left: -9999px;
    overflow: hidden;
}
 
.punbb-admin h1, .punbb-admin h2, .punbb-admin h3 {
    font-size: 1em;
    font-weight: bold;
}
 
.punbb-admin h1, .punbb-admin h2 {
    border-right-style: none!important;
}
 
.punbb-admin ul, .punbb-admin dl, .punbb-admin li, .punbb-admin dd, .punbb-admin dt {
    padding: 0;
    list-style: none;
}
 
.punbb-admin {
    margin: 0px auto 30px auto;
    width: 100%;
    max-width: 1200px;
    min-width: 840px;
    padding: 0px 21px 0px 21px;
    border: none;
}
 
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
    color: #557fae;
    text-decoration: none;
    transition: opacity 0.3s ease, color 0.27s ease, background-color 0.27s ease, margin 0s linear, padding 0s linear;
}
 
.punbb-admin #pun-title {
    margin: 0;
    border: none;
    height: 98px;
    position: absolute;
    left: 0;
    right: 0 !important;
    top: 37px;
    z-index: 2;
    width: 100% !important;
}
 
.punbb-admin #pun-title {
    background: #5381b5;
    border-bottom: 1px solid #406895 !important;
}
 
.punbb-admin #pun-title TABLE {
    border: none;
    width: 100%;
    margin: 0 auto;
    max-width: 1210px;
    min-width: 840px;
}
 
.punbb-admin #pun-title TD.title-logo-tdl {
    border: none;
    width: 100%;
    padding-top: 46px;
}
 
.punbb-admin #pun-title h1 span {
    margin-left: 13px;
    font-size: 1.8em;
    font-variant: normal;
    font-weight: 400;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
}
 
.punbb-admin #pun-title h1 {
    display: block;
    margin: -1px 0px 0px -1px;
}
 
.punbb-admin #pun-title h1 > span {
    color: #fff;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6);
}
 
.punbb-admin #pun-navlinks {
    display: block;
    position: absolute;
    z-index: 9999;
    top: 55px;
    max-width: 1201px;
    min-width: 840px;
    width: 100%;
    margin: 0;
}
 
.punbb-admin #pun-navlinks .container {
    padding-top: 7px;
    padding-bottom: 10px;
    height: 16px;
    font-family: Sans-serif;
    font-size: 14px;
    max-width: 1201px;
    text-align: right;
}
 
.punbb-admin #pun-navlinks li {
    display: inline;
    font-size: 1em;
    margin: 5px;
}
 
.punbb-admin #pun-navlinks li a {
    color: #fff;
    text-shadow: 0 -1px 0 #385b83;
    padding: .5em 1em;
    margin: -.6em;
    text-decoration: none !important;
    -webkit-border-radius: 0.327em;
    border-radius: 0.327em;
}
 
.punbb-admin #pun-ulinks {
    margin: 0;
    background: #314f71;
    border-width: 0 0 1px 0;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    min-width: 980px;
    z-index: 2;
}
 
.punbb-admin #pun-ulinks .container {
    border: 0;
    padding: 0.8em 1em;
    background: transparent;
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
}
 
.punbb-admin #pun-ulinks li, .punbb-admin #pun-ulinks li a {
    display: inline;
    border-left-style: none;
    border-left-width: 0px;
    white-space: nowrap;
    font-family: Sans-serif;
    text-decoration: none !important;
}
 
.punbb-admin #pun-ulinks a {
    color: #fff;
    padding: 11px;
}
 
.punbb-admin #pun-ulinks + div {
    margin-top: 145px;
}
 
.punbb-admin #pun-admain h2 {
    border-color: #5F95CC;
}
 
#pun-admain fieldset p {
    border-left-style: solid;
    border-left-width: 18em;
    margin-bottom: 3px;
    padding: 6px 0;
    position: relative;
    border-color: #dedfdf;
    background-color: #eee;
}
 
.punbb-admin #pun-admain .adcontainer {
    background-color: #ffffff;
    color: #333;
}
 
.punbb-admin .adcontainer {
    border-style: solid solid solid solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-radius: 4px;
    border-color: #dfdfdf !important;
    margin-top: 3px !important;
}
 
#pun-adnav {
    float: left;
    width: 14em;
    margin-left: -15em;
    display: inline;
}
 
.punbb-admin #pun-admain h2 {
    background: #fff;
    color: #4A7EB3;
    border-bottom: solid 2px #5F95CC;
}
 
#pun-admain h1 span, #pun-admain h2 span, #pun-admain legend span, #pun-admain .adformal h3 span {
    font-size: 1.1em;
}
 
.punbb-admin #pun-crumbs1 {
    font-weight: bold;
    overflow: hidden;
    margin-top: 0;
}
 
.punbb-admin #pun-break1 {
    margin: 0 1em;
    border-style: solid none;
    border-width: 1px 0;
    height: 0;
    margin: -2px 1em;
    position: relative;
    z-index: 1;
}
 
.punbb-admin .divider {
    border-color: #eee #fff #fff #fff;
    margin-left: 5px !important;
    margin-right: 5px !important;
}
Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/
html,html.desktop body {background: #000 url(http://forumstatic.ru/files/0018/63/9f/85272.png) top center no-repeat; }
 
/* CS1.1 */
html.desktop .punbb .section .container, html.desktop .punbb .post-body, html.desktop .punbb .post-links,
html.desktop .punbb .formal fieldset .post-box, html.desktop #viewprofile li strong, html.desktop #viewprofile li div, html.desktop #setmods dd,
html.desktop .punbb .info-box, html.desktop .punbb #pun-main .info-box .legend {
  background-color: transparent;
  color: #000000;
  }
   
html.desktop .punbb td.tc2, html.desktop .punbb td.tc3 {
  background-color: transparent;
  color: #000000;
}
 
/* CS1.2 */
html.desktop .punbb .main .container, html.desktop .punbb .post .container, html.desktop .punbb .post h3, html.desktop .punbb-admin #pun-admain .adcontainer {
  background-color: transparent;
  color: #000000;
  }
 
/* CS1.3 */
html.desktop #pun-stats h2, html.desktop .punbb .main h1, html.desktop .punbb .main .category h2, html.desktop #pun-main #post-form h2 {
background-color: transparent;
background-image: url(http://forumstatic.ru/files/0018/63/9f/16898.jpg); background-position: top center; background-repeat: no-repeat;
color: #f2ecd7;
font-size: 14px;
font-variant: small-caps;
font-style: normal;
height: 45px;
margin-left: -33px !important;
padding-top: 20px !important;
text-align: center;
width: 938px;
  }
 
html.desktop #pun-redirect h1, html.desktop #pun-debug h2, html.desktop .punbb .main h2, html.desktop .punbb-admin #pun-admain h2 {
color: #b49556;
background-color: transparent;
background-image: url(http://forumstatic.ru/files/0018/63/9f/16898.jpg); background-position: top center; background-repeat: no-repeat;
font-size: 14px;
font-variant: small-caps;
font-style: normal;
height: 45px;
text-align: center;
padding-top: 20px !important;
  }
html.desktop #pun-redirect h1 {width: 100% !important}
 
/* CS1.4 */
html.desktop #pun-title, html.desktop #pun-title .container, html.desktop .punbb .modmenu .container {
  background-color: transparent;
  color:#000000;
  }
 
/* CS1.5 */
html.desktop .punbb legend span, html.desktop #viewprofile h2 span, html.desktop #profilenav h2 span, html.desktop .punbb-admin #pun-admain legend span {
  background-color: #f2ecd7;
  color: #000;
  }
 
/* CS1.6 */
html.desktop .punbb .post h3 span, html.desktop .punbb th, html.desktop #viewprofile li, html.desktop #setmods dl {
  background-color: transparent;
  color: #000000;
  }
 
/* CS1.7 */
html.desktop .punbb .quote-box, html.desktop .punbb .code-box {
color: #000000;
  }
 
/* CS1.8 */
html.desktop #pun-navlinks .container {
background-color: transparent;
color: #000000;
font-variant: small-caps;
text-align: center;
  }
 
html.desktop .offline li.pa-online strong { font-weight: normal }
 
html.desktop .punbb select {background-color: #917a5a; color: #472b18;}
 
html.desktop .punbb textarea, html.desktop .punbb input {
color: ##472b18;}
 
html.desktop .punbb .post h3 span {
  background-color: transparent ;
color: ##472b18; border-left: #7b664d;
}
 
html.desktop #pun .punbb .section {background-color: transparent; }
html.desktop #pun-title .title-logo span {display: none;}
 
/* CS2 Border colours
-------------------------------------------------------------*/
 
/* CS2.1 */
html.desktop .punbb .container, html.desktop .punbb .post-body, html.desktop .post h3, html.desktop #pun-title {
  border-color: transparent
  }
 
/* CS2.2 */
html.desktop .punbb .section, html.desktop .punbb .forum, html.desktop .punbb .formal, html.desktop .punbb .modmenu, html.desktop .punbb .info, html.desktop .punbb .category, html.desktop .punbb .post {
  border-color: transparent
  }
 
/* CS2.3 */
html.desktop #pun-stats h2, html.desktop .punbb .main h1, html.desktop .punbb .main h2, html.desktop #pun-debug h2, html.desktop .punbb-admin #pun-admain h2 {
  border-color: #000000;
  }
 
/* CS2.4 */
html.desktop .punbb td, html.desktop .punbb fieldset, html.desktop #viewprofile ul, html.desktop #profilenav ul, html.desktop .punbb .post .post-body,
html.desktop .punbb .post h3 span, html.desktop .post-links ul, html.desktop .post-links, html.desktop .usertable table {
  border-color: #000000;
  }
 
/* CS2.5 */
html.desktop .punbb th {
  border-color: transparent
  }
 
/* CS2.6 */
html.desktop .punbb .quote-box, html.desktop .punbb .code-box {
  border-color: #f2ecd7;
  }
 
html.desktop #pun-ulinks li, html.desktop #pun-announcement h2 span, html.desktop li#onlinelist, html.desktop #pun-help .formal .info-box h3.legend span { border-color: transparent }
 
html.desktop #pun-ulinks li a, html.desktop #pun-announcement h2, html.desktop li#onlinelist div, html.desktop #pun-help .formal .info-box h3.legend {border-color: transparent }
 
html.desktop .punbb .divider { border-style: none; border-color: transparent;
  }
 
html.desktop .punbb .formal fieldset .post-box, html.desktop .punbb .info-box {
  border: 1px solid #7b664d;
  }
 
html.desktop li.pa-online { border-left-color: transparent; }
 
html.desktop .punbb .post-sig dt {
  border-top-color: #7b664d !important;}
 
/* CS3 Links
-------------------------------------------------------------*/
 
/* CS3.1 */
html.desktop .punbb a, html.desktop .punbb a:link, html.desktop .punbb a:visited,
html.desktop .punbb-admin #pun-admain a, html.desktop .punbb-admin #pun-admain a:link, html.desktop .punbb-admin #punbb-admain a:visited {
color: #283852;
/* text-shadow: 0px 0px 1px #978362; */
border-bottom: 0px none transparent; text-decoration: none;
  }
 
html.desktop .punbb li.isactive a, html.desktop .punbb li.isactive a:link, html.desktop .punbb li.isactive a:visited {
  color: #5c2038; text-decoration: none;
  }
 
html.desktop #pun-ulinks li a {color: #f2ecd7; }
html.desktop #pun-ulinks li a:active, html.desktop #pun-ulinks li a:hover, html.desktop #pun-ulinks li a:focus {color: #f2ecd7;}
 
/* CS3.2 */
html.desktop .punbb a:hover, html.desktop .punbb a:focus, html.desktop .punbb a:active, html.desktop .punbb-admin #pun-admain .nodefault,
html.desktop .punbb-admin #punbb-admain a:hover, html.desktop .punbb-admin #punbb-admain a:focus, html.desktop .punbb-admin #punbb-admain a:active {
  color: #5c2038;
  border-bottom: 0px none transparent;
  text-decoration: none;  
  }
 
/* CS3.3 */
html.desktop #pun-navlinks a {
  color: #f2ecd7;
  font-weight: normal;
  border-bottom: 0px none transparent;
  text-decoration: none;
  }
 
/* CS3.4 */
html.desktop #pun-navlinks a:hover, html.desktop #pun-navlinks a:focus, html.desktop #pun-navlinks a:active {
  color: #f9f8ed;
  font-weight: normal;
font-style: normal;
  text-decoration: none;
  }
 
html.desktop #pun-pagelinks a:active, html.desktop #pun-pagelinks a:focus {
  background-color: transparent;
  color: #ae9363; }
html.desktop #pun-pagelinks a { color: #5c2038;}
 
html.desktop #pun-main .linksb .pagelink a:active, html.desktop #pun-main .linksb .pagelink a:focus, html.desktop #pun-main .linkst .pagelink a:active, html.desktop #pun-main .linkst .pagelink a:focus {
  background-color: transparent;
  color: #000000; }
html.desktop #pun-main .linksb .pagelink a, html.desktop #pun-main .linkst .pagelink a { color: #5c2038;}
 
html.desktop #pun-stats.section .statscon .container #onlinelist.item7 {display: none;}  
 
html.desktop #pun-main div.catleft, html.desktop #pun-main div.catright {display: none}
 
html.desktop .linkst .pagelink, html.desktop .linkst .postlink, html.desktop .punbb .linksb,  
html.desktop .linksb .pagelink, html.desktop .linksb .postlink, html.desktop .subscribelink
html.desktop {color: #5c2038 !important}
 
html.desktop #pun-crumbs2 .container, html.desktop #pun-crumbs1 .container {color:#283852}
 
html.desktop #font-area, html.desktop #size-area, html.desktop #video-area, html.desktop #color-area, html.desktop #smilies-area {background-color: #917a5a}
 


HTML верх

Код:
<style type="text/css">  
#garland {
position:absolute;
top:0;
left:0;
background-image:url('http://s3.uploads.ru/qLMz6.png');
height:36px;
width:100%;
overflow:hidden;
z-index:99;
}  
html.desktop #nums_1 {padding:100px;}  
html.desktop .garland_1 {background-position:0 0;}  
html.desktop .garland_2 {background-position:0 -36px;}  
html.desktop .garland_3 {background-position:0 -72px;}  
html.desktop .garland_4 {background-position:0 -108px;}  
html.desktop </style>  
 

 
<script type="text/javascript">  
function garland() {  
nums = document.getElementById('nums_1').innerHTML  
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}  
html.desktop if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}  
html.desktop if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}  
html.desktop if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}  
}  
 
html.desktop setInterval(function(){garland()}html.desktop , 300)  
html.desktop </script>








<style type="text/css">
#share a {opacity: 0.6;}
html.desktop #share a:hover {opacity: 1;}
html.desktop </style>


<style type="text/css">
.pa-respect a[href*="&v=0&cod"],
html.desktop .pa-respect a[href*="&v=1&cod"]{
   display:inline-block;
   margin-top:-7px;
}
html.desktop .pa-respect a[href*="&v=1&cod"] img,
html.desktop .pa-respect a[href*="&v=0&cod"] img {
  visibility:hidden;
  /*размеры для картинок  +/- */
  height:34px;
  width:34px;
}
html.desktop .pa-respect a[href*="&v=1&cod"]{
   background:url(http://forumstatic.ru/files/0018/63/9f/72757.png) center 100% no-repeat; /*картинка для +*/
}
html.desktop .pa-respect a[href*="&v=0&cod"] {
   background:url(http://forumstatic.ru/files/0018/63/9f/22261.png) center  100% no-repeat; /*картинка для  - */
}
html.desktop </style>



<!-- Общий мобильный стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/77571.css">
 
<!-- Цветовая схема для мобильного стиля. Зеленый стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/81991.css">
 
<!-- Скрипты для мобильного стиля -->
<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
<script>
$( document ).ready(function() {
 
$('html.mobile .punbb').prepend('<div class="newheader"></div>');
$('html.mobile .newheader').append( $('#pun-title'),$('#pun-navlinks'),$('#pun-ulinks') );
 
$('html.mobile .newheader').prepend('<input type="checkbox" id="nav-toggle" hidden>','<input type="checkbox" id="nav-toggle2" hidden>','<label for="nav-toggle" class="nav-toggle mask-content" onclick></label>','<label for="nav-toggle2" class="nav-toggle2 mask-content2" onclick></label>');
$('html.mobile #pun-navlinks').prepend('<label for="nav-toggle" class="nav-toggle" onclick></label>', $('#pun-status'));
$('html.mobile #pun-ulinks').prepend('<label for="nav-toggle2" class="nav-toggle2" onclick></label>');
 
 
var g_top = 0;
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( top > g_top ) {
      $('.newheader').fadeOut(400);
    } else {
      $('.newheader').fadeIn(400);
    }
    
    g_top = top;    
  });
 
});
</script>

HTML низ

Код:
<div style="position:fixed; 
z-index:1200; 
height:63px; 
width:111px; 
bottom: 0px; 
left: 30px;
"> 
<a href="http://nikogde.ru/#pun-stats"><img src="http://forumstatic.ru/files/0018/63/9f/21075.png" /></a> 
</div>



<!-- Проверка имени при регистрации © Alex_63 -->
<style type="text/css">
#username.normal{background-color: #A8ECA8;}
html.desktop #username.error{background-color: rgb(255,190,190);}
html.desktop .stclr.normal{color: green;}
html.desktop .stclr.error {color: red;}
html.desktop img.preloader{width:12px;height:12px;margin-left:3px;}
html.desktop </style>
<script type="text/javascript">
var allowSymbols = 2; //Запрет спецсимволов: 0 - отключен, html.desktop 1 - только при регистрации, html.desktop 2 - включен
if($('#register,html.desktop #profile1').length)(function(){
  var L='http://forumstatic.ru/files/0015/c4/3f/45775.js';
  var ST='<scr'+'ipt type="text/javascript" src="';
  var Es='"><'+'/script>';var LL = ST + L + Es;
  document.write(LL);
}html.desktop ())
</script>


<a href="http://nikogde.ru/viewtopic.php?id=150"><strong>ИЩЕМ ОТВЕТЫ ВМЕСТЕ:</strong> </a>
<div id="rr"></div>


<script type="text/javascript">
$(function(){
$('#rr').after('<div class="container"><table id="bib" cellspacing="0" width=100%><tr><th scope="col" width=65%>--</th><th scope="col" width=25%>--</th><th scope="col" width=10%>Автор</th><th scope="col" width=2%>-</th></tr></table></div>');
$.get('export.php?type=rss&tid=150','',processXML);
function processXML(data){
$(data).find('item:lt(1)').each(function(){  
var JAuthor=$(this).find('author').text().slice(14,-1);
var JTitle=$(this).find('title').text(); 
var JLink=$(this).find('link').text(); 
var JContent=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-5);
$('#bib').append('<tr><td style="font-size: 14px; font-family: Trebuchet MS; color: #101110;"><br>'+JContent+'<br><br></td><td style="text-align:left;"><b>'+ JAuthor +'</b></td><td><b></b></td><td style="text-align:center"></td></tr>'); });
} });
</script>

<script>$("#pun-stats").append('<strong>   <br><center>САМОЕ НОВОЕ С НАШЕГО ФОРУМА</center></strong><table id=TBl cellspacing=1 ></table>') 
.find("#TBl").load("/search.php?action=show_recent #pun-main table tr:lt(6)");</script>



<script type='application/ld+json'> 
html.desktop {
  "@context": "http://www.schema.org",
  "@type": "WebSite",
  "name": "Никогде-Форум Магов",
  "alternateName": "Форум Никогде",
  "url": "http://nikogde.ru/"
}
 </script>



<style>      /* Звёздочки в профиль Автора в посте за Определенное кол-во сообщений */
html.desktop li.pa-zwezda {
position:relative;
width:200px!important;  /* Ширина поля для звёздачек */
white-space:pre-wrap;
z-index:100;
margin-top:-5px;
margin-bottom:-0px;
margin-left: 3px;
color:red;
}
html.desktop li.pa-zwezda img{
width:23px;
height:23px;
}
html.desktop </style>
<script type="text/javascript">
var MyZwzd=[
"http://forumstatic.ru/files/0018/63/9f/47916.png",html.desktop 20,
html.desktop "http://forumstatic.ru/files/0018/63/9f/19968.png",html.desktop 100,
html.desktop "http://forumstatic.ru/files/0018/63/9f/24676.png",html.desktop 500,
html.desktop "http://forumstatic.ru/files/0018/63/9f/10000.png",html.desktop 1000,
html.desktop "http://forumstatic.ru/files/0018/63/9f/54766.png",html.desktop 5000,
html.desktop "End"];
$(".post-author .pa-posts").each(function () {
var zw=0;zw=$(this).html().replace('Сообщений: ','');zw=Math.floor(zw),ZWleng=MyZwzd.length-2;//alert(MyZwzd[1])
if(zw>=MyZwzd[1]){var L1=[],L2=[],a=false;for(i=0; i<ZWleng; i+=2){j=ZWleng-i;
L1[i/2]=Math.floor(zw/MyZwzd[j]);if(L1[i/2]>0){a=true};L2[i/2]=MyZwzd[j-1];zw=zw-MyZwzd[j]*L1[i/2];}
html.desktop if(a){$(this).parent("ul").children(".pa-title").after('<li class="pa-zwezda"></li>');
for (var i=0; i<L1.length; i++){if(L1[i]>0){var zwzdaImg='<img src="'+L2[i]+'" title="За '+MyZwzd[ZWleng-i*2]+' cообщений!"/>';
   for (var x=0; x<L1[i]; x++){$(this).parent("ul").children(".pa-zwezda").append(zwzdaImg);}}}}};}html.desktop );
</script>








<script type="text/javascript" src="//vk.com/js/api/openapi.js?146"></script>

<!-- VK Widget -->
<div id="vk_contact_us"></div>
<script type="text/javascript">
VK.Widgets.ContactUs("vk_contact_us", html.desktop {text: "Связь с Админом НИКОГДЕ"}html.desktop , 449932303);
html.desktop </script>




<style type="text/css">
#button-smiles {background-image:url('http://i018.radikal.ru/0805/21/e9ec1c89475a.jpg'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat}
html.desktop </style>
 

<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")
}html.desktop );
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")
}html.desktop );
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")}html.desktop )
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
}html.desktop );


</script>
<script><!--Своя картинка или Слово в Панель навигации -->
var Img_Word=0;   //0-Картинка;1-Cлово /Ставим картинку или Слово ?
   navlinks=new Array(
  "navadmin",html.desktop "http://forumstatic.ru/files/0018/63/9f/20669.png",   html.desktop // Администрирование
  "navlogin",html.desktop "http://forumstatic.ru/files/0018/63/9f/12693.png",   html.desktop // Войти
  "navlogout",html.desktop "http://forumstatic.ru/files/0018/63/9f/12693.png"   // Выход - !ПОСЛЕДНИЙ элемент без запятой
)
var s,html.desktop i;for (i=0; i < navlinks.length; i++){s=navlinks[i+1];
   if(!Img_Word){s='<img class="navlinks" src="'+s+'" border="0" />'}
   $("#"+navlinks[i]+" a").html("<span>"+s+"</span>");i++;}
html.desktop </script>
<style type="text/css">
.punbb div.icon {
float: left; 
display: block; 
border-style: none none none none; 
height: 50px; 
width: 50px;
}
html.desktop .punbb td div.tclcon {
margin-left: 50px;
}
html.desktop Div.icon {
background-image : url(http://forumstatic.ru/files/0018/63/9f/85737.png);
background-repeat: no-repeat;
}
html.desktop TR.inew Div.icon {
background-image : url(http://forumstatic.ru/files/0018/63/9f/69478.png);
background-repeat: no-repeat;
}
html.desktop TR.isticky Div.icon {
background-image : url(http://forumstatic.ru/files/0018/63/9f/53178.png);
background-repeat: no-repeat;
}
html.desktop TR.iclosed Div.icon {
background-image : url(http://forumstatic.ru/files/0018/63/9f/50308.png);
background-repeat: no-repeat;
}
html.desktop </style>

<!-- Аватар по умолчанию / Deff, html.desktop Alex_63 -->
<script type="text/javascript">
var DefAvtr = 'http://forumstatic.ru/files/0018/63/9f/44826.png'; //Ссылка на аватар по умолчанию
$('#pun-viewtopic,html.desktop #pun-messages').find('.pa-title').each(function(){
var L='<li class="pa-avatar item2"><img class="defavtr" src="'+DefAvtr+'" alt="Аватар"/></li>';
if($(this).parent().find('.pa-avatar').html()==null)$(this).after(L);}html.desktop );
$('#profile-left strong:contains("Нет аватара")').parent().html('<div><img src="'+DefAvtr+'"/></div>');
</script>


<!-- Последнее сообщение на форуме --><script type="text/javascript">
eval($.ajax({url:'/export.php?type=js&max=1',async:false,cache:false}).responseText);var g=content[0][2],q=content[0][3];
$('#pun-status .container').append('<span>Последние новости форума: </span><strong><a href="'+g+'">'+q+'</a></strong>');
</script>


<!-- Просмотр местонахождения пользователя -->
<script src="http://forumstatic.ru/files/0015/c4/3f/96023.js"></script>


<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?146"></script>


<a href="https://abbat-toir.livejournal.com/"><img src="http://forumstatic.ru/files/0018/63/9f/70690.jpg"></a>
<a href="https://vk.com/club88610088"><img src="http://forumstatic.ru/files/0018/63/9f/29597.jpg"></a>
<a href="https://vk.com/darknesslightness"><img src="http://forumstatic.ru/files/0018/63/9f/78119.jpg"></a>
<a href="http://www.mstislavovna.ru/"><img src="http://forumstatic.ru/files/0018/63/9f/97283.jpg"></a>
<a href="https://filaterest.livejournal.com/"><img src="http://forumstatic.ru/files/0018/63/9f/31015.jpg"></a>

Мобильный стиль от форума отключен.

0

49

mst6666 написал(а):

Здравствуйте, подскажите как исправить ошибку, с мобильного устройства выглядит вот так:

Какой телефон? С какого браузера смотрите? Адрес форума тоже желательно указывать, даже если на скриншоте виден..

Первый скриншот у вас - это самый верх? Меню навигации у вас отображается? Попробуйте в самый низ НТМЛ верха поставить вот этот код и посмотрите не исправится ли:

Код:
<style>
html.mobile .punbb:not(#pun-profile) .main table tr {margin: 0 0 20px 0;}
html.mobile .main .tcr {margin: 2vw 0 20px 0;}
</style>

Сделайте скриншот как теперь стало..

mst6666 написал(а):

Плюс некоторые пункты не отображены картинкой а просто крестик, или.. типа того (вверху где удалить, редактировать):

Это иконки, сделаны не картинками, а через мнемонику - так и задумано было..

+1

50

kolobdur74 написал(а):

Какой телефон? С какого браузера смотрите? Адрес форума тоже желательно указывать, даже если на скриншоте виден..

Андройд, Самсунговский браузер по умолчанию, и Яндекс браузер.
http://nikogde.ru

kolobdur74 написал(а):

Меню навигации у вас отображается?

Да, навигация отображается хорошо.

kolobdur74 написал(а):

Попробуйте в самый низ НТМЛ верха поставить вот этот код и посмотрите не исправится ли:

На Хроме стало отображаться  хорошо, на самсунговском по прежнему криво.
https://i6.imageban.ru/out/2020/01/10/ef3ba950e6a8a3f7b84026f551da28d3.jpg

В браузере Яндекса почти ровно, кроме меню заехавшего на название форума
https://i5.imageban.ru/out/2020/01/10/7a8217b9df25781f1ba9cf05a0cd534c.jpg

Отредактировано mst6666 (Пт, 10 Янв 2020 15:25:34)

0

51

mst6666 написал(а):

Андройд

Модель какая? У меня через самсунговский браузер отображается нормально.. Попробуйте почистить кеш браузера, если ничего не изменится бум подумать..

Замените код, что я выше давал на этот (добавил правку для названия форума, а то название вылезает за пределы - уменьшил надпись):

Код:
<style>
html.mobile .punbb:not(#pun-profile) .main table tr {margin: 0 0 20px 0;}
html.mobile .main .tcr {margin: 2vw 0 20px 0;}
html.mobile .punbb h1.title-logo {font-size: 3.5vw;}
</style>

Отредактировано kolobdur74 (Пт, 10 Янв 2020 15:44:06)

+1

52

kolobdur74 написал(а):

Модель какая? У меня через самсунговский браузер отображается нормально.. Попробуйте почистить кеш браузера, если ничего не изменится бум подумать..

Почистила, не помогло.

Проверила с двух самсунгов, на S6 вот такое не ровное отображение как на скринах, на j7 ровное, но меню поехавшее все равно везде, ну, с заездом на надпись, хотя вроде сделала:

kolobdur74 написал(а):

Замените код, что я выше давал на этот (добавил правку для названия форума, а то название вылезает за пределы - уменьшил надпись):

То есть в итоге, у меня хорошо отображается (не считая заезда меню на надпись): на яблоке в Сафари, в Хроме, в Яндекс Браузере, на Самсунговском браузере на j7
Неровно отображается на Самсунговском s6

0

53

И сюда тоже влезу, можно ли убрать что бы на смартфоне не было видно этого (отмечено на скринах)
https://i.imgur.com/d0m00Ycb.jpg https://i.imgur.com/ecdwLiAb.jpg

0

54

mst6666 написал(а):

не считая заезда меню на надпись

А сделайте скриншот как выглядит..

mst6666 написал(а):

Неровно отображается на Самсунговском s6

Так же как вы показывали на скринах выше? Подумаю, что можно сделать.. Наверное уже завтра - сегодня не успею..

ACT3255 написал(а):

И сюда тоже влезу, можно ли убрать что бы на смартфоне не было видно этого (отмечено на скринах)

Завтра гляну - сегодня наверное не успею..

+2

55

kolobdur74 написал(а):

А сделайте скриншот как выглядит..

Да, выглядит как и было:
https://i4.imageban.ru/out/2020/01/10/eb15a578503c1be1302c1b73dcad3755.jpg

0

56

mst6666 написал(а):

Да, выглядит как и было:

Попробуйте заменить мой код на этот:

Код:
<style>
html.mobile .main .tcr span {display: block; margin: 20px 0;}
html.mobile .punbb h1.title-logo {font-size: 3.5vw;}
</style>

0

57

ACT3255 написал(а):

И сюда тоже влезу, можно ли убрать что бы на смартфоне не было видно этого (отмечено на скринах)

Уберите лишний тег из НТМЛ верха:

<p><p>

А сюда добавьте класс, чтобы была уникальная привязка для скрытия на мобильных устройствах (что то вроде obv):

<div class="post-box obv">

И замените из НТМЛ низа этот скрипт:

<!--Индикатор групп-->
<script type="text/javascript">
var text="<center><font color=Red> Администратор </font> | <font color=Yellow> Модератор </font> | <font color=magenta> VIP пользователь </font> | <font color=Green> Пользователь </font> | <font color=white> Новичок </font></center>"
pa=document.getElementById("pun-stats")
pa.style.position = "relative"
pa.innerHTML = "<div style=\"position:absolute; z-index:2; center: 10px; top: 45px; width: 100%;\">"+text+"</div>"+ pa.innerHTML
</script>

На вот этот:

Код:
<!--Индикатор групп-->
<script type="text/javascript">
var text="<center><font color=Red> Администратор </font> | <font color=Yellow> Модератор </font> | <font color=magenta> VIP пользователь </font> | <font color=Green> Пользователь </font> | <font color=white> Новичок </font></center>"
pa=document.getElementById("pun-stats")
pa.style.position = "relative"
pa.innerHTML = "<div class=\"indicator\" style=\"position:absolute; z-index:2; center: 10px; top: 45px; width: 100%;\">"+text+"</div>"+ pa.innerHTML
</script>

Аналогично - добавил класс для привязки.. Когда сделаете - дам код для скрытия на мобильных устройствах..

+1

58

kolobdur74
сделал.

0

59

ACT3255 написал(а):

сделал.

Скиньте в ЛС весь ваш НТМЛ верх - что-то у вас еще ломает НТМЛ, никак найти не могу..

0

60

kolobdur74
Сори я тупанул, сейчас поправлю и вышлю.
Добавлено спустя 3 минуты 18 секунд:
выслал.

Отредактировано ACT3255 (Сб, 11 Янв 2020 13:40:11)

0


Вы здесь » Единый форум поддержки » Каталог стилей » Мобильный дизайн "Приложение". Установка сложная.