Skocz do zawartości

Plugin Notatki Moderatorów (Moderator Notes) IP Board 4


EgZeKuToR
 Udostępnij

Rekomendowane odpowiedzi

Wiem o tej opcji już ją znalazlem od razu przez zbadaj element, ale chodzi o to ze chce miec trzy mozliwosci... zielone, żółte i czerwone notatki... ale do tego musze miec 3 x kod CSS i tu jest probolem bo jak próbowałem zrobic sam to mi nie czyta tego mimo ze zmianiam dla innego koloru kod HTML. o ile ktoś rozumie co mowie:D:D

Odnośnik do komentarza
Udostępnij na innych stronach

@EgZeKuToR trzymaj:

<div class='sticky-note1'><div class="sticky-note-tape1"></div><div class="sticky-note-content1">{option}<div class="sticky-note-footer1"></div></div></div>

css:

Spoiler

.sticky-note1 {
	max-width: 500px;
	padding: 20px;
	line-height: 1.75em;
	margin: 0 auto;
	margin-top: 25px !important;
	font-family: 'Coming Soon', 'Architects Daughter', cursive;
	background: #fbf1ac url('YOURURL/notecorner.jpg') 100% 100% no-repeat;
	position: relative;
}

.sticky-note1 .sticky-note-content1 {
	overflow: hidden;
}

.sticky-note1 .sticky-note-footer1 {
	height: 50px;
	width: 50px;
	float: right;
}

.sticky-note1 .sticky-note-tape1 {
	background-color: hsla(0,0%,100%,.5);
	box-shadow: inset 0 0 1em .5em hsla(0,0%,100%,.1);
	height: 3em;
	position: absolute;
	transform: rotate(-4deg);
	width: 9em;
	-webkit-filter: drop-shadow(0 1px 1px hsla(0,0%,0%,.3));
	top: -1.5em;
	left: 50%;
	margin-left: -4.5em;
}
	.sticky-note1 .sticky-note-tape1:after,
	.sticky-note1 .sticky-note-tape1:before {
		background-size: .4em .4em;
		bottom: 0;
		content: '';
		position: absolute;
		top: 0;
		width: .2em;
	}
		.sticky-note1 .sticky-note-tape1:after {
			background-image: linear-gradient(45deg, transparent 50%, hsla(0,0%,100%,.3) 50%),
							  linear-gradient(-45deg, transparent 50%, hsla(0,0%,100%,.3) 50%);
			background-position: 0 100%;
			left: -.2em;
		}
		.sticky-note1 .sticky-note-tape1:before {
			background-image: linear-gradient(135deg, transparent 50%, hsla(0,0%,100%,.3) 50%),
							  linear-gradient(-135deg, transparent 50%, hsla(0,0%,100%,.3) 50%);
			background-position: 100% 100%;
			right: -.2em;
		}

 

Tutaj masz czerwony. jak chcesz zmienic na inny kolor zmieniasz tutaj:

background: #fbf1ac url('YOURURL/notecorner.jpg') 100% 100% no-repeat;

i wszedzie zmien 1 na inna cyfre w pierwszym kodzie html i w css.

Przez photoshopa zmien sobie kolor ikony na inny kolor zeby w pasu narzedi nie miał 3 żółtych ☺️

Odnośnik do komentarza
Udostępnij na innych stronach

  • 9 miesięcy temu...

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×