Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > [TUT] Mybb jak zrobić avatar w hexagonie
Pełna wersja: [TUT] Mybb jak zrobić avatar w hexagonie
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

Sabat

19.09.2014, 09:31
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:
Kod PHP:
.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:
Kod PHP:
<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.

Supryk

19.09.2014, 09:33
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

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

CSS

Kod:
.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;
}

Sabat

19.09.2014, 10:10
- - -

albatros

19.09.2014, 12:26
Daj adres forum...

Sabat

19.09.2014, 13:52
- - -

albatros

19.09.2014, 15:32
Spróbuj coś takiego:

W postbit_avatar zamień cały img na:
Kod:
<div class="hexagon" style="background-image: url('{$useravatar['image']}')">
  <div class="hexTop"></div>
  <div class="hexBottom"></div>
</div>

W CSS dodaj:
Kod:
.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: [attachment=8534]

Sabat

19.09.2014, 17:21
@UP
nie wiem czemu ale to twoje nie trybi.

albatros

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

Sabat

20.09.2014, 11:28
Zmiany cofnięte dawno temu ale i tak nie trybi.

albatros

20.09.2014, 11:30
Daj cały szablon postbit_avatar

Sabat

20.09.2014, 11:40
- - -

albatros

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

Sabat

20.09.2014, 12:11
odświerzam

Sabat

26.09.2014, 17:03
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
Webboard > Wsparcie MyBB > Style, szablony i grafika > [TUT] Mybb jak zrobić avatar w hexagonie