Изменения внешнего вида Xenforo 2.x

[baltun]

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

.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%);
}

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

.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;
        }
    }
}

 

[aligon]

Скажите, а как насчёт этого?

Очень красиво сделано
Так же интересно вот это

 

[baltun]

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

 

[aligon]

Я думаю и не увидите, я не умею это делать. Староват
Но очень интересно, а вот идеи, иногда рождаются

 

[baltun]

[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);
}

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

@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 тогда данный код позволит приближать разделы при наведении на них.

.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:

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);
  }
}

Результат:

Делаем отображение 75 лет ВОВ:

.p-header-content {
   background: url(https://s8.hostingkartinok.com/uploads/images/2020/05/cd64344b9e85ed4fc9083c9034703231.png) no-repeat;
   background-size: contain;
}
.p-header-logo.p-header-logo--image img {
   margin-left: 40px;
}

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

.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;
}

Украшаем категории на главной странице (изображение во вложении):

.block.block--category:nth-child(1n) .block-header {
    background: linear-gradient(to left, #8a9c73, #769c73);
color: #fff;
}
.block.block--category:nth-child(2n) .block-header {
    background: linear-gradient(to left, #739c85, #739c9a);
color: #fff;
}
.block.block--category:nth-child(3n) .block-header {
    background: linear-gradient(to left, #738a9c, #73769c);
color: #fff;
}
.block.block--category:nth-child(4n) .block-header {
    background: linear-gradient(to left, #85739c, #9a739c);
color: #fff;
}
.block.block--category:nth-child(5n) .block-header {
    background: linear-gradient(to left, #9c738a, #9c7376);
color: #fff;
}
.block.block--category:nth-child(6n) .block-header {
    background: linear-gradient(to left, #9c8573, #9c9a73);
color: #fff;
}
.block.block--category .block-header {
    text-shadow: 0 0 1px rgba(0,0,0,0.7);
    position: relative;
    transition: ease-in .15s border-bottom-left-radius,ease-in .15s border-bottom-right-radius;
}
.block.block--category .block-header:after {
    content: '';
    background: url(js/swirl.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    mix-blend-mode: overlay;
    pointer-events: none;
}

 

[XTRAMRX]

Помогло спасибо

 

[baltun]

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

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

 

[alex54]

блин, тут стока всего интересного и за год не пересмотришь )

 

[baltun]

блин, тут стока всего интересного и за год не пересмотришь )

Похоже ты самое вкусное пропустил ))) И это только для 2-й ветки, а сколько было сделано для XF 1.5 там вообще капец.

 

[alex54]

меня надо тыкать носом ) я ж слепой, пока вверх статистики не поднимется не вижу, а по разделам лазить не успеваю, и то хочется, и то, блин давно же зарегался, а все что-то носом крутил )

не знаю как остальное, но титл щас смотриться офигенно, там еще ковырять, не перековырять )

 

[baltun]

Вот тут еще есть немного, правда с корректировкой придется делать:

• Изменить внешний вид последних тем в разделе
• Взаимопомощь в разработке дополнений

Креативное оформление списков ul li на CSS:

.message-userContent .bbWrapper ul {
  list-style: none;
}

.message-userContent .bbWrapper ul > li::before {
  content: "🌑";
  transform: scale(0.2);
  display: inline-block;
  animation: pulse infinite alternate 0.9s;
}
.message-userContent .bbWrapper ul > li:nth-child(1)::before {
  animation-delay: -0.2s;
}
.message-userContent .bbWrapper ul > li:nth-child(2)::before {
  animation-delay: -0.4s;
}
.message-userContent .bbWrapper ul > li:nth-child(3)::before {
  animation-delay: -0.6s;
}
.message-userContent .bbWrapper ul > li:nth-child(4)::before {
  animation-delay: -0.8s;
}
.message-userContent .bbWrapper ul > li:nth-child(5)::before {
  animation-delay: -1s;
}
.message-userContent .bbWrapper ul > li:nth-child(6)::before {
  animation-delay: -1.2s;
}
.message-userContent .bbWrapper ul > li:nth-child(7)::before {
  animation-delay: -1.4s;
}
.message-userContent .bbWrapper ul > li:nth-child(8)::before {
  animation-delay: -1.6s;
}
.message-userContent .bbWrapper ul > li:nth-child(9)::before {
  animation-delay: -1.8s;
}
.message-userContent .bbWrapper ul > li:nth-child(10)::before {
  animation-delay: -2s;
}

@keyframes pulse {
  to {
    transform: scale(0.69);
  }
}

Получаем такой эффект:


Ну что на начала августа выложим вам еще один фрагмент кода:

.message--post .message-inner .message-cell--user {
  position: relative;
  text-align: center;
  /*color: #252B37;
  background-color: #151823;*/
  animation: textColor 10s ease infinite;
}
.message--post .message-inner .message-cell--user:after {
    position: absolute;
  content: "";
  top: 5vw;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.75);
  -webkit-filter: blur(5vw);
  -moz-filter: blur(5vw);
  -ms-filter: blur(5vw);
  filter: blur(5vw);
  background: linear-gradient(270deg, #0fffc1, #7e0fff);
  background-size: 200% 200%;
  animation: animateGlow 10s ease infinite;
}
@keyframes animateGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes textColor {
  0% {
    color: #7e0fff;
  }
  50% {
    color: #0fffc1;
  }
  100% {
    color: #7e0fff;
  }
}

Получаем такой результат: