Oficjalne forum pomocy serwisu PUN.pl

Niestety, nikt nie powie Ci czym jest FluxBB - musisz go poznać sam!

Nie jesteś zalogowany na forum.

#1 2013-07-27 18:56:14

xn
Użytkownik
Dołączył: 2010-08-09
Liczba postów: 455

[CSS] Ikony przycisków/linków

Używając FontAwesome stworzyłem modyfikację, dodającą ikonki przy przyciskach/linkach na forum:

Oto jak to wygląda:

UEfrvDS.jpg

qQvloLJ.png

1. Uprzejmie proszę o wklejenie do stopki widocznego linku, byłoby miło [sred]) :

<a href="http://stadolwiejziemi.pun.pl/">Forum o Królu Lwie</a>

2. Wklej na SAMYM POCZĄTKU modyfikacji css:

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

3. Wklej w dowolne miejsce modyfikacji css:

/* -- IKONY pun by Nit -- */
a:before {
    font-family: FontAwesome;
    font-size: 14px;
    margin-right: 0.3em;
    font-weight: normal;
}
.postreport a:before {
    content: "\f071";
}
.postdelete a:before {
    content: "\f057";
}
.postedit a:before {
    content: "\f044";
}
.postquote a[href^="post.php"]:before, .postquote a[href^="poll.php"]:before {
    content: "\f10d";
}

.usercontacts a[href^="mailto"]:before {
    content: "\f0e0";
}
.usercontacts a[href^="http"]:last-child:before {
    content: "\f0c1";
}
.usercontacts a[href^="message_send.php?id="]:before {
    content: "\f003";
}

.postlink.conr a[href^="post.php?fid"]:before {
    content: "\f0f6";
}

.postlink.conr a[href^="poll.php?fid"]:before {
    content: "\f0ae";
}

.cb_user .cb_muteuser:before {
    content: "\f0c4";
    float: right;
}

.cb_wlacz:before {
    content: "\f028";
}

.cb_wylacz:before {
    content: "\f026";
    margin-left: 1em;
}

#punwrap > div:not(#punchatbox):not(#punforums) .cb_wlacz, #punwrap > div:not(#punchatbox):not(#punforums) .cb_wylacz {
    display: none;
}

.postquote a[href^="movepost"]:before {
    content: "\f045";
}

.postlink.conr a[href^="post.php?tid="]:before, .postlink.conr a[href^="poll.php?tid="]:before  {
    content: "\f122";
}
.subscribelink a:before {
    content: "\f006";
}

a[href^="viewprintable.php"]:before {
    content: "\f02f";
}

#brdwelcome .conl li:first-child:before {
    content: "\f05a";
    font-family: FontAwesome;
    padding: 2px;
}
#brdwelcome .conl li:nth-child(2):not(:last-child):before {
    content: "\f017";
    font-family: FontAwesome;
    padding: 2px;
}

#bbcode {
    font-family: FontAwesome;
}

#modcontrols dd {
    display: inline !important;
    padding-right: 3em;
}
#modcontrols a:before {
    display: inline-block;
    padding: 1px;
}
#modcontrols a[href*="open"]:before {
    content: "\f09c";
}
#modcontrols a[href*="tid"]:before {
    content: "\f014";
}
#modcontrols a[href*="close"]:before {
    content: "\f023";
}
#modcontrols a[href*="stick"]:before {
    content: "\F08D";
}
#modcontrols a[href*="move_topic"]:before {
    content: "\F061";
}

#punviewforum a[href^="moderate.php?fid="]:before {
    content: "\f14b";
}

/* pw */
div#punmessage_list div.postfootright a[href^="message_send.php?id="]:before {
    content: "\f112";
}
div#punmessage_list div.postfootright a[href*="quote"]:before {
    content: "\f10e";
}
div#punmessage_list div.postfootright a[href^="message_delete.php?id="]:before {
    content: "\f00d";
}

div#punmessage_list .postlink a[href="message_send.php"]:before {
    content: "\f003";
}

