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

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

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


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Общие вопросы по оформлению (65) #2


Общие вопросы по оформлению (65) #2

Сообщений 761 страница 780 из 1486

1

Инструменты для поиска и редактирования стиля (скриптов).

Как с помощью браузера можно определить элемент дизайна.

Каталог скриптов/CSS

Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.

Типовые Вопросы (ЧаВо)

Ответы на часто задаваемые вопросы.

Как задавать вопросы! Разница между стилем и скриптом. ( Советы)

Плюс к названию темы еще и Памятка.

Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности.

Предыдущая часть темы: Общие вопросы по оформлению (65)

+1

761

Курама
Там стоит скрипт в начале HTML низ

Код:
<!-- Перенос Колонок тем и сообщений под Описание Форума / Deff, Alex_63 -->
  <script type="text/javascript">
    (function(){
       $.catch = function(a,f){$(function(){var t,i=0;function s(){i++;if(i>120)return;t=setTimeout(function(){if(!$(a).length){s();return};f()},100);}s();});}
       function appendTopicS(){
         $('.category td.tcl .tclcon,#f-subforums td.tcl .tclcon').each(function() {
           var L=$(this).parents('tr:first');
           var str='<br><div class="Add"><div class="Tems_And_messages">тем <span class="right">'+L.find('td.tc2').text()+'</span></br>сообщений <span class="right">'+L.find('td.tc3').text()+'</span></div>\
           </div>';$(str).appendTo(this);
         });
       }
       if($('#pun-index').length){appendTopicS ();}
       if($('#pun-viewforum').length){
         var summ=$('.main table[summary]').attr('summary').split(': ')[1].substr(0,1);
         if(summ=='#'||summ==String.fromCharCode(173))$.catch('#f-subforums',function(){appendTopicS()});
       }
    }());
    </script>

Ну и код в стиль в Конец Первого Окна стиля:

Код:
#pun-index .category td {
    padding-left: 0;
    padding-right: 0
}

#pun-index .category table {
    position: relative;
    margin-left: -10px;
    width: 965px;
    margin-top: 8px;
    border: 0 !important;
    padding: 0 !important;
}

/* блоки http://imagiart.ru/ */
thead {display: none;}

#pun-index .category tr>.tc2,
#pun-index .category tr>.tc3,
#pun-index .category tr>th {
  display:none !important;
}
#pun-index .category tr { width: 470px;    
    margin-bottom: 10px;    
    margin-top: 5px;  
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(21,21,19,.1) inset;
    margin-left: 10px !important; 
    vertical-align: top;
    background: rgba(23,23,21,.05);
min-height: 130px;
}

/* блоки http://imagiart.ru/  конец */

#pun-index .tclcon h3 a {
text-transform: uppercase;
font-size: 18px;
    font-weight: 800 !important;
font-family: yeseva one;
    color: transparent;
    background: linear-gradient(to right, #cc4e37 0%, #292929 50%, #cc4e37 100%);  
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    -o-background-clip: text !important;
    background-size: 200%;
    background-position-x: 0%;
    transition: all .6s ease-in-out 0s
}

#pun-index .tclcon h3 a:hover {
    background-position-x: 100%
}

#pun-index .tclcon h3 {
    text-align: left;
    margin-bottom: 13px;
    padding:0px 0 10px 0;
    position: relative;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #575757 0%, #cc4e37 100%);
    border-image-slice: 1;
}



#pun-index .tclcon h3:hover:before {width: 100%}


#pun-index .tclcon {
    font-size: 9px;
    text-align: justify;
    position: relative;
    font-family: montserrat;
    font-weight: 500;
    line-height: 15px;
    padding: 5px 19px 10px 19px;
        color: transparent;
    background: linear-gradient(to right, #832e1e 0%, #2a2929 100%);  
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    -o-background-clip: text !important;
    width: 432px;
}


#pun-index .tclcon:after {content: "";
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #cc4e37 0%, #575757 100%);
    border-image-slice: 1;
width: 433px;
display: block;
bottom: -8px;
    right: 19px;
position: absolute;
}

#pun-index .category tr>.tcr {display: inline-block;
padding: 0 !important;
text-align: right;
float: right;
width: 442px;
margin-right: 11px !important;
line-height: 12px;
    padding-top: 14px !important;
    padding-bottom: 5px !important;
}

