Jump to content
  • Замена иконок форумов изображениями


     Официально

    В Invision Community 4 с лёгкостью можно добавить иконку к каждому форуму в его настройках в админ-центре. Однако, если вы хотите иметь собственные иконки для каждого форума, загружать их  для каждого форума довольно трудоёмкое действие. Давайте разберёмся как это сделать легко и просто с помощью CSS.

    Сперва нужно загрузить необходимую иконку в Ресурсы вашей темы, чтобы можно мы смогли обращаться к ней в CSS. Мы разберём возможность указать одну и ту же иконку для разных статусов форумов (прочитан/не прочитан), а так же указать свою иконку для каждого из статусов. Начнём с первого случая:

    Одинаковая иконка для всех форумов

    Приведём CSS код для установки иконки для всех форумов сразу:

    /* Указываем иконку из ресурсов темы  */
    body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large {
    	width: 50px;
    	height: 50px;
    	border-radius: 0;
    	background-color: transparent;
    	background-image: url('{resource="forumicon.png" app="core" location="front"}');
    	background-size: 50px 50px;
    }
    
    /* Убираем стандартную иконку fonawesome */
    body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large > i {
    	display: none;
    }

    Как видно из CSS кода, мы указали селектор body[data-pageapp="forums"], определяющий, что иконки будут изменены только у приложения форумов. В рамках этого css стиля мы применили ограничение размера нашей иконки в 50px на 50px, которые вы можете изменить на свои. Далее мы обнуляем значение border-radius и указываем прозрачный фон.

    forum_icon.jpg

     

    Используем другую иконку у форумов со статусов 'Прочитано'

    По умолчанию к иконке будет применён эффект затухания (прозрачности), если отметить форум прочитанным, однако можно в этом случае использовать другую иконку:

    body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {
    	background-image: url('{resource="forumicon_transp.png" app="core" location="front"}');
    }

    Здесь мы добавили в селектор класс .ipsItemStatus_read, который появляется у прочитанных форумов. В стиле мы указываем только иконку, остальные параметры мы уже переопределили выше.

    forumicon_opacity.PNG

    Различные иконки для форумов с перенаправлением и форумов для вопросов

    Если вы хотите добавить иконку для форумов с перенаправлением или форумов, предназначенных для вопросов, вы можете использовать в селекторе уникальные классы - .cForumIcon_redirect и .cForumIcon_answers. Таким образом, чтобы добавить иконку для форумов, предназначенных для вопросов, вы должны добавить класс, например:

    body[data-pageapp="forums"] .cForumRow .cForumIcon_answers.ipsItemStatus.ipsItemStatus_large {
    	background-image: url('{resource="questionicon.png" app="core" location="front"}');
    }

     

    questionforum.PNG

     





      Report запись


    User Feedback


    There are no comments to display.



    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...

Messenger

    ×
    ×
    • Create New...

    Important Information

    By using our site you agree to our Privacy Policy