Inne [TUT] Mybb jak zrobić avatar w hexagonie

Witam, od razu mówie że temat jest przerobiony na tutorial.
A zatem pokaże wam jak na forum mybb zrobić avatar w hexagonie.

Oczekiwany efekt: (Załącznik)


Otóż wystarczy skopiować CSS i Postbit_avatar.

1. Kopiujemy poniższy kod i wchodzimy w style i szablony > style > twój styl > global.css > edycja: tryb zaawansowany. I na końcu naszego css'a wklejamy to:

.hex{
    width:80px;
    height:80px;
    background-image: url("");
    background-size: cover;
    position:relative;
    margin:10px;
    margin-left: 70px;
}

.hex:before, .hex:after{
    content:"";
    position: absolute;
    top:0px; height: 40px; width: 0px;
    z-index: 1;
    border: 20px solid #181818;
}

.hex:before{
    left: -20px;
    border-right: 40px solid transparent;
}

.hex:after{
    left: 40px;
    border-left: 40px solid transparent;
} 


2. Teraz wchodzimy w style i szablony > szablony > twój szablon > opis posta > postbit_avatar. i zastępujemy wszystko tym kodem:

<a href="{$post['profilelink_plain']}">
   <div class="hex" style="background-image: url({$post['avatar']})">
   </div>
</a> 


_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

- Może i poradniczek ubogi ale nigdzie w necie nie ma jak zrobić avatar hexa do mybb.

- Jak komuś się coś popsuje to nie moja wina, u mnie działa

- Mam nadzieje że moderator nie usunie tego tematu.

powinno pomóc
https://www.google.pl/?gws_rd=ssl#q=css+hexagon

wystarczy odrobina angielskiego, a jesli sie tego nie potrafi są "słowniki"

HTML

<div class="hexagon"></div>

CSS

.hexagon {
  position: relative;
  width: 300px;
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 86.60px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid #64C7CC;
}

- - -

Daj adres forum...

- - -

Spróbuj coś takiego:

W postbit_avatar zamień cały img na:

<div class="hexagon" style="background-image: url('{$useravatar['image']}')">
  <div class="hexTop"></div>
  <div class="hexBottom"></div>
</div>

W CSS dodaj:

.hexagon {
  position: relative;
  left: 35%;
  width: 70px;
  height: 40.41px;
  margin: 20.21px 0;
  background-size: auto 80.8290px;
  background-position: center;
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 49.50px;
  height: 49.50px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 10.25px;
}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 70.0000px;
  height: 40.414518843273804px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-20.2073px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-20.2073px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-20.2073px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -24.7487px;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -24.7487px;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
  width: 70.0000px;
  height: 40.4145px;
  z-index: 2;
  background: inherit;
}

Efekt:    

@UP
nie wiem czemu ale to twoje nie trybi.

Cofnij wszystkie zmiany, które wcześniej wprowadziłeś. Dodaj tylko to, co napisałem.

Zmiany cofnięte dawno temu ale i tak nie trybi.

Daj cały szablon postbit_avatar

- - -

<a href="{$post['profilelink_plain']}"><div class="hexagon" style="background-image: url({$useravatar['image']})">
   <div class="hexTop"></div>
   <div class="hexBottom"></div>
</div></a>

odświerzam

odświeżam

---

jeżeli ktoś będzie chciał zrobić coś takiego to Pierwszy post został zamieniony w tut, oraz została zmieniona nazwa tematu