XF 2.2 Баннеры Групп

[Benjaminl]

Привет, как сделать такие завороты на баннерах групп?

 

[Efremov]

Привет, как сделать такие завороты на баннерах групп?Посмотреть вложение 154932

Поставить ксен 1.5

 

[Benjaminl]

Поставить ксен 1.5

а если не менять версию?

 

[Efremov]

а если не менять версию?

Тогда CSS

 

[Skaiman]

Делалось на дефолтном стиле, для дефолтных баннеров групп, но ни чего не мешает сделать по этому принципу и для своих

@media (min-width: @xf-responsiveMedium) {
    .message-userBanner.userBanner {
        margin-left: -14px;
        margin-right: -14px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        position: relative;  
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
        span {
            position: absolute;
            top: -4px;
            width: 5px;
            height: 4px;
            background-color: inherit;
            &.userBanner-before {
                border-top-left-radius: 3px;
                left: -1px;
            }
            &.userBanner-after {
                border-top-right-radius: 3px;
                right: -1px;          
            }
        }
        &.userBanner--staff, &.userBanner--primary {
            span {
                background-color: @xf-borderColorHighlight;
            }
        }
        &.userBanner--accent span {
            background-color: @xf-borderColorAccentContent;
        }
        &.userBanner--red span {
            background-color: xf-intensify(#d80000, 15%);
        }
        &.userBanner--green span {
            background-color: xf-intensify(green, 15%);
        }
        &.userBanner--olive span {
            background-color: xf-intensify(olive, 15%);
        }
        &.userBanner--lightGreen span {
            background-color: xf-intensify(#ccf9c8, 15%);
        }
        &.userBanner--blue span {
            background-color: xf-intensify(#0008e3, 15%);
        }
        &.userBanner--royalBlue span {
            background-color: xf-intensify(royalblue, 15%);
        }
        &.userBanner--skyBlue span {
            background-color: xf-intensify(#7cc3e0, 15%);
        }
        &.userBanner--gray span {
            background-color: xf-intensify(gray, 15%);
        }
        &.userBanner--silver span {
            background-color: xf-intensify(silver, 15%);
        }
        &.userBanner--yellow span {
            background-color: xf-intensify(#ffff91, 15%);
        }
        &.userBanner--orange span {
            background-color: xf-intensify(#ffcb00, 15%);
        }
    }
}

 

[Benjaminl]

Делалось на дефолтном стиле, для дефолтных баннеров групп, но ни чего не мешает сделать по этому принципу и для своих

@media (min-width: @xf-responsiveMedium) {
    .message-userBanner.userBanner {
        margin-left: -14px;
        margin-right: -14px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
        span {
            position: absolute;
            top: -4px;
            width: 5px;
            height: 4px;
            background-color: inherit;
            &.userBanner-before {
                border-top-left-radius: 3px;
                left: -1px;
            }
            &.userBanner-after {
                border-top-right-radius: 3px;
                right: -1px;        
            }
        }
        &.userBanner--staff, &.userBanner--primary {
            span {
                background-color: @xf-borderColorHighlight;
            }
        }
        &.userBanner--accent span {
            background-color: @xf-borderColorAccentContent;
        }
        &.userBanner--red span {
            background-color: xf-intensify(#d80000, 15%);
        }
        &.userBanner--green span {
            background-color: xf-intensify(green, 15%);
        }
        &.userBanner--olive span {
            background-color: xf-intensify(olive, 15%);
        }
        &.userBanner--lightGreen span {
            background-color: xf-intensify(#ccf9c8, 15%);
        }
        &.userBanner--blue span {
            background-color: xf-intensify(#0008e3, 15%);
        }
        &.userBanner--royalBlue span {
            background-color: xf-intensify(royalblue, 15%);
        }
        &.userBanner--skyBlue span {
            background-color: xf-intensify(#7cc3e0, 15%);
        }
        &.userBanner--gray span {
            background-color: xf-intensify(gray, 15%);
        }
        &.userBanner--silver span {
            background-color: xf-intensify(silver, 15%);
        }
        &.userBanner--yellow span {
            background-color: xf-intensify(#ffff91, 15%);
        }
        &.userBanner--orange span {
            background-color: xf-intensify(#ffcb00, 15%);
        }
    }
}

Спасибо, но как исправить? Быть точнее сделать заворот не круглым

 

[Skaiman]

Быть точнее сделать заворот не круглым

так у тебя большой радиус баннеров :)

 

[Benjaminl]

так у тебя большой радиус баннеров :)

а где его уменьшить?

 

[Skaiman]

а где его уменьшить?

ну там, где ты его изменял, по дефолту нет такого радиуса border-radius

 

[Skaiman]

Formyla, а если честно, то такое отображение баннеров смотрится не очень, как то старым, но может для тех кто не прошел всех этапов изменения движка, это новинка какая то :)

 

[Benjaminl]

Formyla, а если честно, то такое отображение баннеров смотрится не очень, как то старым, но может для тех кто не прошел всех этапов изменения движка, это новинка какая то :)

Я знаю, это баннер для авто-ответчика на темы

 

[Skaiman]

Там делалось на светлый стиль и думаю лучше в миксинах цвета уголков заворотов поправить функцию xf-intensify на darken, так как функция ксена xf-intensify на светлых стилях затемняет, а на темных осветляет :)

 

[Benjaminl]

А более видимый заворот возможно сделать?

 

[Skaiman]

свойства span поковыряй

 

[Benjaminl]

свойства span поковыряй

Поигрался, помогло конечно не особо, но все равно спасибо!

Спойлер

Можешь выложить код красивых баннеров (или фото баннеров)

 

[Skaiman]

Поигрался, помогло конечно не особо, но все равно спасибо!

надо все таки понимать то, что делаешь

Можешь выложить код красивых баннеров (или фото баннеров)

в моих ресурсах их куча

 

[Benjaminl]

надо все таки понимать то, что делаешь

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