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

Страница: « 1 2 3 4

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

Поделиться1Пн, 28 Янв 2019 01:11:36

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7390
Уважение: +5876
Позитив: +6482
Пол: Мужской
Последний визит:
Чт, 21 Ноя 2024 21:12:40

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

Установка:

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

Идем в Администрирование - Раскрутка и ставим в Имя: viewport, в Содержимое: width=device-width, должно получиться вот так:

Переводим Свой стиль в только для ПК (для тех у кого стоит стиль от сервиса надо предварительно его перенести в Свой стиль) Для этого идем в эту тему: Библиотека 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/ (смотреть на мобильном устройстве или через инструменты веб-разработчика.

Скриншоты

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

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

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

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

Стиль для Админки

Код:

/*************************************************************
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)

Поделиться61Пн, 13 Янв 2020 10:45:29

Автор: mst6666
Заслуженный
Зарегистрирован: Вт, 6 Июн 2017
Сообщений: 94
Уважение: +8
Позитив: +36
Последний визит:
Чт, 5 Ноя 2020 11:06:16

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

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

так же =(

Поделиться62Пн, 13 Янв 2020 11:08:41

Автор: tartar1
поэт..
Зарегистрирован: Вс, 16 Апр 2017
Сообщений: 1736
Уважение: +208
Позитив: +1070
Предупреждения: 1+1+1 ‡
Последний визит:
Вчера 06:42:38

mst6666
у вас межстрочное рассояние

Поделиться63Пн, 13 Янв 2020 11:10:19

Автор: mst6666
Заслуженный
Зарегистрирован: Вт, 6 Июн 2017
Сообщений: 94
Уважение: +8
Позитив: +36
Последний визит:
Чт, 5 Ноя 2020 11:06:16

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

mst6666
у вас межстрочное рассояние

Спасибо, а где в коде оно находится чтоб его подгонять?

Поделиться64Пн, 13 Янв 2020 13:02:01

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7390
Уважение: +5876
Позитив: +6482
Пол: Мужской
Последний визит:
Чт, 21 Ноя 2024 21:12:40

mst6666, а вы давно обновляли этот браузер?

Поделиться65Сб, 1 Фев 2020 20:42:35

Автор: ♛VIP♛.TRANSCEIVER.
Заслуженный
Зарегистрирован: Сб, 1 Фев 2020
Сообщений: 250
Уважение: +49
Позитив: +146
Пол: Мужской
Последний визит:
Вчера 11:02:33

Всем привет.Люди помогите моему форуму сделать шапку.Вот мой форум Ссылка а вот картинка.
пожалуйста не откажите мне в моей просьбе.Эту картинку нужно поставить в верху форума.

Отредактировано ♛VIP♛.TRANSCEIVER. (Сб, 1 Фев 2020 20:43:42)

Поделиться66Сб, 1 Фев 2020 20:55:52

Автор: ACT3255
Заслуженный
Зарегистрирован: Пт, 7 Ноя 2014
Сообщений: 2899
Уважение: +1599
Позитив: +2187
Пол: Мужской
Последний визит:
Сегодня 18:47:01

♛VIP♛.TRANSCEIVER.
Не туда пишите...
А так вот
в HTML верх

Код:

<!-- шапка -->
<style>
#pun-title {
    background: url(http://forumupload.ru/uploads/0000/14/1c/36897/44716.jpg)no-repeat center top;
    height: 220px;
}
</style>

Отредактировано ACT3255 (Сб, 1 Фев 2020 20:59:47)

Поделиться67Сб, 1 Фев 2020 21:14:23

Автор: ♛VIP♛.TRANSCEIVER.
Заслуженный
Зарегистрирован: Сб, 1 Фев 2020
Сообщений: 250
Уважение: +49
Позитив: +146
Пол: Мужской
Последний визит:
Вчера 11:02:33

Спасибо!!!!!!почти Работает!!!!

Поделиться68Чт, 26 Мар 2020 14:50:21

Автор: ♛VIP♛.TRANSCEIVER.
Заслуженный
Зарегистрирован: Сб, 1 Фев 2020
Сообщений: 250
Уважение: +49
Позитив: +146
Пол: Мужской
Последний визит:
Вчера 11:02:33

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

шапка у вас на форуме не маленькая такая получилась))

Какая есть. :flirt:

Поделиться69Ср, 16 Сен 2020 17:06:04

Автор: SAn4Es_TV
Стремящийся
Зарегистрирован: Вт, 15 Сен 2020
Сообщений: 6
Уважение: 0
Позитив: 0
Последний визит:
Ср, 16 Сен 2020 20:19:54

Здравствуйте!
Можете помочь исправить данную проблему?

Поделиться70Ср, 16 Сен 2020 17:12:01

Автор: ACT3255
Заслуженный
Зарегистрирован: Пт, 7 Ноя 2014
Сообщений: 2899
Уважение: +1599
Позитив: +2187
Пол: Мужской
Последний визит:
Сегодня 18:47:01

SAn4Es_TV

Что бы Вам помочь.

Поделиться71Ср, 16 Сен 2020 17:13:47

Автор: SAn4Es_TV
Стремящийся
Зарегистрирован: Вт, 15 Сен 2020
Сообщений: 6
Уважение: 0
Позитив: 0
Последний визит:
Ср, 16 Сен 2020 20:19:54

http://wforum.hutt.ru

Отредактировано SAn4Es_TV (Ср, 16 Сен 2020 17:25:10)

Поделиться72Ср, 16 Сен 2020 17:27:06

Автор: SAn4Es_TV
Стремящийся
Зарегистрирован: Вт, 15 Сен 2020
Сообщений: 6
Уважение: 0
Позитив: 0
Последний визит:
Ср, 16 Сен 2020 20:19:54

А также как исправить эту проблему?

Поделиться73Ср, 16 Сен 2020 21:41:18

Автор: МАЧОнаДАЧЕ
Заслуженный
Зарегистрирован: Ср, 4 Дек 2019
Сообщений: 936
Уважение: +449
Позитив: +820
Пол: Мужской
Последний визит:
Вс, 11 Авг 2024 11:10:31

SAn4Es_TV
Не стоит изобретать велосипед.... Он уже изобретён.
Если вы хотя бы поверхностно не робите в кодинге то проще вам поставить стандартный дизайн от сервиса (и не париться).

1. В админке поставьте такой стиль и такие настройки (стрелки на скрине)

2. То что вы пихаете не адаптировано под телефоны. В связи с этим и идут съезды в дизайне.

3. Имея широкий экран (в моём случае) всё стоит ровно.

Установив стандартный диз (из пункта 1) у вас встанет так же ровно.

4. На скрине выше видно (стрелка) вы поставили рейтинг вертикальный. Что совершенно не подходит под ваш дизайн. Ставьте горизонтальный.

Код:

<!--Рейтинг-->
<script type="text/javascript">
$(document).ready(function(){
$('#pun').find('#userhero').map(function(){ 
$('#heroes').tipsy({live: true,gravity: 's',fade: true});
$.get('/userlist.php?username=&show_group=-1&sort_by=respect','',processRespect);
function processRespect(data){
$(data).find('div.usertable tbody tr:lt(9)').each(function(){  
var JUser=$(this).find('span.usersname').text();
var ulink=$(this).find('span.usersname a').attr('href');
var UsId=ulink.slice(ulink.indexOf('id=')+3);
var UsPlus=$(this).find('td.tc3:first').text();
$.get('/profile.php?section=avatar&id='+UsId, '',GetImg);
function GetImg(data) {
$(data).find('td#profile-left li div, div.fs-box').map(function () {
var ZAva = $(this).find('img').attr('src');
if (ZAva == undefined) {ZAva = 'http://petushki-city.ru/files/0002/10/47/50167.gif'};
$('#userhero').append('<li style="display: inline-block;padding: 5px;text-align: center;"><a href="'+ulink+'" style="text-decoration: none;"><figure><img id="heroes" style="border:1px solid #696969;border-radius: 7px 7px 7px 7px;" src="/'+ZAva+'" width="80" height="80" original-title="'+JUser+'"><figcaption style="background:#99CC33;border-radius: 0 0 7px 7px;box-shadow: 0 0 10px #40310A inset;color: #fff;font-size: 1em;font-weight: bold;height: 20px;margin-top: -20px;position: relative;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );">'+UsPlus+'</figcaption></figure></a></li>'); 
});};});};});});
</script>

<ul id="userhero"></ul>
</center>

Страница: « 1 2 3 4

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

Меню навигации

Пользовательские ссылки

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

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

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

Поделиться1Пн, 28 Янв 2019 01:11:36

Поделиться61Пн, 13 Янв 2020 10:45:29

Поделиться62Пн, 13 Янв 2020 11:08:41

Поделиться63Пн, 13 Янв 2020 11:10:19

Поделиться64Пн, 13 Янв 2020 13:02:01

Поделиться65Сб, 1 Фев 2020 20:42:35

Поделиться66Сб, 1 Фев 2020 20:55:52

Поделиться67Сб, 1 Фев 2020 21:14:23

Поделиться68Чт, 26 Мар 2020 14:50:21

Поделиться69Ср, 16 Сен 2020 17:06:04

Поделиться70Ср, 16 Сен 2020 17:12:01

Поделиться71Ср, 16 Сен 2020 17:13:47

Поделиться72Ср, 16 Сен 2020 17:27:06

Поделиться73Ср, 16 Сен 2020 21:41:18