Casute quote,code,spoiler & hide ca pe forumgratuit

Cum as putea sa am si eu pe forumul meu, asemenea forumului de suport casutele "quote, code, spoiler si ascuns"?

Poate asta vă ajută. https://help.forumgratuit.ro/t50126-#351725

Codul acesta unde sa fie adaugat?

Cod:

dl.codebox {
  padding: 4px;
  background: #fff;
  border: 1px solid blue;
  border-left-width: 3px;
}
dl.codebox dd,
dl.codebox .spoiler_content {
  border: 0;
  background: transparent;
}

În foaia de stil CSS.
(PA > Afisare > Culori > Foaie de stil CSS)

adaugate, dar nu se vede deloc asa.
conturul este albastru si textul pe galben

Păi puteți să le personalizați cum doriți, modificați la border: 1px solid #369FCF; culoarea cu oricare doriți pentru chenar, iar la color: black; culoarea textului, cu coduri hex https://help.forumgratuit.ro/t15-coduri-culori

Mai jos aveți ceva cât de cât asemănător cu cea de pe suport.

Cod:

dl.codebox {
  padding: 4px;
  background: #fff;
  border: 1px solid #369FCF;
  border-left-width: 3px;
}
dl.codebox dd,
dl.codebox .spoiler_content {
  border: 0;
  background: transparent;
  color: black;
}

ok, si cum pot adauga acele imagini in stanga chenarului?

Navigați în PA > Module > Gestiunea codurilor javascript > Creati un nou cod javascript, Amplasare : Topicuri:

Cod:

$(function(){
  $(".genmed:contains('Cod:')").addClass("boxtitle codetitle");
  $(".genmed:contains('Citat :')").addClass("boxtitle quotetitle");
  $(".genmed:contains('a scris:')").addClass("boxtitle quotetitle");
});

Iar în CSS, pe lângă codul de mai sus, mai adăugați

Cod:


.boxtitle::before,
.spoiler dt::before {
  content: '';
  color: transparent;
  padding: 1px 9px;
  background-repeat: no-repeat;
}
.codetitle::before {
  background-image: url(https://cdn3.iconfinder.com/data/icons/fatcow/16x16_0640/page_white_code.png);
}
.quotetitle::before {
  background-image: url(https://cdn0.iconfinder.com/data/icons/fatcow/16/document_quote.png);
}
.spoiler dt::before {
  background-image:url(https://cdn3.iconfinder.com/data/icons/fatcow/16/page_white_put.png);


Modiciați link-urile imaginilor cu ce imagini doriți, de 16px.

adaugat, insa nu mi se vad si icon-urile.

Doar într-un mesaj postat funcționează acele iconuri, nu și în previzualizarea lor. Încercați să postați un mesaj pe forum cu acele căsuțe, și dacă nu merge puneți aici link-ul către mesajul respectiv.

Multumesc Cosmin. Merg acum!

Cu plăcere.