Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Stan konta w profilu i widoku posta

Szukam  Założony przez  maniek1523.

05.08.2017, 22:07
#1
Witam, czy jest możliwość zrobienia czegoś takiego jak tutaj na forum pecetowicz:
   
Chodzi mi o tą przepaskę "PREMIUM". Wiem, że jest to na podstawie statusu online/offline, ale czy może mi ktoś rozpisać lub dać link do poradnika, gdzie byłoby opisane jak mogę zrobić coś takiego w widoku posta i profilu użytkownika, ale dla każdej grupy? Np. dla grupy użytkownicy "UŻYTKOWNIK", dla moderatorów "MODERATOR" itd itd...?
06.08.2017, 00:41 (Ten post był ostatnio modyfikowany: 06.08.2017, 00:42 przez Poftorek.)
#2
Dobra, zrobiłem to dla Ciebie.

Szablon postbit_userstar:
<div class="ribbon-ips"><span>{$post['starimage']}</span></div>

Szablon postbit_classic - {$post['userstars']} pod <div class="post_author scaleimages">
<div class="post_author scaleimages">{$post['userstars']}

Arkusz zakladka.css:
.ribbon-ips {
position: absolute;
left: -4px;
top: -6px;
z-index: 99999999999;
overflow: hidden;
width: 80px;
height: 80px;
text-align: right;

}
.ribbon-ips span::after {
content: "";
position: absolute;
right: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #47a3d1;
border-bottom: 3px solid transparent;
border-top: 3px solid #47a3d1;
}


.ribbon-ips span{
font-size: 11px;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 25px;
transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
width: 100px;
display: block;
background: #47a3d1;
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px;
left: -21px;
text-transform: uppercase;
}

.ribbon-ips span:before {
content: "";
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #47a3d1;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #47a3d1;
}
.post .post_author {
padding: 1em;
overflow: initial !important;
}
.post_author {
position: relative;
}

Działanie:
W ACP - Grupy - Grupa
a) jeśli ma mieć zakładkę, ustawiasz 1 gwiazdkę a jako ścieżkę do obrazka gwiazdki podajesz tytuł, np. PREMIUM;
b) jeśli nie ma mieć zakładki, ustawiasz 0 gwiazdek i puste pole obok;
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.08.2017, 00:44
#3
@"Fyeem"
Ok, tyle że już koloru innego jak niebieski zakładce nie nadasz... :D
06.08.2017, 00:52 (Ten post był ostatnio modyfikowany: 06.08.2017, 00:53 przez Poftorek.)
#4
Ja nie nadam? Haha..
Dodaj takie klasy do CSS:
.ribbon_4 span {
background: red!important
}
.ribbon_4 span::after {
border-right: 3px solid red!important;
border-top: 3px solid red!important;
}
.ribbon_4 span:before {
border-left: 3px solid red!important;
border-top: 3px solid red!important;
}

A szablon postbit_userstar zamień na:
<div class="ribbon-ips ribbon_{$post['usergroup']}"><span>{$post['starimage']}</span></div>

Działanie:
4 - ID grupy, która ma mieć oddzielne kolory, w celu nadania innym grupom, zmieniasz 4 na id innej grupy, oczywiście kolory podmieniasz.
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.08.2017, 13:12
#5
@"Fyeem"
Prawie do niczego nie można się przyczepić. Jedyne co, to do klas ribbon-ips span::after i ribbon-ips span::before. Do każdej zakładki będzie nadawało niebieskie tła :P
06.08.2017, 13:19 (Ten post był ostatnio modyfikowany: 06.08.2017, 13:19 przez Poftorek.)
#6
(06.08.2017, 13:12)maniek1523 napisał(a): @"Fyeem"
Prawie do niczego nie można się przyczepić. Jedyne co, to do klas ribbon-ips span::after i ribbon-ips span::before. Do każdej zakładki będzie nadawało niebieskie tła :P

Cieszę się, przecież te kolory można zmodyfikować dla poszczególnych grup (patrz kod CSS wyżej, 2 ostatnie klasy).
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.08.2017, 13:20
#7
Dobra, ok to śmiga. Ale coś albo źle dodałem, albo jest nie tak. Zobacz... Wszystko się... ehm :P
06.08.2017, 13:26
#8
Namieszałeś w szablonie postbit_classic, widziałem jakiś komentarz, zostawiłeś zamknięcie jakiegoś diva, przez co zbyt wcześnie (po takim długim komentarzu) zamykasz tego diva <div class="post_author scaleimages">. Usuń </div> zaraz po tym komentarzu:
<!--<img src="WŁAŚCICIEL" border="0" alt="*" /><br />
<div class="author_information">
<strong><span class="largetext"><a href="http://forum-kawiarenka.cba.pl/member.php?action=profile&amp;uid=1"><span style="color: red;"><strong>MaariusH</strong></span></a></span></strong><br />
<span class="smalltext">
<!--&lt;span class=&quot;ranga ranga_czerwona&quot;&gt; Główny Administrator &lt;/span&gt;-->
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.08.2017, 13:31
#9
@"Fyeem"
Chyba prawie, ale nie do końca... Usunąłem </div> po tym spanie (w tym pustym wierszu) i dałem na sam koniec:
{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade} post_{$post['usergroup']}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="post_author scaleimages">
{$post['userstars']}
<div class="author_information">
<strong><span class="largetext">{$post['profilelink']}</span></strong><br />
<span class="smalltext">
<!--{$post['usertitle']}-->
</span>

