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

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

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


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


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

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

1

В этой теме просим помощи в оформлении форума и его элементов

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

Вопросы по скриптам и их работоспособности, просьба, задавать в теме Запросы по скриптам #11
Вы новичок и не разбираетесь во всём этом? Загляните в наш справочный раздел. Возможно, там уже содержится ответ на ваш вопрос. Или задайте свой вопрос в теме Общие вопросы от новичков (63) #3

Важная информация перед тем, как задать вопрос:

  • Ответы дают другие участники форума по собственному желанию.

  • Администрация не может гарантировать моментальное решение или абсолютную корректность каждого ответа.

  • Пожалуйста, уважайте чужое время и усилия других пользователей, старайтесь писать грамотно и доходчиво.

  • Будьте взаимовежливы: Грубое или требовательное отношение к участникам форума неприемлемо и может привести к отказу в помощи на всём форуме.

  • Все вопросы, не касающиеся оформления, будут удаляться!

Сформулируйте свой вопрос максимально подробно, чтобы повысить вероятность отклика помощи:

  • Укажите ссылку на форум: Ссылка на форум, с которым требуется помочь, позволит нам увидеть, понять контекст проблемы и предложить наиболее точное решение, не тратя время на догадки.

  • Опишите желаемый результат: Четко и конкретно объясните, чего вы хотите добиться. Например: "Мне нужно, чтобы картинка шапки была во всю ширину блока", или "Хочу увеличить размер шрифта в названиях тем". Чем детальнее вы опишете, тем проще будет помочь.

  • Сделайте скриншот и выделите элемент: Помогающему необходимо понимать с чем ему предстоит вам помочь. Укажите ссылки на схожее оформление (если вы где-то видели подобное). Это не обязательно, но значительно упростит задачу.

Если на ваш вопрос долго нет ответа, пожалуйста, воздержитесь от повторных сообщений или обвинений. Возможно, ваш вопрос оказался излишне сложным, вероятно требующий больше времени и индивидуального подхода, будьте готовы к тому, что участники могут предложить свои услуги на платной основе. Обсуждение условий и оплаты происходит между вами и участником (исполнителем) в личных сообщениях или иных средствах связи (но не в теме!). Администрация форума не несет никакой ответственности за подобные договоренности и их выполнение.

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

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

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

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

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

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

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

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

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

+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://upforme.ru/uploads/0000/14/1c/11119/453144.jpg

для сравнения как это выглядит с десктопа:
https://upforme.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://upforme.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