• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.

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

baltun

Администратор
Сообщения
6.623
Реакции
1.863
Баллы
1.833
Иногда бывает, то что не нравится одному, может вполне подойти другому пользователю. Практически всегда можно найти приятный элемент дизайна и адаптировать его к своему форуму. Данный раздел был создан для обмена своими изменениями внешнего вида в 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 КБ · Просмотры: 3
  • j4d.zip
    24.8 КБ · Просмотры: 1
Последнее редактирование:

aligon

Местный
Сообщения
281
Реакции
153
Баллы
183
Скажите, а как насчёт этого?
Screenshot.png
Очень красиво сделано
Так же интересно вот это
Screenshot.png
 
Последнее редактирование:

baltun

Администратор
Сообщения
6.623
Реакции
1.863
Баллы
1.833
Раздел для обмена своими идеями, я пока не видел ваши идея, чтобы был интерес выкладывать какие то свои идеи, а игра в одни ворота уже давно не интересна.
 

aligon

Местный
Сообщения
281
Реакции
153
Баллы
183
Я думаю и не увидите, я не умею это делать. Староват:derisive:
Но очень интересно, а вот идеи, иногда рождаются
 

baltun

Администратор
Сообщения
6.623
Реакции
1.863
Баллы
1.833
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 КБ · Просмотры: 5
Последнее редактирование:
Верх Низ