#pun-index .tcr a {font-size: 12px;
font-weight: 600;
}
#pun-index .tcr {
    font-family: montserrat;
    font-size: 9px;
    font-weight: 500
}

#pun-index .user-avatar {
	height: 25px;
	width: 25px;
    vertical-align: middle;
    float: right;
    margin-left: 14px !important;
    margin-right: 17px !important;
    margin-top: -5px
}

#pun-index .user-avatar img.ava {width: 25px;
height: 25px;
border-radius: 1px !important;
border-width: 2px !important;}

#pun-index .isonline {height: 8px;
width: 8px;
margin-right: -12px !important;
}

.Tems_And_messages  {
  display:block;
  width:100%;
  font-size: 8px;
  text-transform: none;
  font-family: montserrat !important;;
  font-weight: 500;
text-align: left;
    text-transform: uppercase;
  color: #575757
}


.main table .Add {
  display: block;
  padding: 0px 0px;
  height: 17px;
  line-height: 15px;
  position: absolute;
  bottom: -39px;
  left: 19px;
  width: auto;
}

Код походу позаимствован с РЕНО форума, поправлен под стиль текущего

+1

762

Спасибо) только что-то не работает.
http://testso.mybb.ru/

0

763

Курама
Наверно не весь стиль перетащилл... ща гляну ыщо

0

764

Курама
Потом у Вас на тестовике Пиар-Вход не работает, а под гостем виден лишь единственный форум - поэтому оценить работает/не работает и найти конфликты сложно

Отредактировано Deff (Пн, 2 Авг 2021 15:41:11)

0

765

Код:
#pun-index .category h2, #pun-stats h2 {
    background: url(https://forumstatic.ru/files/001a/e1/d8/82158.jpg) center;
width: 954px;
padding: 0 !important;;
border: none !important;
margin-top: 0px !important;
margin-bottom:5px !important;
text-align: left;
    color: #d8d7d0 !important;
    font: 800 20px 'Playfair Display' !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 0 !important;
    height: 33px;
    text-transform: lowercase !important;
}

#pun-index #pun-category1 h2 {margin-top: -5px !important;}

#pun-stats.section h2 {margin-top: -5px !important;

}

#pun-index .category h2 span, #pun-stats.section h2 span {color: transparent;
    background: linear-gradient(to right, #cc4e37 0%, #292929 100%);  
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    -o-background-clip: text !important;
letter-spacing: 1px;
margin-top: 0px;
display: inline-block;
padding-left: 8px !important;}

#pun-index .category .container {margin: 0 0px !important;
    position: relative;
}


#pun-index .category {margin-right: 0px !important;}

#pun-index thead {display: none}

#pun-index .category td {
    padding-left: 0;
    padding-right: 0
}

#pun-index .category table {
    position: relative;
    margin-left: -10px;
    width: 965px;
    margin-top: 8px;
    border: 0 !important;
    padding: 0 !important;
}

/* блоки http://imagiart.ru/ */
thead {display: none;}

#pun-index .category tr>.tc2,
#pun-index .category tr>.tc3,
#pun-index .category tr>th {
  display:none !important;
}
#pun-index .category tr { width: 470px;    
    margin-bottom: 10px;    
    margin-top: 5px;  
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(21,21,19,.1) inset;
    margin-left: 10px !important; 
    vertical-align: top;
    background: rgba(23,23,21,.05);
min-height: 130px;
}

/* блоки http://imagiart.ru/  конец */

#pun-index .tclcon h3 a {
text-transform: uppercase;
font-size: 18px;
    font-weight: 800 !important;
font-family: yeseva one;
    color: transparent;
    background: linear-gradient(to right, #cc4e37 0%, #292929 50%, #cc4e37 100%);  
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    -o-background-clip: text !important;
    background-size: 200%;
    background-position-x: 0%;
    transition: all .6s ease-in-out 0s
}

#pun-index .tclcon h3 a:hover {
    background-position-x: 100%
}

#pun-index .tclcon h3 {
    text-align: left;
    margin-bottom: 13px;
    padding:0px 0 10px 0;
    position: relative;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #575757 0%, #cc4e37 100%);
    border-image-slice: 1;
}



#pun-index .tclcon h3:hover:before {width: 100%}


