Attenzione

[SuperPunkMario]

Attenzione

Autore: SuperPunkMario
Descrizione: é un bbcode che serve per richiamare l'attenzione per un'informazione importante o per altre cose

Note: le immagini sono inserite con un hosting (imageshack) in modo da rendere facile inserire il bbcode

Uso BBcode:

Codice: Seleziona tutto

[attenzione]{TEXT}[/attenzione]

Trasforma in HTML:

Codice: Seleziona tutto

<img src="http://img443.imageshack.us/img443/2076/attenzioneowu.png">
<div style="margin-bottom: 10px; background: #FF0033; padding: 6px; height:auto; border: 4px solid #000000; border-radius: 6px; border-radius: 6px; border-radius: 6px;"><p align="center" ><img src="http://img88.imageshack.us/img88/4056/statusdialogerroricon.png" ></p><div><align="left" style="font-size: 150%" ><b>{TEXT}</b></div></div>

Guida in linea:

Codice: Seleziona tutto

Attenzione: [attenzione]Testo[/attenzione]

Anteprima BBcode:
http://imageshack.us/photo/my-images/819/bbcodea.png/

Demo (link esterno)

[Tiger]

Da problemi con IE?
Perche' -moz-border-radius: 6px; -webkit-border-radius
Non e' ben digerito da ie.....

[Lady R]

non c'è bisogno di usare le classi -moz e -webkit per border-radius, ormai si può usare direttamente "border-radius" senza prefisso.

Internet Explorer supporta border-radius dalla versione 10

[SuperPunkMario]

ho provato con IE, il carattere diventa più piccolo, temo che si un problema proprio delle impostazione del browser, hai qualche consiglio? grazie

EDIT: ok modifico il codice

[Lady R]

common.css

Codice: Seleziona tutto

.bbalert div {
	background: url(http://imagise.allise.net/b/stripe55e52b04.png) repeat;
	width: 100%;
	border-radius: 8px;
	border-top: 1px solid #FFF700;
	margin: -2px 8px 8px 8px;
	min-height: 60px;
	padding: 5px;
}

.bbalert div img {
	float: left;
	margin: 5px 7px 0px 7px;

}

.bbalert div p {
	font-family: Ubuntu;
	background: #000;
	opacity: 0.8;
	margin: 5px 5px 5px 80px;
	min-height: 50px;
	border-radius: 3px;
	font-weight: bold;
	color: #FFF;
}

HTML del BBcode:

Codice: Seleziona tutto

<div class="bbalert">
<img src="http://imagise.allise.net/b/bbattenzione.png">
<div><img src="http://imagise.allise.net/b/bbattenziofrf.png" /><p>{TEXT}</p></div>
</div>

Anteprima:

[Tiger]

Lady.R se ce lo sistemi x benino magari con l'immagine allegata da inserire lo usiamo subito^^

[Lady R]

ci son già le immagini, di quali altre hai bisogno?

[Tiger]

^^,vero pardon

[vcardie]

common.css

Codice: Seleziona tutto

.bbalert div {
	background: url(http://imagise.allise.net/b/stripe55e52b04.png) repeat;
	width: 100%;
	border-radius: 8px;
	border-top: 1px solid #FFF700;
	margin: -2px 8px 8px 8px;
	min-height: 60px;
	padding: 5px;
}

.bbalert div img {
	float: left;
	margin: 5px 7px 0px 7px;

}

.bbalert div p {
	font-family: Ubuntu;
	background: #000;
	opacity: 0.8;
	margin: 5px 5px 5px 80px;
	min-height: 50px;
	border-radius: 3px;
	font-weight: bold;
	color: #FFF;
}

HTML del BBcode:

Codice: Seleziona tutto

<div class="bbalert">
<img src="http://imagise.allise.net/b/bbattenzione.png">
<div><img src="http://imagise.allise.net/b/bbattenziofrf.png" /><p>{TEXT}</p></div>
</div>

Anteprima:

non ho capito come usarlo.
se inserisco il bbcode mi viene vuoii solo un trinangolo con la scretta attenzione in alto.
e evidente che manca l inserimento dell html. ma come lo gestisco? grazie

[Lady R]

devi inserire questo:

Codice: Seleziona tutto

.bbalert div {
   background: url(http://imagise.allise.net/b/stripe55e52b04.png) repeat;
   width: 100%;
   border-radius: 8px;
   border-top: 1px solid #FFF700;
   margin: -2px 8px 8px 8px;
   min-height: 60px;
   padding: 5px;
}

.bbalert div img {
   float: left;
   margin: 5px 7px 0px 7px;

}

.bbalert div p {
   font-family: Ubuntu;
   background: #000;
   opacity: 0.8;
   margin: 5px 5px 5px 80px;
   min-height: 50px;
   border-radius: 3px;
   font-weight: bold;
   color: #FFF;
}

in common.css del tuo style.

poi il bbcode è così:

BBcode:
[attenzione]{TEXT}[/attenzione]

html:

Codice: Seleziona tutto

<div class="bbalert">
<img src="http://imagise.allise.net/b/bbattenzione.png">
<div><img src="http://imagise.allise.net/b/bbattenziofrf.png" /><p>{TEXT}</p></div>
</div>