Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430
Flat Awesome - PixelExit.com

Flat Awesome - PixelExit.com 1.5.20

Нет прав для скачивания
Обзор Обновления (15) Отзывы (5) История Обсуждение
В настройках стиля всё можно убрать/заменить.
 
Неужели не видно??? Node Icon

fa5-png.19390
 
I am looking someone to hire, I need to customize it. Anyone?
 
[QUOTE = "Hope, post: 47737, member: 1"] What exactly do you need? [/ QUOTE]
There are too many, lets start with this one. :-)

Please check
У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация
.

Untitled.png

If you hoover your mouse there, there is a nice sliding effect. Also font awesome is used. I want that sliding effect and to font awesome. :)

Thanks in advance. :)
 
Всем доброго времени суток!
Подскажите, а кто-то смотрел на работу данного стиля через Оперу?
Только у меня все шрифты калично-мелко смотрятся?
Поигрался с настройками, и понял, что Опера шрифт 'Open Sans' как то странно обрабатывает.
Поставил первым с писке Arial, вроде лучше стало.
 
Неа, я этого не знаю, а копаться мне просто лень. ))

Шаблон message_user_info.css заменяем на:
Код: 
html .messageUserBlock .extraUserInfo dl
{
    float: left;
    overflow: hidden;
    width: 33%;
}

.extraUserInfo .pairsJustified dt
{
    font-size: 140% !important;
color: rgb(61, 71, 89);
margin-right: 0px;
float: none;
width: auto;
text-align: center;

}

.extraUserInfo .pairsJustified dd
{   
    float: none;
width: auto;
text-align: center;
margin-right: 0px;

}


.messageUserInfo
{
    background-color: rgb(254, 254, 254);
padding: 10px;
border: 1px solid rgb(226, 226, 226);
float: left;
-webkit-box-shadow: 0px 0px 10px #EBEBEB; -moz-box-shadow: 0px 0px 10px #EBEBEB; -khtml-box-shadow: 0px 0px 10px #EBEBEB; box-shadow: 0px 0px 10px #EBEBEB;
width: 124px;

}

    .messageUserBlock
    {
       
       
        position: relative;
    }
       
        .messageUserBlock div.avatarHolder
        {
            padding: 4px 10px 0;
-webkit-border-radius: 0px; -moz-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;
   
        }
       
            .messageUserBlock div.avatarHolder .avatar
            {
                display: block;
                font-size: 0;
            }
           
        .messageUserBlock h3.userText
        {
            padding: 6px;

        }
       
        .messageUserBlock .userBanner
        {
            display: block;
            margin-bottom: 5px;
            margin-left: -12px;
            margin-right: -12px;
        }
       
        .messageUserBlock .userBanner:last-child
        {
            margin-bottom: 0;
        }
   
        .messageUserBlock a.username
        {
            font-weight: bold;
font-size: 14px;
display: block;
overflow: hidden;
line-height: 16px;

           
        }
       
        .messageUserBlock .userTitle
        {
            font-size: 11px;
display: block;

        }
       
        .messageUserBlock .extraUserInfo
        {
            font-size: 10px;
background-color: rgb(245, 245, 245);
padding-top: 4px;
padding-bottom: 4px;
margin: 0 -10px -10px;
border-top: 1px solid rgb(226, 226, 226);
overflow: hidden;
transition: all 0.5s ease-in;
opacity: 0;
height: 0;

        }
       
            .messageUserBlock .extraUserInfo dl
            {
                margin: 2px 0 0;
            }
                           
            .messageUserBlock .extraUserInfo img
            {
                max-width: 100%;
            }
       
        .messageUserBlock .arrow
        {
            position: absolute;
            top: 10px;
            right: -10px;
           
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
           
            border: 10px solid transparent;
            border-left-color: ;
            -moz-border-left-colors: ;
            border-right: none;
           
            /* Hide from IE6 */
            _display: none;
        }
       
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                left: -11px;
               
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
               
                border: 10px solid transparent;
                border-left-color: ;
                -moz-border-left-colors: ;
                border-right: none;
            }


@media (max-width:480px)
{
    .Responsive .messageUserInfo
    {
        float: none;
        width: auto;
    }

    .Responsive .messageUserBlock
    {
        overflow: hidden;
        margin-bottom: 5px;
        position: relative;
    }

    .Responsive .messageUserBlock div.avatarHolder
    {
        float: left;
        padding: 5px;
    }

        .Responsive .messageUserBlock div.avatarHolder .avatar img
        {
            width: 48px;
            height: 48px;
        }

    .Responsive .messageUserBlock h3.userText
    {
        margin-left: 64px;
    }
   
    .Responsive .messageUserBlock .userBanner
    {
        max-width: 150px;
        margin-left: 0;
        margin-right: 0;
        -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-right-radius: 3px; border-top-right-radius: 3px;
        position: static;
        display: inline-block;
    }
   
        .Responsive .messageUserBlock .userBanner span
        {
            display: none;
        }

    .Responsive .messageUserBlock .extraUserInfo
    {
        display: none;
    }

    .Responsive .messageUserBlock .arrow
    {
        display: none;
    }
}


В шаблон EXTRA.css добавляем:
Код: 
/* Default user banner styling '.userBanner' */
.userBanner
{
    font-weight: bold;
    background: none;
    padding: 3px 8px;
    border:  1px solid rgb(0, 0, 0); border:  1px solid rgba(0, 0, 0, 0); _border:  1px solid rgb(0, 0, 0);
    -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
    -webkit-box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none; box-shadow: none;
}

