Nowe MyBB 1.8 - przyciski na forum

1.8
Forum testowe - link www

A więc mamy nowe MyBB 1.8 ale nie ma jeszcze specjalnych działów pomocy więc piszę tutaj w tym temacie.
http://thailand.cba.pl/index.php

I teraz mam pewien problem jak zmienić w tym forum przyciski?
http://thailand.cba.pl/index.php
Nadać tym przyciskom inne kolory niż domyślnie są (butony mają wyglądać tak jak wyglądają, ale aby było można im nadać inne kolory, albo podłożyć całkiem inny obrazek zamiast buttona css). Jak rozgryzłem to w css jest to zrobione tak, że wszystkie te przyciski są zdefiniowane w jednej klasie css co trochę komplikuje sprawę.
Np. te 3 przyciski zostałyby zmienione kolorystyką:


A druga sprawa jak zrobić aby przycisk, który jest teraz zrobiony poprzez CSS (przycisk Nowa Odpowiedź - New Reply) był zrobiony poprzez podstawienie graficznego buttona? Jak wyżej na zrzucie pokazałem.


Ktoś wie i może mi to pokazać na testowym forum?
http://thailand.cba.pl

Login, password and acp pin:
admin
admin1x2
ACP PIN: 123456

http://thailand.cba.pl/admin

Matslom napisał 05.09.2014, 18:38:
Przenoszę do odpowiedniego działu

1. Nie zmieniamy na przyciski graficzne, bo nowe mybb posiada przyciski zdefiniowane poprzez CSS.
2. Przyciski możesz zmienić poprzez zmianę wartości w selektorach CSS.
3. Przeglądarki mają taką fajną funkcję pod prawym przyciskiem myszy https://webboard.pl/thread-45824.html
Następnie w kodzie szukamy odpowiedniego selektora jeśli jest to CSS lub kodu html zgodnie z szablonami zapisanymi w komentarzach html.
Na mybb.com napisałem Ci co trzeba zrobić, ale usunęli Ci chyba konto

Nie usunęli tylko dali do działu prywatnego temat:
http://community.mybb.com/thread-158521.html
Trzeba być zalogowanym, aby zobaczyć.

Ponadto chodzi o to, że widzisz każdy mówi jak to zrobić, a podałem stronę aby ktoś pokazał to na przykładzie i bryndza.
6x9 z głową w tym zakresie nie jestem i jakoś nie potrafię dojść jak ustawić graficzny obraz pod Nowa Odpowiedź przycisk, oraz jak zmienić tylko kolory dla wybranych przycisków w poście.
Jest jedna klasa dla wszystkich obiektów, które w dodatku dziedziczą jeszcze coś po innej klasie i trochę to zapętla sprawę.

Jest jedna klasa dla wszystkich obiektów, które w dodatku dziedziczą jeszcze coś po innej klasie i trochę to zapętla sprawę.

To w jaki sposób każdy przycisk ma inną grafikę?

Masz przykładowy kod:

.postbit_quote {
background-color: rgba(135, 211, 243, 0.749);
background-image: none;
}

albatros?

To w jaki sposób każdy przycisk ma inną grafikę?

Przyciski w poście użytkownika są zbudowane przez wygląd pliku graficznego, który nadaje każdemu plikowi taki sam wygląd, a graficzki/ikonki na buttonie są podstawiane z pliku z grafikami, który zabiera cały zbiór grafik w sobie. W CSS ustawiono tylko pozycję tego elementu dla danego przycisku:

.postbit_buttons a.postbit_email span {
    background-position: 0 -40px;
}

Przykładowy kod będzie działał, ale należy wymienić ten element czyli w zasadzie chyba jednak aby nie zapętlać się należy wyjść od 0 z tymi zmianami i na nowno stworzyć elementy określające przyciski. Tylko, że wtedy też i lecą inne przyciski, które są definiowane rzez ten poniższy kod.

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
    display: inline-block;
    padding: 2px 5px;
    margin: 2px;
    font-size: 11px;
    background: #eee url(images/buttons_bg.png) repeat-x;
    border: 1px solid #ccc;
    color: #555;
}


.postbit_buttons > a:hover {
    border-color: #bbb;
}

.postbit_buttons a span {
    padding-left: 20px;
    display: inline-block;
    height: 16px;
    background-image: url(images/buttons_sprite.png);
    background-repeat: no-repeat;
}

.postbit_buttons a.postbit_find span {
    background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
    background-position: 0 -20px;
}

.postbit_buttons a.postbit_email span {
    background-position: 0 -40px;
}

.postbit_buttons a.postbit_website span {
    background-position: 0 -60px;
}

.postbit_buttons a.postbit_pm span {
    background-position: 0 -80px;
}

