Перейти к публикации
IPS Invision Community
  • Модификация стилей


    27 записей в этой категории

    Как зафиксировать меню

    Как зафиксировать меню

    Перейдите в глобальный шаблон темы и найдите эту строку: {template="navBar" app="core" group="global" params=""} Замените на эту: <div data-ipsSticky data-ipsSticky-stickTo="top">{template="navBar" app="core" group="global" params=""}</div> Пример как это работает:  

    Sipsb

    Sipsb

    Фон Postbit (панель автора)

    Фон Postbit (панель автора)

    Перейдите в ACP> Темы> Редактировать HTML и CSS для вашей темы> найдите postContainer, затем найдите и замените это: <aside class='ipsComment_author cAuthorPane ipsColumn ipsColumn_medium ipsResponsive_hidePhone'> Заменить на это <aside class='ipsComment_author cAuthorPane ipsColumn ipsColumn_medium ipsResponsive_hidePhone' data-groupId="{$comment->author()->member_group_id}"> В custom.css добавить .cPost .cAuthorPane[data-groupId="<group_id>"]

    Sipsb

    Sipsb

    Добавляем тур по сайту

    Добавляем тур по сайту

    Вот пример: 1. Идем в globalTemplate 2. В <head></head> секции добавляем строку: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.css" integrity="sha256-OYXGS5m4oWZAAqoAKpf7Y3bIdzdd9jBfly/xCavEpGw=" crossorigin="anonymous"/> 3. Теперь в globalTemplate ищем <!--ipsQueryLog--> и добавляем выше: <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js" integrity="sha256-fOPHmaam

    Sipsb

    Sipsb

    Вывод контента на разных языках

    Вывод контента на разных языках

    Этот код поможет вывести контент в зависимости от выбранного языка пользователя. {{$lang = \IPS\Member::loggedIn()->language()->short;}} {{if mb_strpos($lang, 'ru_RU') === 0}} some html {{elseif mb_strpos($lang, 'fr_FR') === 0}} some FR html ... additional 10+ languages {{else}} EN content {{endif}}  

    Sipsb

    Sipsb

    Модальное окно без плагина

    Модальное окно без плагина

    Делаем модальное окно стандартными средствами IPS 4 HTML <a class="ipsButton ipsButton_negative ipsButton_verySmall ipsButton_narrow"href='#dialogContent' data-ipsDialog data-ipsDialog-content='#dialogContent' data-ipsTooltip title='Заказать рекламу'><i class="fa fa-plus-circle" aria-hidden="true"></i> Получить код баннера</a> <div id="dialogContent" class='ipsHide'> <div class="ADS_blockContent"> <h2>Вероятнее всего вас интересуют рекламные ме

    Sipsb

    Sipsb

    Как убрать сообщение об обновлении?

    Как убрать сообщение об обновлении?

    Для того что бы убрать сообщение на форуме зайдите Внешний вид --> Стили и шаблоны  --> Изменить HTML и CSS. Во вкладке CSS добавьте в Custom.css код ниже #elLicenseKey { display: none; } Для того что бы убрать сообщение в АЦ (Админ Центре) Во вкладке CSS добавьте Custom.css код ниже #acpNewVersion { display: none; } Хочу обратить внимание! в нашем NULLED все обращения на официальный сайт вырезаны и подобных сообщений НЕТ.

    Sipsb

    Sipsb

    Добавляем спонсоры раздела

    Добавляем спонсоры раздела

    Перейти в АЦ - Внешний вид - Стили и Шаблоны - Ваш стиль (Изменить HTML и CSS) - forums - front - index - forumRow Найти: {{if $forum->description}} <div class="ipsDataItem_meta ipsType_richText">{$forum->description|raw}</div> {{endif}} </div> Добавить ниже: {{if $forum->_id == '13'}} <div class="ipsDataItem_stats ipsDataItem_statsLarge ipsBanner_forum"> {advertisement="KEY4"} </div>

    Sipsb

    Sipsb

    Цвет непрочитанных сообщений

    Цвет непрочитанных сообщений

    По умолчанию непрочитанные сообщения имеют жирный шрифт. Для изменения цвета добавьте в Custom.css следующий код. .ipsStreamItem_unread a, .ipsDataItem_unread .ipsDataItem_title a { color:#FF0000; } До изменения: После изменения:  

    Sipsb

    Sipsb

    Причина редактирования поста

    Причина редактирования поста

    По стандарту у нас такой вид После Добавляем в custom.css [data-role="commentContent"] > span.ipsType_light:last-child{ display: block; position: relative; padding: 15px 15px 15px 45px; background: linear-gradient(45deg,#7289da,#702df9); color: #fff; } [data-role="commentContent"] > span.ipsType_light:last-child:before { content: "\f05a"; font-family: 'FontAwesome'; position: absolute; left: 17px; top: 35%; transform: translateY(-50%); font-size: 2

    Sipsb

    Sipsb

    Цветные подкатегории

    Цветные подкатегории

    Иконки на под категории Добавьте в custom.css /* Открыто */ [data-forumid="2"] .ipsDataItem_subList > li:nth-child(1) a:before { content: "\f09c"; background-color: #68a72f; } /* Закрыто */ [data-forumid="2"] .ipsDataItem_subList > li:nth-child(2) a:before { content: "\f023"; background-color: #e14242; } /* Закрыто */ [data-forumid="2"] .ipsDataItem_subList > li:nth-child(3) a:before { content: "\f023"; background-color: #e14242; }

    Sipsb

    Sipsb

    Кнопка вверх без плагинов

    Кнопка вверх без плагинов

    И так начнем: Открываем наш стиль, в самый низ в globalTemplate ставим этот код: <a href="#" class="scrollup">Наверх</a> Это в custom css: .scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url('icon_top.png') no-repeat; } При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и  50 px снизу. Теперь подключаем библиотеку, если она е

    Sipsb

    Sipsb

    Добавляем свой пункт в выпадающее меню пользователя

    Добавляем свой пункт в выпадающее меню пользователя

    1) Идем в свою тему/стиль по пути: 2) Находим строку: {{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members', 'front' ) )}} <li class='ipsMenu_item' data-menuItem='profile'><a href='{member="url()"}' title='{lang="view_my_profile"}'>{lang="menu_profile"}</a> </li> {{endif}} 3) Делаем копию строки 4) Заменяем: {member="url()"} на собственную ссылку, а  {lang="menu_profile"} на

    Sipsb

    Sipsb

    Часто задаваемые вопросы (FAQ)

    Часто задаваемые вопросы (FAQ)

    Делаем блок с часто задаваемыми вопросами через штатное приложение IPS «PAGES (Страницы)» Переходим в приложение «PAGES (Страницы)» Блоки --> Plugins Переходим во вкладку Содержимое и вставляем код. <div style="text-align: center;"> <h2>Часто задаваемые вопросы</h2> </div> <section class="faq-container"> <input id="faq1a" name="faq1" type="radio" checked="checked"> <label for="faq1a">Заголовок вопроса</label> <article>

    Sipsb

    Sipsb

    Иконки в меню навигации форума

    Иконки в меню навигации форума

    Как нам уже известно в IPS 4 интегрирован шрифт FontAwesome и множество мелких элементов основаны именно на нём. Многие используют иконки для вкладок в навигационном меню, но в стоковом состоянии их нет. Для того, чтобы добавить необходимые иконки для нужных вкладок, идём по пути: АЦ -> Внешний вид -> Стиль -> Стили и шаблоны -> Выбираем свой стиль (в данном случае это стандартный стиль Default) и нажимаем кнопку "Изменить HTML и CSS" Далее открываем кладку CSS и идём по пу

    Sipsb

    Sipsb

    Форматирование групп

    Форматирование групп

    Сегодня копался с форматированием и нашел несколько плюх для вас) <span style='font-weight: bold; background: linear-gradient(to left, #d07fff, #8473fd ); -webkit-background-clip: text; -webkit-text-fill-color: transparent;'>    <span style='font-weight: bold; background: linear-gradient(to right, #ff6d6d, #ff08d5); -webkit-background-clip: text; -webkit-text-fill-color: transparent;color: #FF512F;'>   <span style=

    Sipsb

    Sipsb

    Эффект плавного затухания логотипа

    Эффект плавного затухания логотипа

    Добавляем эффект плавного затухания логотипа при наведении на него мышкой. Добавьте данный код в Custom.css #elLogo:hover { opacity: .4; -moz-transition-property: opacity; -moz-transition-duration: 1s; -moz-transition-delay: 0s; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-delay: 0s; -o-transition-property: opacity; -o-transition-duration: 1s; -o-transition-delay: 0s; transition-property: opaci

    Sipsb

    Sipsb

    Скрыть название сайта из логотипа

    Скрыть название сайта из логотипа

    Для того, что бы избавится от названия сайта, добавьте в Custom.css следующий код. #elSiteTitle { display: none; } Если хотите убрать только из мобильной версии сайта, то вставьте этот код. @media screen and (max-width: 767px) { #elSiteTitle { display: none; } }  

    Sipsb

    Sipsb

    Цвет меню пользователя

    Цвет меню пользователя

    Для изменения цвета добавьте код в Custom.css #elUserNav > li > a { color: #fffaac; } До изменения После изменения  

    Sipsb

    Sipsb

    Сортировка подкатегорий форума

    Сортировка подкатегорий форума

    Вставить в custom.css .ipsDataItem_subList{ overflow: hidden; } html[dir="ltr"] .ipsApp .ipsDataItem_subList, html[dir="rtl"] .ipsApp .ipsDataItem_subList{ background: none; line-height: 220%; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 4px; } .ipsDataItem_subList li{ float: left; width: calc(100% / 3 - 5px); } html[dir="rtl"].ip

    Sipsb

    Sipsb

    Индивидуальный профиль в теме

    Индивидуальный профиль в теме

    Данная статья поможет сделать пользователю/группе индивидуальный стиль профиля в теме (postContainer). Для того, чтобы получилось так: Нужно в шаблоне postContainer найти и убрать следующее: {{if $comment->author()->member_id}} Далее добавляем следующий код(в любое удобное для Вас место, можно и туда, где стоял предыдущий, но лучше всего поставить под аватаром): Для пользователей: {{if $comment->author()->member_id == X}} <!-- На месте X пишем ID пользоват

    Sipsb

    Sipsb

    Изменить вид объявлений

    Изменить вид объявлений

    Для изменения заходим в настройки управления стилем и нажимаем изменить. Далее в окно поиска вставляем — ipsType_reset ipsWidget_title И изменяем найденый class на один из представленных ниже. ipsType_reset ipsMessage ipsMessage_info ipsType_reset ipsMessage ipsMessage_error ipsType_reset ipsMessage ipsMessage_warning ipsType_reset ipsMessage ipsMessage_success  

    Sipsb

    Sipsb

    Красивый цвет "Групп пользователей"

    Красивый цвет "Групп пользователей"

    День добрый, введи этот код в "группы пользователей" и вот что получиться <span style="font-weight: bold; background: linear-gradient(45deg, red, blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">    

    Sipsb

    Sipsb

×
×
  • Создать...
Вверх
Вверх