.userBanner.bannerStaff
{
    color: #F1F1F1;
    background-color: #286CC4;
    border-color: #0C58AA;
    -webkit-box-shadow: inset 0px 0px 0px 1px #4A8EF3; -moz-box-shadow: inset 0px 0px 0px 1px #4A8EF3; -khtml-box-shadow: inset 0px 0px 0px 1px #4A8EF3; box-shadow: inset 0px 0px 0px 1px #4A8EF3;
}

.messageUserBlock .userBanner
{
    margin-left: 0;
    margin-right: 0;
}

.userBanner.wrapped { -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; }

.userBanner.wrapped span.before, .userBanner.wrapped span.after
{
    display: none;
}

/* Custom user banner styling example. '.adminBanner' */
.adminBanner
{
    display: block;
    background: #DB3232;
    color: #F1F1F1;
    border: 1px solid #B30909;
    padding: 3px 8px;
    -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    -webkit-box-shadow: inset 0px 0px 0px 1px #FA5454; -moz-box-shadow: inset 0px 0px 0px 1px #FA5454; -khtml-box-shadow: inset 0px 0px 0px 1px #FA5454; box-shadow: inset 0px 0px 0px 1px #FA5454;
}

@media (max-width:800px)
{
    .messageUserBlock  .adminBanner
    {
        display: inline-block;
    }   
}

.messageUserBlock .arrow
{
    top: 30px;
    right: -25px;
    display: block;
    border:  30px solid rgb(0, 0, 0); border:  30px solid rgba(0, 0, 0, 0); _border:  30px solid rgb(0, 0, 0);
    border-right-color: rgb(226, 226, 226);
    border-left: none;
}

.messageUserBlock .arrow span
{
    top: -30px;
    left: 1px;
    border:  30px solid rgb(0, 0, 0); border:  30px solid rgba(0, 0, 0, 0); _border:  30px solid rgb(0, 0, 0);
    border-right-color: rgb(254, 254, 254);
    border-left: none;
}

.messageUserBlock .userTitle
{
    text-align: center;
   
}

.messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    height: 50px;
}

.messageUserInfo { transition: all 0.5s ease-in; }

.peUserName
{
    text-align: center;
    padding: 0 !important;
}


Результат (внешний вид править реально нет желания):
1.gif
 
Потестировал стиль и столкнулся с такой проблемой, так как в стиле используется шрифт Font Awesome, в редакторе заменены картинки кнопок на иконки шрифта. При установке своих вв-кодов надо править самому иконки кнопок, добавленная картинка не отобразиться.
 
При создании нового вв-кода создается класс css для него: redactor_btn_custom_ТЕГ КОДА, в EXTRA.css создаем для каждого стиль:
Код: 
li a.redactor_btn_custom_ТЕГ:before {
    content: "\Уникод шрифта";
}

Hope написал(а):
Да, конечно. :-)

Вот по этой инструкции всё очень просто делается: http://xenforo.info/resources/Заменяем-иконки-в-редакторе-на-font-awesome.2053/
Нажмите для раскрытия...

Я не спрашивал :-), хотел написать
 
Последнее редактирование:
Ну вот и написали. :)
 
Возникает вопрос где взять Unicode знака. Идем на сайт
У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация
выбараем иконку , жмем, увидим строчку типа
Unicode: f1ad · Created: v4.1 · Categories: Web Application Icons Вот f1ad оно и есть. В css будет:
Код: 
li a.redactor_btn_custom_ТЕГ:before {
    content: "\f1ad";
}


Немного допилил, что давал Hope, еще по мелочи.

Там информация пользователя как хотел NulledFL Стилизуем информацию под аватаром
 

Вложения

  • style-Flat-Awesome.zip
    44.7 KB · Просмотры: 12
Друзья, поставил этот стиль, возник вопрос, где лежат иконки
В темплейтах то нашел их, удалить могу, а вот как заменить? Т.к. например мне твиттер/фб/гугл+ не интересны, поставил бы вк и подобное.
 
Читаем объявление над редактором и все изображения загружаем только на наш сервер!

bytroy написал(а):
В темплейтах то нашел их, удалить могу, а вот как заменить?
Нажмите для раскрытия...
Так заменяете по аналогии и всё. Оо. В чём проблема-то?
 
Hope написал(а):
Читаем объявление над редактором и все изображения загружаем только на наш сервер!


Так заменяете по аналогии и всё. Оо. В чём проблема-то?
Нажмите для раскрытия...
Пардон, не обратил внимание. Привык личным хостом пользоваться быстро и удобно.

Посчет просто замены, не выйдет так просто, либо я тугодум. Где оно тут меняется :-) Где лежат тоже не особо нашел.
Ссылки заменить да, в 1 шаг.

Снимок.PNG Снимок1.PNG
 
Последнее редактирование:
Например приводим строки:
Код: 
<div class="socialicons hiddenResponsiveNarrow">
    <ul>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
        <li><a href="#"><i class="fa fa-google"></i></a></li>
    </ul>
</div>


К такому виду:
Код: 
<div class="socialicons hiddenResponsiveNarrow">
    <ul>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-vk"></i></a></li>
        <li><a href="#"><i class="fa fa-google"></i></a></li>
    </ul>
</div>

В данном примере мы просто заменим YouTube на Вконтакте, но других иконок для наших соц сетей к сожалению нет...
 
Войдите или зарегистрируйтесь для ответа.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

Hope
Materialecho
Ответы
0
Просмотры
466
Hope
Hope
Hope
Flat Awesome Dark - PixelExit.com
15 16 17 18 19 20 21
Ответы
400
Просмотры
25K
Leha Frolov
Leha Frolov
M
  • Статья
XenForo 2.1: Офф форум уже обновился до XF2.1 и вместе с этим были рассмотрены ещё ряд улучшений
2 3
Ответы
40
Просмотры
5K
unconfirmed
U
Назад
Сверху Снизу