Plasarea iconitei-status peste iconita unei sectiuni (toate versiunile)

Scris de **Mihai** Mar Oct 13, 2020 1:28 am

Plasarea iconitei-status peste iconita unei sectiuni (toate versiunile)

Salutare tuturor,

In tutorialul de astazi am sa va arat cum puteti adauga icon status peste iconul sectiuniilor forumurilor dvs. Acest tutorial se aplica pentru forumurile phpBB3. Acum ca am lamurit, haideti sa incepem.

Demonstratie:

1. Intrati in: P.A ~> Afisare ~> Imagini si culoir ~> Administrare imagini ~> Iconuri forum
Inlocuiti imaginile actuale cu:
Categorie: https://2img.net/i/fa/prosilver/forum_read_category.gif
Categorie - Nou: https://2img.net/i/fa/prosilver/forum_unread_category.gif
Categorie - Blocat: https://2img.net/i/fa/prosilver/forum_read_category_locked.gif
Forum: https://2img.net/i/fa/prosilver/forum_read.gif
Forum - Nou: https://2img.net/i/fa/prosilver/forum_unread.gif
Forum - Blocat: https://2img.net/i/fa/prosilver/forum_read_locked.gif

2. Adaugati urmatorul cod in: P.A ~> Module ~> HTML&JAVASCRIPT ~> Gestiunea codurilor javascript ~> Creati un nou javascript

$(function() {
$('dl.icon[style*="https://2img.net/i/fa/prosilver/forum_read.gif"], dl.icon[style*="https://2img.net/i/fa/prosilver/forum_read_category.gif"]').addClass('faramesaje').css('background','transparent');
$('.faramesaje dd div h3').before('

https://i.servimg.com/u/f58/18/57/87/79/no10.png" />

');

$('dl.icon[style*="https://2img.net/i/fa/prosilver/forum_unread_category.gif"], dl.icon[style*="https://2img.net/i/fa/prosilver/forum_unread.gif"]').addClass('forumblocat').css('background','transparent');
$('.forumblocat dd div h3').before('

https://i.servimg.com/u/f58/18/57/87/79/iconst10.png" />

');

$('dl.icon[style*="https://2img.net/i/fa/prosilver/forum_read_category_locked.gif"], dl.icon[style*="https://2img.net/i/fa/prosilver/forum_read_locked.gif"]').addClass('mesajenoi').css('background','transparent');
$('.mesajenoi dd div h3').before('

https://i.servimg.com/u/f58/18/57/87/79/lock10.png" />

');
});

Textul ingrosat de mai sus reprezinta adresa URL a imaginilor care vor fi afisate.
https://i.servimg.com/u/f58/18/57/87/79/no10.png
https://i.servimg.com/u/f58/18/57/87/79/iconst10.png
https://i.servimg.com/u/f58/18/57/87/79/lock10.png
Acestea pot fi oricand inlocuite cu alte imagini, conditia ar fi ca imaginile sa nu depaseasca dimensiunea de 32x32 pixeli.

3. Adaugati urmatorul cod in: P.A ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS

Cod:: .faramesaje h3 + br + img { margin-left: -45px; margin-top: -10px; } .iconita { position: relative; float: left; margin-top: 15px; margin-left: -45px; }

Pentru alinierea corecta a iconului, inlocuiti in codul de mai sus valorile 15px si -45px cu valori mai mici sau mai mari.

Si asta a fost tot! Noroc