МАНУАЛ - Изменения внешнего вида Xenforo | Творческая лаборатория xenforo

Совместимость с XenForo

Видимый копирайт: Нет

Иногда бывает, то что не нравится одному, может вполне подойти другому пользователю. Практически всегда можно найти приятный элемент дизайна и адаптировать его к своему форуму. Данный раздел был создан для обмена своими изменениями внешнего вида в Xenforo

CSS:

.p-body-pageContent .block[data-widget-key="xfrm_whats_new_overview_new_resources"]:before {
    content: url(/styles/default/mr-impossible-body.png);
    display: block;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 90px;
    text-align: center;
    background: url(/styles/default/mr-impossible-left.png) no-repeat 0 39px;
    background-size: 100% 30%;
    filter: saturate(100%);
}

Реализация виджета "новые ресурсы"

Less:

.block[data-widget-key="xfrm_forum_overview_new_resources"] {
    box-shadow: none !important;
    .block-container {
        background: url(/styles/default/hal/myfix/j4d-top.png) no-repeat 0 0;
        border-style: none;
        .block-body {
            background: url(/styles/default/hal/myfix/j4d-sides.png) repeat 0 0;
            background-size: 100% 100%;
        }
        &:after {
            content: "";
            top: auto;
            bottom: 4px;
            z-index: 1;
            position: relative;
            display: block;
            height: 36px;
            background: url(/styles/default/hal/myfix/j4d-bottom.png) no-repeat 0 0;
        }
    }
}

Less:

[data-widget-section="staffMembers"] h3.block-minorHeader:before { /* Staff online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-user-tie);
}
[data-widget-section="onlineNow"] h3.block-minorHeader:before { /* Members online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-users);
}
[data-widget-key="forum_overview_new_posts"] h3.block-minorHeader:before { /* Latest posts */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-comments);
}
[data-widget-key="xfrm_forum_overview_new_resources"] h3.block-minorHeader:before { /* Latest resources */
    display: inline-block;
    .m-faBase();
    .m-faContent(@fa-var-download);
}
[data-widget-key="forum_overview_forum_statistics"] h3.block-minorHeader:before { /* Forum statistics */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-chart-bar);
}
[data-widget-key="xfmg_media_slider"] h3.block-minorHeader:before { /* Random media */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-image);
}
[data-widget-key="forum_overview_share_page"] h3.block-minorHeader:before { /* Share this page */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-share-alt);
}

Иногда нужно выделить какой то текст на форуме, рассмотрим один из возможных вариантов:

CSS:

@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");

.p-title-value {
  line-height: calc(20px + 20vh);
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  font-family: "Sacramento", cursive;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

Если у вас стоит плагин Node тогда данный код позволит приближать разделы при наведении на них.

CSS:

.th_node--overwriteTextStyling .node .node-body {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.th_node--overwriteTextStyling .node .node-body:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.02);
z-index: 100;
}

Добавляем кнопку в объявления, для каких целей каждый сам решит для себя, просто оформление через CSS. Объявление будет такого формата:

Продается котенок очень пушистый <a class="fire" href="#">ЗА 125 рублей</a> в добрые руки.

Добавляем код в шаблон EXTRA.LESS:

CSS:

a.fire {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  background: #fff;
  border-radius: 999px;
}
a.fire:hover {
  -webkit-animation: burn 1000ms ease-out forwards;
          animation: burn 1000ms ease-out forwards;
}
a.fire:hover::before {
  content: '';
  position: absolute;
  left: 40px;
  width: 100px;
  height: 40px;
  background: #ffe66e;
  border-radius: 100%;
  -webkit-animation: flare 1000ms ease-out forwards;
          animation: flare 1000ms ease-out forwards;
}
a.fire:hover::after {
  content: '';
  position: absolute;
  right: 40px;
  width: 100px;
  height: 40px;
  background: #ffe66e;
  border-radius: 100%;
  -webkit-animation: flare 1000ms ease-out forwards;
          animation: flare 1000ms ease-out forwards;
}

@-webkit-keyframes flare {
  100% {
    -webkit-transform: translateY(-20px) scale(1.5);
            transform: translateY(-20px) scale(1.5);
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
}

@keyframes flare {
  100% {
    -webkit-transform: translateY(-20px) scale(1.5);
            transform: translateY(-20px) scale(1.5);
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
}
@-webkit-keyframes burn {
  0% {
    color: #ff826e;
    background: #ffe66e;
    box-shadow: 0 0 5px 0 #c8000a, 0 0 5px 0 rgba(230, 30, 10, 0.8), 0 0 5px 0 rgba(230, 230, 10, 0.6);
  }
  100% {
    color: black;
    background: white;
    box-shadow: 0 -35px 40px 30px rgba(255, 130, 10, 0), 0 -30px 30px 10px rgba(230, 30, 10, 0), 0 -20px 10px 0 rgba(255, 255, 10, 0);
  }
}
@keyframes burn {
  0% {
    color: #ff826e;
    background: #ffe66e;
    box-shadow: 0 0 5px 0 #c8000a, 0 0 5px 0 rgba(230, 30, 10, 0.8), 0 0 5px 0 rgba(230, 230, 10, 0.6);
  }
  100% {
    color: black;
    background: white;
    box-shadow: 0 -35px 40px 30px rgba(255, 130, 10, 0), 0 -30px 30px 10px rgba(230, 30, 10, 0), 0 -20px 10px 0 rgba(255, 255, 10, 0);
  }
}

Результат:

Добавляет эффект при наведении на кнопку создать:

CSS:

.button--cta.button.button--icon.button--icon--write:hover {
animation: rainbow 3s infinite linear;
}
@keyframes rainbow {
    to {
        filter: hue-rotate(360deg);
    }
}

.button--cta.button.button--icon.button--icon--write:focus {
    outline: none;
}

Логотип для 8 марта:

CSS:

.p-header-logo:before {
    content: url('2657049.svg'); /*указываете свой путь*/
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    margin: 2px 0px 0px 100px;
}

Реакции: Pokschubin™

МАНУАЛ Изменения внешнего вида Xenforo 0.0.0

Рейтинги

Ещё ресурсы от

Поделиться этим ресурсом