Свой баннер группы

[aligon]

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

 

[baltun]

Присваиваешь свой класс:

И далее пишешь для него CSS, пример вот написал для присвоенного класса, но вид по умолчанию у него, тут все зависит от фантазий, если есть какой то наглядный пример, как хочешь сделать, то кидай ссылку так проще будет написать и дать фрагмент кода.

.xxx.fix.wrapped span {
    background-color: #a5cae4;
}
.xxx.wrapped span.before {
    border-top-left-radius: 3px;
    left: -1px;
}
.xxx.wrapped span {
    position: absolute;
    top: -4px;
    width: 5px;
    height: 4px;
}
.xxx.fix.wrapped span {
    background-color: #a5cae4;
}
.xxx.wrapped span.after {
    border-top-right-radius: 3px;
    right: -1px;
}
.messageUserBlock .xxx:last-child {
    margin-bottom: 0;
}
.messageUserBlock .xxx {
    display: block;
    margin-bottom: 5px;
    margin-left: -12px;
    margin-right: -12px;
}
.xxx.fix {
    color: #176093;
    background-color: #d7edfc;
    border-color: #a5cae4;
}
.xxx.wrapped {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    position: relative;
}
.xxx {
    font-size: 11px;
    background: transparent url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top;
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    text-align: center;
}

 

[aligon]

Да хотел сделать для всех групп как на xen инфо.
Думаю картинки не стоит.

 

[baltun]

Присваиваешь класс, который ниже группе или группам и вставляешь код:

.prov-xfi {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    box-shadow: 0 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.024) inset, 0 2px 6px rgba(0, 0, 0, 0.05) inset;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    text-shadow: 1px 1px 1px black;
    padding: 2px 5px;
    border-radius: 3px;
    display: block;
    font-size: 11px;
    margin: 4px 0 5px;
    position: relative;
    text-align: center;
    width: 98px;
}
.prov-xfi {
    background-color: blue;
    border-color: blue;
    border: 1px solid blue;
    color: white;
}

 

[aligon]

Это для каждой группы нужно отдельно и цвет менять и код писать?

 

[baltun]

Если будет менять класс да, можно конечно код немного упростить, но тебе наверное так лучше будет в первом классе подгонять первые 4 строки, во втором первые 3 строки, где меняется цвет фона, бордюр и тени.

 

[aligon]

Блин 3 группы и 3 раза этот код менять, понятно, попробую. Спасибо

 

[anotcher]

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

 

[baltun]

Соответственно присваиваем класс нашей группе hal_admin

.userBanner.hal_admin {
  color: #776420;
  font-weight: bold;
  border-color: #cca200;
  text-shadow: white 0 1px 0;
  -webkit-box-shadow: white 0 1px 0 0 inset;
  -moz-box-shadow: white 0 1px 0 0 inset;
  -ms-box-shadow: white 0 1px 0 0 inset;
  -o-box-shadow: white 0 1px 0 0 inset;
  box-shadow: white 0 1px 0 0 inset;
}
.hal_admin {
      text-shadow: none;
  background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), -webkit-linear-gradient(top, #f6f5f0, #ffcb00);
  background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), -moz-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), -ms-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), -o-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), linear-gradient(top, #f6f5f0, #e1e0dc);
  -pie-background: linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), linear-gradient(top, #f6f5f0, #e1e0dc);
  background-repeat: repeat;
  -webkit-background-size: 40px 40px, 100% 100%;
  -moz-background-size: 40px 40px, 100% 100%;
  -ms-background-size: 40px 40px, 100% 100%;
  -o-background-size: 40px 40px, 100% 100%;
  background-size: 40px 40px, 100% 100%;
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -moz-animation: progress-bar-stripes 2s linear infinite;
  -ms-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}

@-webkit-keyframes progress-bar-stripes {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

@-moz-keyframes progress-bar-stripes {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

@keyframes progress-bar-stripes {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}