.postbit_buttons a.postbit_quote span {
    background-position: 0 -100px;
}

.postbit_buttons a.postbit_multiquote span {
    background-position: 0 -120px;
}

.postbit_buttons a.postbit_multiquote_on span {
    background-position: 0 -140px;
}

.postbit_buttons a.postbit_edit span {
    background-position: 0 -160px;
}

.postbit_buttons a.postbit_qdelete span {
    background-position: 0 -180px;
}

.postbit_buttons a.postbit_qrestore span {
    background-position: 0 -200px;
}

.postbit_buttons a.postbit_report span {
    background-position: 0 -220px;
}

.postbit_buttons a.postbit_warn span {
    background-position: 0 -240px;
}

.postbit_buttons a.postbit_purgespammer span {
    background-position: 0 -540px;
}

.postbit_buttons a.postbit_reply_pm span {
    background-position: 0 -260px;
}

.postbit_buttons a.postbit_reply_all span {
    background-position: 0 -280px;
}

.postbit_buttons a.postbit_forward_pm span {
    background-position: 0 -300px;
}

.postbit_buttons a.postbit_delete_pm span {
    background-position: 0 -320px;
}

Czesio.
Styl MyBB 1.8 posiada wszystkie obrazki butonów w jednym pliku graficznym jako szablon z którego je wyświetla. Tą technikę nazywamy sprite
http://forum.serwertruck.eu/images/buttons_sprite.png
Każdy button/każda grafika, która ma się wyświetlać z tego szablonu musi zostać poprzedzona parametrami w CSS.

Tworzymy główny selektor dla wszystkich przycisków

.postbit_buttons a span {
    padding-left: 20px;
    display: inline-block;
    height: 16px;
    background-image: url(images/buttons_sprite.png);
    background-repeat: no-repeat;

w którym mamy wszystkie grafiki na stronie (np wszystkie butony w jednym pliku)
Teraz chcemy wyświetlić jeden buton np do usuwania posta to dodajemy parametry do CSS

.postbit_buttons a.postbit_qrestore span {
    background-position: 0 -200px;
}

W ten sposób wyświetlimy obrazek z szablonu sprite, a wartości 0 -200px to pozycja x,y na obrazie

To ja wiem, ale mi chodzi o to aby podłożyć pod kilka przycisków inne tło nie obrazek, grafikę tylko zmienić kilku przyciskom np. z szarego na czerwone.

Tylko Nowa odpowiedź chcę zastąpić całkiem innym obrazem w całości przycisk graficzny, tak jak tutaj:

To w takim razie do CSS musisz dodać osobne klasy do tła przycisku którego chcesz zmienić.
Poniżej masz prosty przykład dla przycisku cytowania.

.postbit_buttons > a.postbit_quote {
background: #ccc;
}

@czesio_x, ja wiem jak to działa...

Mam na myśli to, że każdy przycisk ma przypisaną oddzielną klasę dlatego nie bardzo wiem w czym widzisz problem.

Generalnie widzę, że jak nie przysiądę to tego nie rozkminię tutaj podałem specjalnie dostęp aby to ktoś praktycznie pokazał, no i lipa.

Gloverek a zobacz co pokazuje twój kod:

.postbit_buttons > a.postbit_quote {
background: #ccc;
}

Zmiana koloru tła jest (to umiałem), ale wstawia się ikona z pliku z grafikami z pozycji 0,0 a ma być ikonka cytatu.

Ikony mają być takie jak są, a one są definiowane przez .postbit_buttons > a.postbit_quote itd. tło definuje klasa dla wszystkich przycisków:

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
    display: inline-block;
    padding: 2px 5px;
    margin: 2px;
    font-size: 11px;
    background: #eee url(images/buttons_bg.png) repeat-x;
    border: 1px solid #ccc;
    color: #555;
}

Jak wiecie nie tłumaczcie mi tylko skopiujcie styl i pokażcie w praktyce przykład jak zmienić tło w przyciskach, ale aby nie zmieniały się ikony na nich nałożone bo one są odpowiednie, a twój przykład gloverek widzisz zmienia ikonę jak zrobiłbym tak all buttons to miałbym na każdym te samą ikonę.

Druga sprawa Nowa odpowiedź ma być jako przycisk graficzny czyli daje buton .png i on już jest przyciskiem bez definiowania otoczki, tła w css jak jest na tych małych przyciskach.

---

p.s. mam taką koncepcję aby zmienić nazwę klasy np. dla przycisku Cytuj i stworzyć nową klasę:

