Kolumna VIP / Premium w panelu bocznym. Invision Community.

[Don Makil]

Witam, poszukuje takiej wtyczki jeżeli takowa istnieje w panelu bocznym:

[DarkSoul]

Możesz to zrobić za pomocą tego pluginu: TXT & PHP Widget - Blocks and Widgets - Invision Community

[MGS]

Witam, jak zrobić taką nakładkę w róg jak ma użytkownik Premium na Pecetowicz? Chodzi mi że taka nakładka jest na zdjęciu w tle na profilu. 

[aXenDev]

Warunkami w motywie na przykład.

[exot]

Tak jak napisał axen albo wtyczka (WK) Marks

[aXenDev]

To nie jest wtyczka. To tekst z formatowaniem CSS, który został wrzucony w widget.

[Saiken]

<div style="position: relative; padding: 8px; border-radius: 4px; ">
	<div class="wk_Mark"><span class="wk_MarkBackground7">VIP</span></div>
	<center><h2 style="position: relative; TEXT-ALIGN: center; font-size: 22px; font-weight: 400; color: #fff; margin: 10px 0px;">VIP <i class="fa fa-star"></i></h2></center>
	<center><p style="font-size: 13px; color: #fff;">Wyróżnij swój profil. To możliwe tylko dzięki uprawnieniom vipa!</p></center>
	
	<ul class="list" style="color: #b5b5b5; list-style: none; font-size: 13px; padding: 0;">
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
		<li class="list_item" style="padding-left: 15px; margin-bottom: 5px;"><i class="fa fa-check-circle"></i> Przywilej</li>
	</ul>
	<hr class="ipsHr">
	<a href="Link do informacji o vipie" class="ipsButton ipsButton_primary ipsButton_fullWidth"><i class="fa fa-info-circle"></i> Więcej informacji</a>
</div>

w miejscu przywilej wstawiasz co otrzyma użytkownik. 

potrzebujesz do tego wtyczki : 

@ciastekkk

/edit i wtyczkę wk-mark jeśli jej nie posiadasz pisz pw :)

/edit 2 @ciastekkk Tak wygląda demo przynajmniej u mnie na forum

 

@aXenDev™ Mogłeś napisać koledze, 10 min roboty

Edytowane 13 Maja 2020 przez Saiken

[aXenDev]

58 minut temu, Saiken napisał:

@aXenDev™ Mogłeś napisać koledze, 10 min roboty

Patrząc na Twój kod to tak. 10 min roboty kopiuj, wklej. Każdy tak umie.

Kod masz napisany bardzo chaotycznie i wygląda to jak mieszanka gotowych kodów z netu albo co gorsza kopia HTML z funkcji "Zbadaj element".

[Saiken]

4 minuty temu, aXenDev™ napisał:

Patrząc na Twój kod to tak. 10 min roboty kopiuj, wklej. Każdy tak umie.

Kod masz napisany bardzo chaotycznie i wygląda to jak mieszanka gotowych kodów z netu albo co gorsza kopia HTML z funkcji "Zbadaj element".

Uczę się, kod co prawda jest bardzo chaotyczny.

Edytowane 13 Maja 2020 przez Saiken

[aXenDev]

Mam obowiązek poprawić błędy i uczyć prawidłowych technik więc przerobiłem to tak, aby było prawidłowe. Też nudziłem się na zajęciach

 

HTML:

<div class='ipsPad_half'>
    <div class="aXen_Badge">
        <span>VIP</span>
    </div>
    <div class='ipsType_center'>
  	    <h3 class="ipsType_large">VIP <i class="fa fa-star"></i></h3>
  	    <span class="ipsType_light">Wyróżnij swój profil i pozbądź się wszelkich ograniczeń i limitów. To możliwe tylko dzięki uprawnieniom vipa!</span>
    </div>
  
    <ul class="ipsPad_half ipsType_light ipsForm">
        <li><i class="fa fa-check-circle"></i> Przywilej</li>
        <li><i class="fa fa-check-circle"></i> Przywilej</li>
        <li><i class="fa fa-check-circle"></i> Przywilej</li>
    </ul>

	<hr class="ipsHr">
	<a href="#" class="ipsButton ipsButton_primary ipsButton_fullWidth"><i class="fa fa-info-circle"></i> Więcej informacji</a>
</div>

 

CSS:

.aXen_Badge {
    position: absolute;
    width: 75px;
    height: 75px;
    left: -5px;
    top: -5px;
    overflow: hidden;
    z-index: 1;
}
  
.aXen_Badge span {
    background: red;
	font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    width: 100px;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    left: -21px;
    transform: rotate(-45deg);
}
  
.aXen_Badge span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    z-index: -1;
    border-right: 3px solid red;
    border-bottom: 3px solid red;
}
  
.aXen_Badge span:after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    z-index: -1;
    border-left: 3px solid red;
    border-bottom: 3px solid red;
}

 

Edytowane 13 Maja 2020 przez aXenDev™