{$post['useravatar']}
<center>
{$post['groupimage']}
</center>
<div class="author_statistics">
{$post['newpoints_postbit']}
{$post['user_details']}{$post['myachievements_postbit']}{$post['reputationlevel']}
</div>
</div>
<div class="post_content">
<div class="post_head">
{$post['posturl']}
{$post['icon']}
<span class="post_date"><i class="fa fa-clock-o fa_xtra pd"></i>{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}"> {$post['editedmsg']}</span></span>
{$post['subject_extra']}
</div>
<div class="post_body scaleimages" id="pid_{$post['pid']}">
{$post['message']}
</div>
{$post['xem_fast_rep']}
    {$post['attachments']}
{$post['signature']}
<div class="post_meta" id="post_meta_{$post['pid']}">
{$post['iplogged']}
</div>
</div><div class="post_controls">
<span class="float_left" style="padding-left: 3px; padding-top: 7px; display: inline-block;">{$post['onlinestatus']}</span>
<div class="postbit_buttons author_buttons float_left">
{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
</div>
<div class="postbit_buttons 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>
</div>
</div>
    </div>
Ale nie ma nicków i wygląd posta użytkownika bez gwiazdki zepsuty
06.08.2017, 13:44
#10
Niepotrzebnie zamknąłeś diva z informacjami autora na samym końcu, spróbuj tak:
{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade} post_{$post['usergroup']}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="post_author scaleimages">
{$post['userstars']}
<div class="author_information">
<strong><span class="largetext">{$post['profilelink']}</span></strong><br />
<span class="smalltext">
<!--{$post['usertitle']}-->
</span>

{$post['useravatar']}
<center>
{$post['groupimage']}
</center>
<div class="author_statistics">
{$post['newpoints_postbit']}
{$post['user_details']}{$post['myachievements_postbit']}{$post['reputationlevel']}
</div>
</div></div>
<div class="post_content">
<div class="post_head">
{$post['posturl']}
{$post['icon']}
<span class="post_date"><i class="fa fa-clock-o fa_xtra pd"></i>{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}"> {$post['editedmsg']}</span></span>
{$post['subject_extra']}
</div>
<div class="post_body scaleimages" id="pid_{$post['pid']}">
{$post['message']}
</div>
{$post['xem_fast_rep']}
{$post['attachments']}
{$post['signature']}
<div class="post_meta" id="post_meta_{$post['pid']}">
{$post['iplogged']}
</div>
</div><div class="post_controls">
<span class="float_left" style="padding-left: 3px; padding-top: 7px; display: inline-block;">{$post['onlinestatus']}</span>
<div class="postbit_buttons author_buttons float_left">
{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
</div>
<div class="postbit_buttons 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>
</div>

</div>
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.08.2017, 13:49
#11
http://forum-kawiarenka.cba.pl/showthrea...129#pid129
Z postem użytkownika bez gwiazdki wszystko ok. Ale pozostałe nadal zepsute :[
06.08.2017, 13:51
#12
Pomieszałeś coś z kodem.. przywróć domyślny szablon i dodaj w nim to, co potrzebne, nie mam jak zdiagnozować błędu.
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.08.2017, 13:55
#13
Jak usunę zmienną na gwiazdki, to wszystko jest w porządku... Ehh, nie wiem o co już chodzi...
06.08.2017, 14:00
#14
W dobrym miejscu jest ta zmienna?
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.08.2017, 14:09
#15
@"Fyeem" 
Dodałem nad zmienną avatara i śmiga. Tylko jak się przesuwa stronę, to zakładka zamiast znikać to nachodzi na górne menu użytkownika. Właściwie to chyba ostatnia poprawka kosmetyczna, jaką trzeba by zrobić. A tak to już działa bez zarzutów :D
   
Jeszcze tylko będę kombinował nad wyświetleniem tego w profilu, ale spróbuję sam. Chyba że będę miał jakieś problemy to zrobię osobny temat. :P
06.08.2017, 14:10
#16
Dla ribbon-ips zmień z-index na wartość 1.
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08



Użytkownicy przeglądający ten wątek:

2 gości