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

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

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


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


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

Сообщений 501 страница 520 из 806

1

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

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

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

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

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

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

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

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

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

+3

501

Всем Часик Добрый! 8-)
Аналогичная проблема, и она в основном на форумах с установленными стилями Community Blue / Green
Стиль хороший, но с глюком)

Код не помог:

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

<style>
#pun-title TD.title-logo-tdr {width: 0;}
</style>

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

См. скриншот

https://i.imgur.com/QO8ldOM.gif

Как пофиксить этот баг?

+1

502

Income
Попробуйте такой фикс (в HTML верх в тегах <style></style>, например)

Код:
@media (max-width: 1024px) {
#pun,
.punbb,
#pun-title,
#pun-title *,
#pun-navlinks {
    width: auto;
    min-width: 0 !important;
}
}

+2

503

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

Income
Попробуйте такой фикс (в HTML верх в тегах <style></style>, например)

Ничего не изменилось.

Судя по тесту, форум отображается нормально на всех устройствах, кроме планшетов:

Скриншот

https://i.imgur.com/wLRV92r.jpg

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

504

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

Ничего не изменилось.

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)

+1

505

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

Попробуйте такой вариант:

Тем более не поможет, на планшете вьюпорт обычно гораздо меньше, чем 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;
}
}

+2

506

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

Тем более не поможет

Я перебивал, то что стоит, оно мешает:

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

@media all and (max-width: 1200px) and (min-width: 700px) {

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

на планшете вьюпорт обычно гораздо меньше, чем 900 пикселей.

На ipad? - они с 2к.. Лучше стили ориентировать на мобильные устройства (в том числе и планшеты) на мобильный стиль, а с высоким разрешением на обычный стиль - меньше проблем будет..

0

507

Это, наверное, неисправимо))

Попробуйте такой вариант. Пост 504

https://i.imgur.com/CuVKGHO.jpg

Убрал часть кода /* E1.1 */ из стиля

https://i.imgur.com/OzzHHc9.jpg

Потом попробовал применить эти 2 варианта одновременно. Получилось, почти тоже самое))

Вернул всё по умолчанию и попробовал:

Вариант с селектором

https://i.imgur.com/hmHnKVb.jpg

Взять, например, установить стиль Classic и сжимать окно браузера до предела - форум будет сжиматься без появления скроллинга, и ни один элемент не вылезет за его границы. Что там такого прописано, что он принимает любые размеры окна браузера!?

0

508

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

Взять, например, установить стиль Classic и сжимать окно браузера до предела - форум будет сжиматься без появления скроллинга, и ни один элемент не вылезет за его границы. Что там такого прописано, что он принимает любые размеры окна браузера!?

В верстке.. Будет время попробую сверстать свой вариант Community_Blue.. Тем более, что стал забывать верстку, вот и цель будет..

Отредактировано kolobdur74 (Сб, 9 Ноя 2019 14:12:38)

+3

509

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>

+1

510

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

Возможно так ?

Аналогично!

https://i.imgur.com/nBfDR90.jpg

Я пробовал полностью удалить из стиля min-width со всеми его параметрами...
Расстояние справа уменьшилось но немного всё равно осталось.

Скриншот

https://i.imgur.com/XyOFS8H.jpg

+1

511

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 (в нем и другие недочеты есть)

+2

512

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

Вроде получилось

Да, этот код работает. Спасибо! http://forumfiles.ru/files/0001/ec/60/81887.gif

0

513

Alex_63, а чего на твоем сервисе нету:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

?

0

514

kolobdur74, на BestBB?
Во-первых, партнерские коды в head не ставятся, поэтому при всем желании его туда не прописать; во-вторых, при включении мобильного стиля в админке этот метатег и так появляется, так что смысла его прописывать отдельно вроде бы и нет (без мобильного стиля он бесполезен и эффекта не дает, насколько помню).

0

515

Здравствуйте. Помогите, пожалуйста, решить проблему со сменой стилей через кнопки. Используется скрипт для создания полноценной и мобильной версии, но при переходе на эту страницу стиль срабатывает неправильно. Опытным путем в настройках браузера было выяснено, что куки запоминаются отдельно для страниц (/pages) и отдельно для остального форума (/) (причем такое поведение не во всех браузерах, в основном встречается в мобильном хроме). Т.е. прямо сейчас у меня в мозилле при переходе на мобильную версию используется её стиль для всех страниц (как и должно быть), а вот в хроме можно отдельно выбрать полную, а в гиде, который по ссылке выше, мобильную %-)

P.S.Надеюсь, что я в правильной теме. Если не туда обращаюсь - направьте, пожалуйста.

Отредактировано Sachimot (Вт, 12 Ноя 2019 14:33:45)

+1

516

Sachimot
Дайте ссылку на пост тут в скриптах, с используемым  кодом для установки

0

517

Deff
вот
http://forum.mybb.ru/viewtopic.php?id=6 … 10#p701301
Чуть изменила его под себя, чтобы переключение шло по клику на текст, а не картинку

0

518

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>


Отпишитесь  :flag:

+3

519

Deff, теперь всё работает, вы - чудо!

+1

520

Всем здравствуйте! http://forumfiles.ru/files/0001/ec/60/53488.gif
На днях хотел попробовать заменить стандартные иконки разделов форума (не Тем, а именно Разделов, как здесь - на форуме поддержки).
Но никак не могу преодолеть приоритеты стиля 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://forumfiles.ru/files/0011/36/35/72016.png);}
tr#forum_f1 div.inew {background-image: url(http://forumfiles.ru/files/0011/36/35/72016.png);}
</style>

Форум, где установлен данный код: http://fcr.f-rpg.ru
Код рабочий: Любой другой стиль ставлю - иконка сразу появляется.

Перебрал различные варианты - не поддаётся ни в какую, как заколдованный)) И !important дописывал, а результат - просто стандартная иконка исчезла и всё.
Может что-то нужно скопировать из стиля и добавить в вышеуказанный код?

Часть кода с иконками из стиля Community Blue

/* CS4 Post status icons and stats image
-------------------------------------------------------------*/

/* CS4.1 */
div.icon {
  background: url(http://forumfiles.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://forumfiles.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://forumfiles.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://forumfiles.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://forumfiles.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://forumfiles.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;
  }

0


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