#pun-index .tclcon {
    font-size: 9px;
    text-align: justify;
    position: relative;
    font-family: montserrat;
    font-weight: 500;
    line-height: 15px;
    padding: 5px 19px 10px 19px;
        color: transparent;
    background: linear-gradient(to right, #832e1e 0%, #2a2929 100%);  
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    -o-background-clip: text !important;
    width: 432px;
}


#pun-index .tclcon:after {content: "";
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #cc4e37 0%, #575757 100%);
    border-image-slice: 1;
width: 433px;
display: block;
bottom: -8px;
    right: 19px;
position: absolute;
}

#pun-index .category tr>.tcr {display: inline-block;
padding: 0 !important;
text-align: right;
float: right;
width: 442px;
margin-right: 11px !important;
line-height: 12px;
    padding-top: 14px !important;
    padding-bottom: 5px !important;
}

#pun-index .tcr a {font-size: 12px;
font-weight: 600;
}
#pun-index .tcr {
    font-family: montserrat;
    font-size: 9px;
    font-weight: 500
}

#pun-index .user-avatar {
	height: 25px;
	width: 25px;
    vertical-align: middle;
    float: right;
    margin-left: 14px !important;
    margin-right: 17px !important;
    margin-top: -5px
}

#pun-index .user-avatar img.ava {width: 25px;
height: 25px;
border-radius: 1px !important;
border-width: 2px !important;}

#pun-index .isonline {height: 8px;
width: 8px;
margin-right: -12px !important;
}

.Tems_And_messages  {
  display:block;
  width:100%;
  font-size: 8px;
  text-transform: none;
  font-family: montserrat !important;;
  font-weight: 500;
text-align: left;
    text-transform: uppercase;
  color: #575757
}


.main table .Add {
  display: block;
  padding: 0px 0px;
  height: 17px;
  line-height: 15px;
  position: absolute;
  bottom: -39px;
  left: 19px;
  width: auto;
}

Может так ?

2-е Нужно тестить на тестовике без Вашего стиля, ибо может конфликтует с текущим Вашим стилем, тогда надо добавлять импортант к добавляемому стилю

Отредактировано Deff (Пн, 2 Авг 2021 15:54:07)

0

766

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

Потом у Вас на тестовике Пиар-Вход не работает, а под гостем виден лишь единственный форум - поэтому оценить работает/не работает и найти конфликты сложно

Отправил Вам в ЛС админ-ник-пароль. Посмотрите, поззя  :'(

0

767

Курама
:glasses: Возможно завтра гляну...

0

768

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

Возможно завтра гляну...

Спасибо, жду)

0

769

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

Ну мон и через адд класс - добавить спец класс к нужным элементам, а в стиле на этот класс нужный стиль...

В результате сделал через "document.write"  . Но встал еще такой вопрос: а если на том отдельном топике ( 9 ) мне надо сделать разные цвета у разных элементов?  Это как можно перечислить после условия if в стиле?

Код:
<script>
if(GroupID==3 && document.URL.indexOf("/viewtopic.php?id=9")!=-1)
document.write('<style>.post-body , #post-form #main-reply{background: #fffaf5!important; border-color:#FFD700!important;} </style>');
</script>

Я просто три раза продублировал код изменив во втором и третьем элемент и цвет. Но наверное можно это под одним "if" прописать?

0

770

Не знаю, сюда вопрос или не сюда. Поясняющий текст и мобильные браузеры - оно как-то вместе работает или нет? И кликнуть если, и долгий тап - ничего не показывает его. Что очень не удобно, потому что много где используется и, как бы, в наше время все с телефонов сидят.

+1

771

Здравствуйте. У меня два вопроса, которые самостоятельно решить не могу.
Сайт
1. Как подогнать размер таблички в шапке, чтобы на разных мониторах не сдвигался? Делал в пикселях и в процентах - ничего не меняется.

скрины

Моя табличка:
https://forumstatic.ru/files/001b/40/3e/87489.png?v=1
И на другом мониторе:
https://forumstatic.ru/files/001b/40/3e/57573.jpg

2. Как настроить, чтобы при открытии сайта с телефона и планшета тело сайта не уезжало влево?

скрин

https://forumstatic.ru/files/001b/40/3e/29022.png?v=1

Отредактировано Кэри (Чт, 5 Авг 2021 20:51:57)

0

772

