Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > Ustawienie położenia buttonów
Pełna wersja: Ustawienie położenia buttonów
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

MEXXIO

11.03.2013, 13:35
wersja skryptu MyBB: 1.6.9
adres forum: http://bb.lamalabs.org
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Mam mały problem z buttonami stworzyłem dodatkowy styl buttons.css jego zawartość:

Kod:
#llbutton {
    margin-left: 5px;
    margin-right: -3px;
}

#llbutton .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin-right: 5px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llbutton .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llleft1 {
    margin-left: 56px;
    margin-right: -3px;
    margin-top: 37px;
}

#llleft1 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llleft1 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llleft2 {
    margin-left: 100px;
    margin-right: -3px;
    margin-top: 37px;
}

#llleft2 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llleft2 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llleft3 {
    margin-left: 169px;
    margin-right: -3px;
    margin-top: 37px;
}

#llleft3 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llleft3 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llleft4 {
    margin-left: 200px;
    margin-right: -3px;
    margin-top: 37px;
}

#llleft4 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llleft4 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright1 {
    margin-left: 5px;
    margin-right: 240px;
    margin-top: 37px;
}

#llright1 .link a {
    color: #eeeeee;
    float: right;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright1 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright2 {
    margin-left: 70px;
    margin-right: -3px;
    margin-top: 37px;
}

#llright2 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright2 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright3 {
    margin-left: 129px;
    margin-right: -3px;
    margin-top: 37px;
}

#llright3 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright3 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright4 {
    margin-left: 186px;
    margin-right: -3px;
    margin-top: 37px;
}

#llright4 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright4 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright5 {
    margin-left: 255px;
    margin-right: -3px;
    margin-top: 37px;
}

#llright5 .link a {
    color: #eeeeee;
    float: right;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright5 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

zgaduję że za dużo tego kodu i da się skrócić, no ale średnio z css mi idzie. Mój problem jest taki że źle wyświetlają mi się te buttony odstają od krawędzi forum.

[Obrazek: czeiczoem20130311133153.th.png]
[Obrazek: czeiczoem20130311133208.th.png]
Jak zawsze widzę las rąk do pomocy.

Daniel Praźmo

12.03.2013, 18:59
Hmm... Ze screenów średnio rozumiem problem.
Nie rozumiem też zbytnio tego całego kodu CSS. Podaj zawartość szablonu postbit, bo bez tego nie dojdę, co ty tam namodziłeś.

MEXXIO

12.03.2013, 19:30
Sam postbit:

Kod:
http://wklej.org/id/979829/

postbit_delete_pm

Kod:
http://wklej.org/id/979830/

postbit_edit

Kod:
http://wklej.org/id/979831/

postbit_email

Kod:
http://wklej.org/id/979832/

No wszystkich chyba nie będę dawać.

Kod:
http://wklej.org/id/979834/

Daniel Praźmo

13.03.2013, 17:55
Problemem są dziwnie marginesy i wybrane rozwiązanie zbędnego umieszczania klasy w identyfikatorze.
Przy aktualnym ustawieniu, przyciski wyświetlają się dobrze tylko wtedy, gdy są wszystkie. Jeśli jakiegoś brakuje, to marginesy między elementami się rozjeżdżają.

Tak wygląda przykładowy styl i szablon przycisku po mojemu:
Kod:
.bitbutton {
    display: block;
    margin: 3px 2px;
    background-image:url(images/otkau/button_bg.png);
    padding: 2px 10px;
    float: left;
}

.bitbutton:link, .bitbutton:visited {
    color: #fff;
}

.bitbutton:hover, .bitbutton:active {
    background-position: 0px -30px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}

Kod:
.bitbutton {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Kod PHP:
<a href="private.php?action=delete&amp;pmid={$id}&amp;my_post_key={$mybb->post_code}" class="bitbutton">Usuń</a> 

Oczywiście zamiast tła obrazkowego i jego przesuwania przy najechaniu kursorem, możesz użyć zwykłych kolorów i je zmieniać.

Live demo: http://otkau.nidrax.eu/forum/temat-kodom...d=41#pid41

MEXXIO

14.03.2013, 08:01
A czy to tez mam dodać?

Kod:
.bitbutton {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

I w jaki sposób czy po prostu wkleić to do tego:


Kod:
.bitbutton {
    display: block;
    margin: 3px 2px;
    background-image:url(images/otkau/button_bg.png);
    padding: 2px 10px;
    float: left;
}

.bitbutton:link, .bitbutton:visited {
    color: #fff;
}

.bitbutton:hover, .bitbutton:active {
    background-position: 0px -30px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}

Daniel Praźmo

14.03.2013, 21:47
To wyżej jest oddzielnie, bo zazwyczaj kod CSS3 umieszcza się w osobnym, specjalnie stworzonym arkuszu (css3.css), ale możesz kod dodać normalnie do global.css, albo lepiej – przekopiować atrybuty do obecnej klasy bitbutton, czyli:

Kod:
.bitbutton {
    display: block;
    margin: 3px 2px;
    background-image:url(images/otkau/button_bg.png);
    padding: 2px 10px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.bitbutton:link, .bitbutton:visited {
    color: #fff;
}

.bitbutton:hover, .bitbutton:active {
    background-position: 0px -30px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}
Webboard > Wsparcie MyBB > Style, szablony i grafika > Ustawienie położenia buttonów