AMXX.pl: Support AMX Mod X i SourceMod

Witam!

W dzisiejszym tutorialu pokażę Wam jak sprawić, by logo na naszej stronie się trzęsło.

A więc:

1. Wchodzimy w:

Wygląd>style i szablony>[Twój styl]>CSS>ipb_styles.css

i na samym dole tego szablonu wklejamy taki kodzik:

.buzz{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}

.buzz:hover,.buzz:focus,.buzz:active{
-webkit-animation-name:buzz;
animation-name:buzz;
-webkit-animation-duration:0.15s;
animation-duration:0.15s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite
}

@-webkit-keyframes buzz-out{
10%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

20%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

30%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

40%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

50%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

60%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

70%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

80%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

90%{
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}

100%{
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}

}

@keyframes buzz-out{
10%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

20%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

30%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

40%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

50%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

60%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

70%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

80%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

90%{
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}

100%{
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}

}

.buzz-out{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}

.buzz-out:hover,.buzz-out:focus,.buzz-out:active{
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:0.75s;
animation-duration:0.75s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}
dodaj to gdzieś do css
do swojego stylu

i klikamy "zapisz"

2. Wchodzimy w:

Wygląd>style i szablony>[Twój styl]>szablony>DefaultHeader

i zamieniamy kod:

<a href='{$this->settings['board_url']}' class='textLogo' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'>{$this->settings['board_name']}</a>

Na:

<a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'><img src='{parse replacement="logo_img"}' class='buzz-out' alt='{$this->lang->words['logo']}' /></a>

 

Gotowe! Możemy cieszyć się swoim trzęsącym się logo!

Mi to nie działa.