rybka
Где именно должен быть поясняющий текст?
Дело в том, что форумы писались задолго до возникновения мобильного браузеринга и соответственно title и прочие фишки при наведении курсора мыши остались с тех времён. Ещё никто толком не делал полноценную адаптацию наших форумов под тач-скрин, но если приведёте примеры, то возможно ребята попробуют соорудить скрипт, который "научит" мобильные браузеры корректно отображать title для устройств с тач-скрином. Вообще, с портированием не всё так просто, например у команды IPB на это ушло несколько лет, чтобы придать мобильной версии форумов современный вид и понятную навигацию (они и по сей день вносят много изменений). Например, для мобильных телефонов специально рисуются поясняющие иконки, благодаря которым становится интуитивно понятно; дописывается поясняющий текст там где надо, скрывающийся на десктопах как раз под иконку с title; перемещаются и ужимаются элементы, убирается неиспользуемое лишнее пространство и т.д.

+2

773

Reysler
я про вот эту вот фичу. не знаю, как объяснить лучше.
На самом деле, вот те самые полноценные мобильные версии не столь явный запрос. сейчас и браузеры, в принципе, неплохо справляются с оптимизацией, и народные умельцы научились делать адаптивные дизайны. А вот этот вот бб код с поясняющим текстом - ну я правда часто его встречаю и каждый раз нет совсем возможности просмотреть. Те же тайтлы, допустим, ссылок, можно увидеть (там если долго тапнешь, открывается "окошко" как раз с тайтлом в названии. А вот за скрипт с читанием поясняющего текста расцаловала бы в обе щечки)

0

774

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

А вот за скрипт с читанием поясняющего текста расцаловала бы в обе щечки)

+1, кстати.
Я не скажу, что прямо ломал голову об этот момент, но успел немного поспотыкаться об этот abbr на мобилках в целом. Правда, сугубо в пределах своих знаний/мыслей, дальше еще не копал.

+1

775

драсьте. у нас на форуме не включен мобильный дизайн и нет своего мобильного дизайна, только в настройках прописано "width=device-width, initial-scale=0.35" для лучшего отображения на мобилках пользователей. столкнулся сейчас с тем, что с любых мобильных девайсов (андройд, айфон - телефоны и планшеты...) у полей в профиле пользователя появляются какие-то контуры/границы:

https://forumupload.ru/uploads/0000/14/1c/11119/453144.jpg

для сравнения как это выглядит с десктопа:
https://forumupload.ru/uploads/0000/14/1c/11119/475476.jpg

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

0

776

Первый вопрос, озвученный выше про табличку, разрешился самостоятельно. Огромная просьба помочь со вторым вопросом:
Как настроить, чтобы в телефоне и планшете тело сайта не уезжало влево? Мобильный стиль отключён.

скрин

https://forumstatic.ru/files/001b/40/3e/29022.png?v=1

Отредактировано Кэри (Чт, 5 Авг 2021 20:54:36)

0

777

Кэри написал(а):

Как настроить, чтобы в телефоне и планшете тело сайта не уезжало влево? Мобильный стиль отключён.

Ширина форума у вас:

#pun {
  width: 900px;
  background-color: transparent;
  background-image: url();
  background-repeat: repeat-y;
  background-position: top center;
}

Ширина таблицы вложенной в #pun:

#pun-title table {
  background-color: transparent;
  background-image: url(https://forumstatic.ru/files/001b/40/3e/55983.png);
  background-repeat: no-repeat;
  background-position: top left;
  height: 505px;
  width: 1500px;
  margin-left: -50px;
}

Эти 1500px никуда не девается, они растягивают форум, если экран небольшой.. Вот отображение, если убрать 1500px:
https://forumupload.ru/uploads/0000/14/1c/23723/584068.png

+1

778

kolobdur74
Я пробовал. Тогда шапка за таблицей исчезает. Как её вернуть?

0

779

Кэри написал(а):

Я пробовал. Тогда шапка за таблицей исчезает. Как её вернуть?

А зачем вы вообще вешаете картинку на #pun-title table, если у вас все равно вставлена таблица? Поставьте картинку на блок Табличка в шапке фоновую картинку, уберите абсолют, а #pun-title вообще уберите - он вам в такой концепции не нужен..

+1

780

kolobdur74
Спасибо большое!!! Разобрался)

Отредактировано Кэри (Пт, 6 Авг 2021 08:40:23)

+1


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Общие вопросы по оформлению (65) #2