/* admin ikony */
#adminmenu a:before {
    display: inline-block;
    min-width: 1em;
}
a[href="admin_loader.php?plugin=AP_PunPortal.php"]:before {
    content: "\f0db";
}
a[href="admin_loader.php?plugin=AP_Dodatkowe_strony.php"]:before {
    content: "\f016";
}
#adminmenu a[href="admin_forums.php"]:before {
    content: "\f00b";
}
#adminmenu a[href="admin_categories.php"]:before {
    content: "\f022";
}
#adminmenu a[href="http://www.demo.pun.pl"]:before {
    content: "\f0c3";
}
#adminmenu a[href="admin_censoring.php"]:before {
    content: "\f0a1";
}
a[href="admin_loader.php?plugin=AP_Dodatkowe_pola.php"]:before {
    content: "\f0c9";
}
a[href="admin_loader.php?plugin=AP_Forum_Ranks.php"]:before {
    content: "\f023";
}
#adminmenu a[href="admin_permissions.php"]:before {
    content: "\f046";
}
#adminmenu a[href="admin_bans.php"]:before {
    content: "\f0e3";
}
#adminmenu a[href="admin_prune.php"]:before {
    content: "\f017";
}
#adminmenu a[href="admin_ranks.php"]:before {
    content: "\f160";
}
a[href="admin_loader.php?plugin=AMP_Globalny_temat.php"]:before {
    content: "\f0ac";
}
a[href="admin_loader.php?plugin=AP_Emotikony.php"]:before {
    content: "\f118";
}
#adminmenu a[href="admin_index.php"]:before {
    content: "\f015";
}
a[href="admin_reports.php"]:before {
    content: "\f071";
}
a[href="admin_loader.php?plugin=AP_ChatBox.php"]:before {
    content: "\f086";
}
a[href="admin_loader.php?plugin=AP_Forum_cleanup.php"]:before {
    content: "\f12d";
}
a[href="admin_loader.php?plugin=AP_Pamietnik.php"]:before {
    content: "\f02d";
}
#adminmenu a[href="admin_users.php"]:before {
    content: "\f007";
}
#adminmenu a[href="admin_groups.php"]:before, a[href="admin_loader.php?plugin=AP_Lista_znajomych.php"]:before {
    content: "\f0c0";
}
a[href="admin_loader.php?plugin=AP_User_management.php"]:before {
    content: "\f183";
}
a[href="admin_loader.php?plugin=AP_Jezyki_oraz_style.php"]:before {
    content: "\f024";
}
#adminmenu a[href="admin_options.php"]:before {
    content: "\f085";
}
#adminmenu a[href="http://www.pun.pl/forum.php"]:before {
    content: "\f059";
}
a[href="admin_loader.php?plugin=AP_Pozwolenia_HTML.php"]:before {
    content: "\f121";
}
a[href="admin_loader.php?plugin=AP_Galeria_kategorie.php"]:before, a[href="admin_loader.php?plugin=AP_Galeria_opcje.php"]:before {
    content: "\f03e";
}
a[href="admin_loader.php?plugin=AP_Wiadomosc_powitalna.php"]:before, a[href="admin_loader.php?plugin=AP_Prywatne_wiadomosci.php"]:before {
    content: "\f003";
}
a[href="admin_loader.php?plugin=AP_Globalny_email.php"]:before {
    content: "\f0e0";
}
a[href="admin_loader.php?plugin=AP_Reputacja.php"]:before {
    content: "\f116";
}

#punadmin .blockform, #adminmenu ~ .box, #adminmenu ~ .block {margin-left: 18em;}
div#adminmenu {width: 17em;}

Ostatnio edytowany przez xn (2013-08-16 20:33:04)

Offline

#2 2013-07-27 20:46:23

pro14ab
Moderator
Skąd: C:\users\pro14ab
Dołączył: 2013-01-20
Liczba postów: 1,198
WWW

Odp: [CSS] Ikony przycisków/linków

Już nad takim kodem myślałem ale wyprzedziłeś mnie.


Discord: pro14ab#3318
>> GitHub <<
Polecam

Offline

#3 2013-07-27 21:27:45

xn
Użytkownik
Dołączył: 2010-08-09
Liczba postów: 455

Odp: [CSS] Ikony przycisków/linków

Hehe. [sred])
Kod jeszcze pewnie będzie dopracowywany. Jeśli ktoś chce dodać coś od siebie (np. ikonki brdmenu) - śmiało, niech dodaje kolejne. [sred])

Offline

#4 2013-07-27 21:45:27

Morty
Użytkownik
Dołączył: 2008-12-12
Liczba postów: 1,599

Odp: [CSS] Ikony przycisków/linków

CZŁOWIEKU! Świetna robota [dblpt]D
Rzecz jak najbardziej przydatna, łatwiej będzie rozróżniać chociażby tą masę linków w panelu administracyjnym, a także forum staje się ładniejsze.
Pozdrawiam.


Również Hiraki

Offline

#5 2013-07-28 14:41:07

xn
Użytkownik
Dołączył: 2010-08-09
Liczba postów: 455

Odp: [CSS] Ikony przycisków/linków

Nie ma za co. [sred])

Żeby ułatwić tworzenie kolejnych ikonek:
http://fortawesome.github.io/Font-Awesome/cheatsheet/
To jest zapis HTML.

Jednakże aby ułatwić wam sprawę stworzyłem tabelę dla CSS:
http://www.stadolwiejziemi.pun.pl/page.php?id=15425

W JS zapis różni się początkiem (oczywiście nie ma tam content, ale też zamiast np. "\f0b2" jest "\uf0b2". [sred])

Offline

#6 2013-08-16 17:59:31

Dares
Użytkownik
Skąd: Łomża
Dołączył: 2012-04-14
Liczba postów: 1,551
WWW

Odp: [CSS] Ikony przycisków/linków

Odświeżam na prośbę autora


img.php?type=sig&player_id=568895

Offline

#7 2013-08-16 20:33:30

xn
Użytkownik
Dołączył: 2010-08-09
Liczba postów: 455

Odp: [CSS] Ikony przycisków/linków

Zaktualizowałem ikonki (m.in. PW) w pierwszym poście. Usuńcie stary i wklejcie nowy kod. [sred])

Ostatnio edytowany przez xn (2013-08-16 20:33:44)

Offline

#8 2013-08-18 23:18:47

blurey
Użytkownik
Dołączył: 2010-11-13
Liczba postów: 58

Odp: [CSS] Ikony przycisków/linków

Nie wiem co tu mozna zle zrobic kopiujac link ale u mnie niestety nie działa.

@Edit
Juz naprawilem, jeden z kodow z css gryzł sie z tym i musialem go wywalic [sred])
Swietny mod thx.

Ostatnio edytowany przez blurey (2013-08-18 23:51:30)

Offline

Użytkowników czytających ten temat: 0, gości: 1
[Bot] claudebot

Stopka

Forum oparte na FluxBB

Darmowe Forum
akwatuberzy - protetyk - myrp - hunter-org - chicagobigcity