Buttony CSS w stylu Apart Twilight

wersja skryptu MyBB: 1.6.8
adres forum: [w budowie] PLAY3Center
na czym polega problem (screen, opis, komunikaty, nazwa i wersja wtyczki): Szukam przycisków .css do stylu Apart.

Tak jak w tytule posta. Szukam działających przycisków do stylu Apart Twilight. W ogóle nie wiem jak się za to zabrać, gdyż ten styl ma trochę inne kody buttonów. Przykładowy przycisk (tutaj: postbit_edit) w stylu Apart:

<a href="editpost.php?pid={$post['pid']}" id="edit_post_{$post['pid']}"><img src="{$theme['imglangdir']}/postbit_edit.gif" alt="{$lang->postbit_edit}" title="{$lang->postbit_edit}" /></a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="javascript:;" onclick="Thread.quickEdit({$post['pid']});" class="popup_item">{$lang->postbit_quick_edit}</a></div><div class="popup_item_container"><a href="editpost.php?pid={$post['pid']}" class="popup_item">{$lang->postbit_full_edit}</a></div></div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("edit_post_{$post['pid']}");
    }
// -->
</script>

Używałem do edycji tego poradnika i tego, nawet zainstalowałem plugin (tutaj działało, jednak chcę uniknąć instalacji niepotrzebnych pluginów). Jak staram się edytować obecny kod lub podmienić, to albo obrazki zostają mimo usunięcia ścieżki, lub wyskakuje błąd i nie można w ogóle ów button kliknąć. Już mi ręce opadają. Da ktoś radę mi w tym pomóc?

Jeśli chcesz usunąć obrazek to zrób tak:

<a href="editpost.php?pid={$post['pid']}" id="edit_post_{$post['pid']}"><span class="button">Edytuj</span></a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="javascript:;" onclick="Thread.quickEdit({$post['pid']});" class="popup_item">{$lang->postbit_quick_edit}</a></div><div class="popup_item_container"><a href="editpost.php?pid={$post['pid']}" class="popup_item">{$lang->postbit_full_edit}</a></div></div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("edit_post_{$post['pid']}");
    }
// -->
</script>