.postbit_buttons2 > a:link,
.postbit_buttons2 > a:hover,
.postbit_buttons2 > a:visited,
.postbit_buttons2 > a:active {
    display: inline-block;
    padding: 2px 5px;
    margin: 2px;
    font-size: 11px;
    background: #eee url(images/buttons_bg.png) repeat-x;
    border: 1px solid #ccc;
    color: #555;
}


.postbit_buttons2 > a:hover {
    border-color: #bbb;
}

wtedy oddzielę te inne ikony/przyciski, których nie chcę ruszać od tej, którą chcę sam zmodyfikować wg mojej koncepcji.

Koleś, nikt tu Tobie nie będzie przerabiał forum. Chyba, że ktoś przysiądzie i zapłacisz mu za robotę.
Poczytaj może troszkę o CSS - najlepiej trójce, zapoznaj się z opcjami przeglądarki - zbadaj element/wyświetl źródło i sam dojdziesz do tego co i jak zmienić.

Tło - kolor - zmieniasz tak:

background-color: red;

Tło graficzne zmieniasz tak:

background: url(link) no-repeat;

A jak chcesz mieć i kolor i grafikę tak:

background: red url(link) no-repeat;

No nie ma zdefiniowanego tła dla każdego z osobna buttonów bo jest wspólne!
Jak chcesz do przycisku "Reply", to musisz sobie napisać

.postbit_buttons>a.postbit_quote {
background: #ccc;
}

@czesio_x, i w czym problem? Podałem przecież gotowy kod, wszystko działa...
Ewentualnie dodaj sobie !important, nie jest to najlepsze rozwiązanie ale dla Ciebie wystarczy:

.postbit_quote {
  background-color: #BFEDF8 !important;
  background-image: none !important;
}

Koleś, nikt tu Tobie nie będzie przerabiał forum. Chyba, że ktoś przysiądzie i zapłacisz mu za robotę.

Panie Dziubczyński na studiach też Pan do wykładowców się tak zwracasz?
:sciana:

albatros ten kod jaki podajesz jest OK zmienia kolor danego przycisku, ale wtedy masz zawsze 1 ikonę ze zbioru z pliku ikon więc przy takim rozwiązaniu każdy zmieniony przycisk będzie miał tę samą ikonkę.
Więc to byłoby dobre ale żeby zmienić kolor, ale jak jeszcze pozostawić ikonę na przycisku, która tam powinna być. Ten kod odpowiada za podstawianie ikon na przyciskach:

.postbit_buttons a span {
    padding-left: 20px;
    display: inline-block;
    height: 16px;
    background-image: url(images/buttons_sprite.png);
    background-repeat: no-repeat;
}

Pewnego rozwiązania już doszedłem trzeba dodać w css3.css nową klasę

.postbit_buttons2 > a,

Potem w Home » Template Sets » mój styl » Edit Template: postbit_classic
Zmienić klasę na postbit_buttons2:

    <div class="postbit_buttons2 post_management_buttons float_right">
        {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
    </div>

Po czym w naszym stylu w global.css kopiujemy postbit_butons i zmieniamy na postbit_buttons2 i tutaj dokonujemy pewnych zmian, ale to sprawia, ze cała grupa 3 przycisków będzie zmieniona.

.postbit_buttons2 > a:link,
.postbit_buttons2 > a:hover,
.postbit_buttons2 > a:visited,
.postbit_buttons2 > a:active {
    display: inline-block;
    padding: 2px 5px;
    margin: 2px;
    font-size: 11px;
    /**background: #FF8000; */
    border: 1px solid #ccc;
    color: #555;
}


.postbit_buttons2 > a:hover {
    border-color: #bbb;
}

.postbit_buttons2 a span  {
    padding-left: 20px;
    display: inline-block;
    height: 16px;
     /**background-image: url(images/buttons_sprite.png);*/
    background-repeat: no-repeat;
}

.postbit_buttons2 > a.postbit_quote2 span {
background-color: #FF8000;

  
}

Za wygląd jednego przycisku odpowiada wiele innych zdefiniowanych klas więc trochę to zapętla sprawę, także Pan Dziubczyński nie dałby rady nawet za pieniądze tego zrobić. A nawet ja zrobiłby to obawiam się, że szablon byłby niekompatybilny ze standardami CSS i HTML, zresztą sama jego strona prosta strona zawiera tak dużo błędów, że stawia to pod znakiem zapytana kompetencje pana, który ma być informatykiem.

Co, co, co?
To co podałem zmienia tylko tło, ikony są jak były.

Za wygląd jednego przycisku odpowiada wiele innych zdefiniowanych klas więc trochę to zapętla sprawę, także Pan Dziubczyński nie dałby rady nawet za pieniądze tego zrobić.

Nic tu nie zapętla sprawy, Ty za bardzo kombinujesz