Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (65)
Предыдущая тема: Общие вопросы по оформлению (64)
Как с помощью браузера можно определить элемент дизайна. | |
Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS. | |
Ответы на часто задаваемые вопросы. | |
Как задавать вопросы! Разница между стилем и скриптом. ( Советы) | Плюс к названию темы еще и Памятка. |
Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности. |
Всем Часик Добрый! 
Аналогичная проблема, и она в основном на форумах с установленными стилями Community Blue / Green
Стиль хороший, но с глюком)
Код не помог:
<style>
#pun-title TD.title-logo-tdr {width: 0;}
</style>
Начните уменьшать окно браузера и внизу появится горизонтальный скролл, сдвиньте его вправо.
Как пофиксить этот баг?
Income
Попробуйте такой фикс (в HTML верх в тегах <style></style>, например)
@media (max-width: 1024px) {
#pun,
.punbb,
#pun-title,
#pun-title *,
#pun-navlinks {
width: auto;
min-width: 0 !important;
}
}Income
Попробуйте такой фикс (в HTML верх в тегах <style></style>, например)
Ничего не изменилось.
Судя по тесту, форум отображается нормально на всех устройствах, кроме планшетов:
Ничего не изменилось.
Income, уберите:
<style>
@media (max-width: 1024px) {
#pun,
.punbb,
#pun-title,
#pun-title *,
#pun-navlinks {
width: auto;
min-width: 0 !important;
}
}
</style>
Попробуйте такой вариант:
<style>
@media (max-width: 1024px) {
#pun_wrap #pun {
max-width: 1200px !important;
min-width: 940px !important;
}
#pun #pun-title {min-width: 980px !important;}
#pun #pun-navlinks {
max-width: 1201px !important;
min-width: 900px !important;
width: 100%;
}
}
</style>А вообще лучше стиль перенести в свой стиль, и убрать из него полностью:
/* E1.1 */
@media all and (max-width: 1200px) and (min-width: 700px) {
#pun, .punbb, #pun-title table, #pun-navlinks, #pun-ulinks .container {
max-width: 900px !important;
min-width: 600px !important;
}#pun-ulinks >.container{
max-width: 900px !important;
min-width: 0px !important;
}#pun-main h1 span, #pun-main h2 span {
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
display: inline-block;
overflow-x: hidden;
}
}
Отредактировано kolobdur74 (Сб, 9 Ноя 2019 12:52:15)
Попробуйте такой вариант:
Тем более не поможет, на планшете вьюпорт обычно гораздо меньше, чем 900 пикселей.
Можно попробовать добавить родительский селеткор #pun_wrap к каждому селектору:
@media (max-width: 1024px) {
#pun_wrap #pun,
#pun_wrap .punbb,
#pun_wrap #pun-title,
#pun_wrap #pun-title *,
#pun_wrap #pun-navlinks {
width: auto;
min-width: 0 !important;
}
}
Тем более не поможет
Я перебивал, то что стоит, оно мешает:
@media all and (max-width: 1200px) and (min-width: 700px) {
на планшете вьюпорт обычно гораздо меньше, чем 900 пикселей.
На ipad? - они с 2к.. Лучше стили ориентировать на мобильные устройства (в том числе и планшеты) на мобильный стиль, а с высоким разрешением на обычный стиль - меньше проблем будет..
Это, наверное, неисправимо))
Потом попробовал применить эти 2 варианта одновременно. Получилось, почти тоже самое))
Вернул всё по умолчанию и попробовал:
Взять, например, установить стиль Classic и сжимать окно браузера до предела - форум будет сжиматься без появления скроллинга, и ни один элемент не вылезет за его границы. Что там такого прописано, что он принимает любые размеры окна браузера!?
Взять, например, установить стиль Classic и сжимать окно браузера до предела - форум будет сжиматься без появления скроллинга, и ни один элемент не вылезет за его границы. Что там такого прописано, что он принимает любые размеры окна браузера!?
В верстке.. Будет время попробую сверстать свой вариант Community_Blue.. Тем более, что стал забывать верстку, вот и цель будет..
Отредактировано kolobdur74 (Сб, 9 Ноя 2019 14:12:38)
Income
Возможно так ?
<style>
#pun-title TD.title-logo-tdr {width: 0;}
@media screen and (max-width: 540px) {
html,body {min-width:100%!important}
#pun-title {
margin: 0px auto 30px auto;
max-width: 900px !important;
min-width: 600px !important;
}
}
</style>
Возможно так ?
Я пробовал полностью удалить из стиля min-width со всеми его параметрами...
Расстояние справа уменьшилось но немного всё равно осталось.
Income
Вроде получилось:
<style>
@media all and (max-width: 1024px) and (min-width: 541px) {
#pun,
.punbb,
#pun-title,
#pun-title td,
#pun-navlinks,
#pun-ulinks {
min-width: 0 !important;
}
#pun,
#pun-title td {
width: auto !important;
}
.punbb #pun-navlinks {
margin-left: -2.5em !important;
}
}
</style>
Но это какой-то костыль, по-хорошему бы стиль заново переверстать, согласен с kolobdur74 (в нем и другие недочеты есть)
Вроде получилось
Да, этот код работает. Спасибо! 
Alex_63, а чего на твоем сервисе нету:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
?
kolobdur74, на BestBB?
Во-первых, партнерские коды в head не ставятся, поэтому при всем желании его туда не прописать; во-вторых, при включении мобильного стиля в админке этот метатег и так появляется, так что смысла его прописывать отдельно вроде бы и нет (без мобильного стиля он бесполезен и эффекта не дает, насколько помню).
Здравствуйте. Помогите, пожалуйста, решить проблему со сменой стилей через кнопки. Используется скрипт для создания полноценной и мобильной версии, но при переходе на эту страницу стиль срабатывает неправильно. Опытным путем в настройках браузера было выяснено, что куки запоминаются отдельно для страниц (/pages) и отдельно для остального форума (/) (причем такое поведение не во всех браузерах, в основном встречается в мобильном хроме). Т.е. прямо сейчас у меня в мозилле при переходе на мобильную версию используется её стиль для всех страниц (как и должно быть), а вот в хроме можно отдельно выбрать полную, а в гиде, который по ссылке выше, мобильную 
P.S.Надеюсь, что я в правильной теме. Если не туда обращаюсь - направьте, пожалуйста.
Отредактировано Sachimot (Вт, 12 Ноя 2019 14:33:45)
Sachimot
Дайте ссылку на пост тут в скриптах, с используемым кодом для установки
Deff
вот
http://forum.mybb.ru/viewtopic.php?id=6 … 10#p701301
Чуть изменила его под себя, чтобы переключение шло по клику на текст, а не картинку
Sachimot
Пробуйте заменить этот кусок:
<script type="text/javascript">
var linkStyles='<link rel="stylesheet" type="text/css" href="';
function setcOOkie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcOOkie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
function clearSet(L){if(L){setcOOkie("changeStyle",L,30);$("link[rel='stylesheet']:first").replaceWith(linkStyles+L+'"/>')}};var Lmem=getcOOkie("changeStyle");clearSet(Lmem);
</script>
На такой:
<script type="text/javascript">
var linkStyles='<link rel="stylesheet" type="text/css" href="';
function clearSet(L){if(L){$setCookie("changeStyle",L,30*24*60*60*1000);$("link[rel='stylesheet']:first").replaceWith(linkStyles+L+'"/>')}};var Lmem=$getCookie("changeStyle");clearSet(Lmem);
</script>Отпишитесь 
Deff, теперь всё работает, вы - чудо!
Всем здравствуйте! 
На днях хотел попробовать заменить стандартные иконки разделов форума (не Тем, а именно Разделов, как здесь - на форуме поддержки).
Но никак не могу преодолеть приоритеты стиля Community Blue.
Можно просто удалить из стиля часть кода, отвечающий за иконки, но это не вариант!
Как заменить иконки разделов форума с установленным стилем Community Blue, при этом не изменяя кода своего стиля?
Использовал вот этот код:
<style type="text/css">
#forum_f1 Div.icon {
margin-left: 25px;
margin-top: 5px;
border-style: none none none none;
height: 30px; width: 30px;
background-repeat: no-repeat;
}
tr#forum_f1 div.icon {background-image: url(http://forumstatic.ru/files/0011/36/35/72016.png);}
tr#forum_f1 div.inew {background-image: url(http://forumstatic.ru/files/0011/36/35/72016.png);}
</style>
Форум, где установлен данный код: http://fcr.f-rpg.ru
Код рабочий: Любой другой стиль ставлю - иконка сразу появляется.
Перебрал различные варианты - не поддаётся ни в какую, как заколдованный)) И !important дописывал, а результат - просто стандартная иконка исчезла и всё.
Может что-то нужно скопировать из стиля и добавить в вышеуказанный код?
/* CS4 Post status icons and stats image
-------------------------------------------------------------*//* CS4.1 */
div.icon {
background: url(http://forumstatic.ru/files/0012/64/65/87956.png) no-repeat scroll -3px -62px !important;
opacity: 0.3;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}div.inew, div.icon.icon-new, tr.inew div.icon {
background: url(http://forumstatic.ru/files/0012/64/65/87956.png) no-repeat scroll -3px -62px !important;
opacity: 0.7;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}tr.isticky:not(.inew) div.icon, tr.iclosed.isticky:not(.inew) div.icon {
background: url(http://forumstatic.ru/files/0012/64/65/87956.png) no-repeat scroll -3px -31px !important;
opacity: 0.3;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}tr.inewisticky div.icon, tr.inew.isticky div.icon, tr.inew.iclosed.isticky div.icon {
background: url(http://forumstatic.ru/files/0012/64/65/87956.png) no-repeat scroll -3px -31px !important;
opacity: 0.7;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}tr.iclosed:not(.inew) div.icon {
background: url(http://forumstatic.ru/files/0012/64/65/87956.png) no-repeat scroll -3px 0 !important;
opacity: 0.4;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}tr.inew.iclosed div.icon {
background: url(http://forumstatic.ru/files/0012/64/65/87956.png) no-repeat scroll -3px 0 !important;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}#pun-searchtopics.punbb div.icon {
margin-right: 20px;
}#pun-viewforum div.icon, #pun-searchtopics div.icon {
margin-top: 2px;
margin-bottom: 5px;
}.punbb .main tr.inew > td:first-child,
.punbb .main tr.inewisticky > td:first-child {
background:#F1F9FF;
background: gradient(linear, left, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
background: -webkit-linear-gradient(left, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
background: -moz-linear-gradient(left, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
background: -o-linear-gradient(left, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
background: -khtml-linear-gradient(left, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
}.punbb .main tr.inew > td:last-child,
.punbb .main tr.inewisticky > td:last-child {
background:#F1F9FF;
background: gradient(linear, right, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
background: -webkit-linear-gradient(right, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
background: -moz-linear-gradient(right, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
background: -o-linear-gradient(right, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
background: -khtml-linear-gradient(right, #ffffff 0%, #F1F9FF 20px, #F1F9FF 100%) !important;
}.punbb tr.inew > td:not(:first-child):not(:last-child),
.punbb tr.inewisticky > td:not(:first-child):not(:last-child) {
background-color: #F1F9FF;
}
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (65)