Jeśli chcesz dodać css`owy button to tak:

<a href="editpost.php?pid={$post['pid']}" id="edit_post_{$post['pid']}"><img src="{$theme['imglangdir']}/postbit_edit.gif" alt="{$lang->postbit_edit}" title="{$lang->postbit_edit}" /></a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="javascript:;" onclick="Thread.quickEdit({$post['pid']});" class="popup_item">{$lang->postbit_quick_edit}</a></div><div class="popup_item_container"><a href="editpost.php?pid={$post['pid']}" class="popup_item">{$lang->postbit_full_edit}</a></div></div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("edit_post_{$post['pid']}");
    }
// -->
</script>

Oczywiście ja tam dałem ścieżkę do klasy .button możesz ją zmienić zamieniając:

<span class="button">

na

<span class="twoja_klasa">

Chyba o to Ci chodziło. Pozdro

Zobaczę, czy zadziała. Dzisiaj nie dam rady, ale jak zrobię to od razu dam znać. Więc zatem, chwilowo dzięki

PS: Tylko po co to:

{$theme['imglangdir']}/postbit_edit.gif"

Skoro ja chce .css?

PS2: A mógłbyś podać tak w skrócie co tylko trzeba zmieniać w każdym buttonie przy takim kodzie? Bo nie mam czasu tego analizować dzisiaj

---

Ok, przeanalizowałem trochę ten kod. Mnie chodzi konkretnie o to, by zamienić OBRAZEK na BUTTON CSS, czyli najbliższy ten drugi kod. Tylko jednego tam nie rozumiem:

<a href="editpost.php?pid={$post['pid']}" id="edit_post_{$post['pid']}"><img src="{$theme['imglangdir']}/postbit_edit.gif" alt="{$lang->postbit_edit}" title="{$lang->postbit_edit}" /></a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="javascript:;" onclick="Thread.quickEdit({$post['pid']});" class="popup_item">{$lang->postbit_quick_edit}</a></div><div class="popup_item_container"><a href="editpost.php?pid={$post['pid']}" class="popup_item">{$lang->postbit_full_edit}</a></div></div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("edit_post_{$post['pid']}");
    }
// -->
</script>

Gdzie tu jest miejsce na klase "button"?

Spróbuj tak:

1. Wbijamy do global.css -> tryb zaawansowany.
2. wklejasz na koniec kod:

.postbit {
    background: #0066ff url(images/mynecraft/highlight.png) top left repeat-x;
    color: #FFFFFF;
    text-align: center;
    padding: 3px 9px;
    cursor: pointer;
    text-decoration: none;
}

.postbit:hover {
background: #000099 url(images/highlight.png) top left repeat-x;
    color: #FFFFFF;
    -webkit-transition: color 0.5s linear;
    -moz-transition: color 0.5s linear;
    -o-transition: color 0.5s linear;
}

.postbit:active {
        background: #0066ff url(images/highlight.png) top left repeat-x;
    color: #FFFFFF;
-webkit-transition: 0s;
    -moz-transition: 0s;
    -o-transition: 0s;
    -ms-transition: 0s;
    transition: 0s;
    

    -webkit-transform: scale(1.1);
}

3. Wchodzisz w w/w szablon ( w 2 poście) i podmieniasz kod na ten:

<a href="editpost.php?pid={$post['pid']}" id="edit_post_{$post['pid']}"><span class="postbit">Edytuj</span></a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="javascript:;" onclick="Thread.quickEdit({$post['pid']});" class="popup_item">{$lang->postbit_quick_edit}</a></div><div class="popup_item_container"><a href="editpost.php?pid={$post['pid']}" class="popup_item">{$lang->postbit_full_edit}</a></div></div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("edit_post_{$post['pid']}");
    }
// -->
</script>

5. Na koniec wgrywasz plik z załącznika.
6. Voila

Możesz oczywiście zmienić kolor. Jak Ci się spodoba to ustawiasz sobie we wszystkich szablonach buttonów. (PPM -> Zbadaj Element i do dzieła )

---

@EDIT kod na zamianę buttona graficznego na css`owy to ten:

<span class="postbit">...</span>

Wklejasz go zamiast:

<img src="praprpaprapaprappra"/>

O cssa nie musialeś się martwić. Mogłem sobie szukać takiej klasy, a nazwałeś inaczej

Ok, dzięki, ide popróbować. O efektach poinformuję.

---

Nie działa. Po prostu zostaje obrazek...

Dostałem w ręce dane konta testowego z uprawnieniami administratora. Od razu odkryłem co jest nie tak! Masz wgrany plugin ModNotice+ Który tworzy swój szablon i zamienia zwykły postbit_edit na swój (tylko dla administratora) Zwykły użytkownik ma button CSSowy. Z edytowałem szablon postbit_moderator_edit (czy jakoś tak) i działa! Masz cssowego buttona. Robisz tak we wszsytkich szablonów jak pisałem w poście nr.4.

Wielkie dzięki! Kolorami, szablonami i ich edycją pobawię się kiedy indziej. A wiesz jeszcze jak uzyskać taki efekt jak tu? http://www.gta-five.pl/

Chodzi mi o takie łagodne przejście z jednego w drugie. Znasz się na tym, wiesz o co chodzi

PS: Konto testowe chwilowo ci jeszcze zostawić?

Spróbuj to dodać do klasy postbit:hover

transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;

Jesteś wielki!

Tylko ten kod działa tylko w jedną stronę. Jak się najeżdża. Jak myszkę się odsuwa, to button znowu sztywno wraca... Rozumiesz? Wiesz co tam jeszcze trzeba dodać?

(sory za takie dręczenie, ale dopiero zacząłem rozumieć .cssa więc trochę za wcześnie na takie kody )

Wklej to do klas postbit oraz postbit:hover

transition: all .4s linear;
-o-transition: all .4s linear;
-moz-transition: all .4s linear;
-webkit-transition: all .4s linear;

Powtarzam, jesteś wielki! Uznam wątek za rozwiązany, ale jeszcze tutaj zapewne będę zaglądał, bo nie wierzę, że nie będę mieć więcej problemów