Изменения внешнего вида Xenforo 2.1

baltun

Администратор
Сообщения
10.735
Реакции
2.544
Баллы
2.003
Иногда бывает, то что не нравится одному, может вполне подойти другому пользователю. Практически всегда можно найти приятный элемент дизайна и адаптировать его к своему форуму. Данный раздел был создан для обмена своими изменениями внешнего вида в Xenforo 2.1
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%);
}
dfbrgdfb.png
Реализация виджета "новые ресурсы"
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;
        }
    }
}
5436543.png
 

Вложения

  • mr.zip
    5 КБ · Просмотры: 13
  • j4d.zip
    24.8 КБ · Просмотры: 10
Последнее редактирование:
Скажите, а как насчёт этого?
Screenshot.png
Очень красиво сделано
Так же интересно вот это
Screenshot.png
 
Последнее редактирование:
Раздел для обмена своими идеями, я пока не видел ваши идеи, чтобы был интерес выкладывать какие то свои идеи, а игра в одни ворота уже давно не интересна.
 
Последнее редактирование:
Я думаю и не увидите, я не умею это делать. Староват:derisive:
Но очень интересно, а вот идеи, иногда рождаются
 
firefox_2019-07-08_23-10-53.png
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;
  }
}
fg40.gif
Если у вас стоит плагин 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. Объявление будет такого формата:
HTML:
Продается котенок очень пушистый <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);
  }
}
Результат:
fg50.gif
Делаем отображение 75 лет ВОВ:
CSS:
.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;
}
5436.png

Добавляет эффект при наведении на кнопку создать:
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;
}
fg62.gif
Украшаем категории на главной странице (изображение во вложении):
CSS:
.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;
}
dsac.png
 

Вложения

  • swirl.zip
    35.2 КБ · Просмотры: 15
Последнее редактирование:
Логотип для 8 марта:
CSS:
.p-header-logo:before {
    content: url('2657049.svg'); /*указываете свой путь*/
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    margin: 2px 0px 0px 100px;
}
4563.jpg
 

Вложения

  • 2657049.zip
    69.9 КБ · Просмотры: 1
блин, тут стока всего интересного и за год не пересмотришь )
 
блин, тут стока всего интересного и за год не пересмотришь )
Похоже ты самое вкусное пропустил ))) И это только для 2-й ветки, а сколько было сделано для XF 1.5 там вообще капец.
 
меня надо тыкать носом ) я ж слепой, пока вверх статистики не поднимется не вижу, а по разделам лазить не успеваю, и то хочется, и то, блин давно же зарегался, а все что-то носом крутил )

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