Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!


Data/ora curentă este: Mar Mai 28, 2024 6:58 pm

16 rezultate gasite pentru culoare

Culoare "chat" topic.

Vizitati: Panoul de administrare ~ Afisare ~ Culori ~ Foaia de stil CSS si adaugati:
Cod:
.sceditor-container.ltr.sourceMode {
background-color: #culoare !important;
}


Inlocuiti #culoare cu un cod hexadecimal (ex: #000000 - negru; #FFFFFF - alb, s.a.m.d) sau denumirea unei culori (red, green, s.a.m.d.).
Scris de Zachary
la data de Mar Iun 02, 2015 6:14 pm
 
Cauta in: Arhiva scripturi/coduri
Subiect: Culoare "chat" topic.
Raspunsuri: 5
Vizualizari: 556

Detaliile unui profil intr-un pop-up

Detaliile unui profil intr-un pop-up

Salutare tuturor,

In acest tutorial am sa va arat cum puteti obtine un pop-up spre detaliile utilizatorilor atunci cand faceti click pe nume. Acest tutorial se aplica pentru toate versiunile, deci haideti sa incepem.

Demonstratie:
Tag culoare pe Forum gratuit: forum de suport al utilizatorilor - Pagina 2 Demo11

Tag culoare pe Forum gratuit: forum de suport al utilizatorilor - Pagina 2 096151758391. Activarea profilului avansat
Pentru ca acest script sa functioneze trebuie ca profilul avansat sa fie activat pe forumul dvs. Daca utilizati acest tutorial fara profilul avansat, s-ar putea sa apara cateva buguri.

Activarea profilului avansat se face intrand in:
Tag culoare pe Forum gratuit: forum de suport al utilizatorilor - Pagina 2 Go-jum10Panoul de Administrare~> Utilizatori & Grupuri ~> Utilizatori ~> Profiluri ~> Optiuni generale

Activare profil avansat: Da

In cazul in care este deja bifata, omiteti acest pas. Daca nu, bifati si apasati pe inregistrare.
Tag culoare pe Forum gratuit: forum de suport al utilizatorilor - Pagina 2 Advanc11

Tag culoare pe Forum gratuit: forum de suport al utilizatorilor - Pagina 2 096151758392. Instalarea scriptului

Adaugati urmatorul cod in:
Tag culoare pe Forum gratuit: forum de suport al utilizatorilor - Pagina 2 Go-jum10P.A ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor javascript ~> Creati un nou javascript

Nume: Profil
Amplasare: Toate paginile
Codul Javascript:
Cod:
jQuery(function () {
    jQuery('li.row a[href*="/u"], .img-whois+p a[href*="/u"], .page-bottom a[href*="/u"], .postprofile a[href*="/u"], p.author a[href*="/u"], form:has(.vf_jumpbox)~a[href*="/u"], .tcr a[href*="/u"], #stats a[href*="/u"], #onlinelist a[href*="/u"], .tcl.tdtopics a[href*="/u"], .pun .user a[href*="/u"], .ipbtable .row1 a[href*="/u"], #fo_stat a[href*="/u"], .activeusers-box a[href*="/u"], td.row3.over a[href*="/u"], .forumline:has(#i_whosonline) a[href*="/u"], span.name a[href*="/u"], span.postdetails a[href*="/u"], #info_open a[href*="/u"]').attr('id', 'profilePopup').click(function(){return false});
    jQuery('a[href*="/u"]:has(img)').removeAttr('id').click( function(){window.open(jQuery(this).attr('href'),'_self');});
    jQuery('a#profilePopup').click(function(){
    var UID = jQuery(this).attr('href');
    var UNM = jQuery(this).text();
    jQuery('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div>
<div id="profcont-container" style="background:#ffffff;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;z-index:50;">
 <div id="userprofile" style="max-height:400px;overflow-y:auto;">
 <center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Se incarca...<br/><br/></span>
 </center>
 </div><br/><style type="text/css">#profileLinks a{background: #f1f1f1;padding: 5px;border: 1px solid #d7d7d7;text-decoration: none;color: #222;  margin-left: 4px;font-weight: bold;font-size: 11px;box-shadow:inset 1px 1px 1px white, 1px 1px 1px #d7d7d7;}</style><span id="profileLinks"><a href="'+UID+'">Vizualizare profil</a><span id="interactionLinks">  <a href="/privmsg?mode=post&u='+UID.replace('/u', '')+'">Trimite un mesaj privat</a>  <a href="/privmsg?mode=post_profile&u='+UID.replace('/u', '')+'">Posteaza in profilul utilizatorului</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/ /, "+")+'&mode=editprofile&page_profil=friendsfoes">Adauga ca prieten</a></span><br/><br/></span></div>');
    jQuery('#userprofile').load(UID + '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details');
    if (!document.getElementById('logout')){jQuery('#interactionLinks').remove();}
    jQuery('#profilefilter').click(function () {jQuery('#profilefilter, #profcont-container').remove();});
    });
});


Pentru cei care doresc sa editeze aspectul popup-ului, voi expica in detaliu ce clase va trebui sa utilizati.

#profilefilter - Schimbarea culorii de fundal
Cod:
#profilefilter {
background: #culoare !important;
}


.profileLoading - Schimbarea stilului pentru textul "Se incarca..."
Cod:
.profileLoading {
background: #culoare !important;
font-size: 16px !important;
}


#profileLinks a - Schimbarea culorii link-urilor din subsol
Cod:
#profileLinks a{
color: #culoare !important
}


Inlocuiti #culoare cu culoarea dorita.

Si asta a fost tot!  Noroc

Tutorial realizat de Zeus, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Scris de Zeus
la data de Vin Mar 07, 2014 8:13 pm
 
Cauta in: Tutoriale
Subiect: Detaliile unui profil intr-un pop-up
Raspunsuri: 0
Vizualizari: 4078

CSS - Ce este si cum functioneaza?

CSS - Ce este si cum functioneaza?

Bun gasit! Foarte fericit

Sageată In acest tutorial ne propunem sa facem o introducere despre CSS si foaia de stil.

I. Introducere despre CSS

Sageată CSS este un limbaj de calculator folosit pentru a personaliza redarea grafica a paginilor web. Acest limbaj ofera o multime de beneficii pentru paginile web si actualmente este suportat de orice browser modern.
CSS este acronim cu Cascading Style Sheets, iar in limba romana se poate traduce - Foaie de stil CSS.

II. Functionarea codurilor

Sageată Scrierea unui cod CSS se incepe printr-un selector. Cele mai folositi selectori in CSS sunt clasele, id-urile si elementele in sine. Pentru a indica browser-ului ca selectorul este o clasa vom scrie denumirea clasei cu un punct "." inainte; pentru id cu "#"; iar pentru element - nu vom scrie decat denumirea elementului.
- Exemple pentru clase: .bodyline, .forumline (phpBB2), .post, .postbody (toate versiunile);
- Exemplu pentru id: #wrap (phpBB3), #page-body (toate versiunile);
- Exemplu pentru element: div, body, table (toate versiunile).
In HTML acestea vor fi reprezentate dupa cum urmeaza:
- Pentru clase:
Cod:
<div class="clasa">Continut</div>

- Pentru id:
Cod:
<div id="identificator">Continut</div>

- Pentru element:
Cod:
<div>Continut</div>

Exclamare Id-ul nu trebuie sa se repete intr-o pagina web. Asadar, daca doriti sa atribuiti mai multe id-uri elementelor acestea trebuie sa fie diferite.

Sa presupunem ca avem deja acele coduri in pagina noastra si ca dorim sa le personalizam aspectul prin CSS. Vom adauga in foaia de stil CSS:
Cod:
div{
background-color: blue;
}

.clasa{
background-color: yellow;
}

#identificator{
background-color: red;
}

In acest exemplu am personalizat culoarea de fundal prin proprietatea background-color.

Putem adauga si o pagina CSS externa. Se foloseste acest cod in interiorul tag-ului :
Cod:
<link rel="stylesheet" type="text/css" href="foaiameadestil.css" />

Unde foaiameadestil.css reprezinta link-ul catre pagina CSS.

Daca dorim sa adaugam codurile direct in pagina HTML, folosim:
Cod:
<style type="text/css">
div{
background-color: blue;
}

.clasa{
background-color: yellow;
}

#identificator{
background-color: red;
}
</style>


Dupa cum puteti observa, codurile CSS sunt introduse intre doua acolade "{" si "}" si proprietatile sunt separate prin punct si virgula ";". Selectorii insa sunt adaugati inainte de deschiderea acoladei "{".

Puteti adauga si un comentariu pe langa coduri, care nu vor influenta in nici un fel aspectul paginii. Comentariul se adauga in acest fel:
Cod:
/* Comentariul meu aici */


III. Balizele rudimentare

  • Pentru text:
    - personalizare culoare:
    Cod:
    selector{
    color: #culoare;
    }

    #culoare - exemple de culori

    - alinierea textului:
    Cod:
    selector{
    text-align: parte;
    }

    parte - left (stanga) | center (centru) | right (dreapta)

    - schimbarea font-ului:
    Cod:
    selector{
    font-family: titlu;
    }

    titlu - exemple font-uri

    - marime text:
    Cod:
    selector{
    font-size: Xpx;
    }

    X - dimensiunea in pixeli a textului

    - subliniere text:
    Cod:
    selector{
    text-decoration: tip;
    }

    tip - none (nimic) | underline (subliniat) | overline (subliniat deasupra) | line-through (taiat)

    - text cursiv:
    Cod:
    selector{
    font-style: italic;
    }


    - text ingrosat:
    Cod:
    selector{
    font-weight: bold;
    }




  • Pentru obiecte:
    - culoare de fundal:
    Cod:
    selector{
    background-color: #culoare;
    }

    #culoare - exemple de culori

    - imagine de fundal:
    Cod:
    selector{
    background-image: url(link);
    }

    link - adresa URL catre imaginea de fundal

    - chenar:
    Cod:
    selector{
    border: Xpx tip #culoare;
    }

    X - grosimea in pixeli a chenarului
    tip - solid (obisnuit) | dotted (punctat) | dashed (liniar-intrerupt) etc.
    #culoare - exemple de culori

    - spatiu interior:
    Cod:
    selector{
    padding: Xpx;
    }

    sau:
    Cod:
    selector{
    padding-left: Xpx;
    padding-right: Xpx;
    padding-top: Xpx;
    padding-bottom: Xpx;
    }

    X - spatiu in pixeli gol in interiorul elementului HTML

    - spatiu exterior:
    Cod:
    selector{
    margin: Xpx;
    }

    sau:
    Cod:
    selector{
    margin-left: Xpx;
    margin-right: Xpx;
    margin-top: Xpx;
    margin-bottom: Xpx;
    }

    X - spatiu liber in pixeli intre elemente HTML

    - inaltime si latime:
    Cod:
    selector{
    height: Xpx;
    width: Xpx;
    }

    X - dimensiunea in pixeli


IV. Adaugarea codurilor
Forumgratuit.ro va pune la dispozitie foaia de stil CSS, cu ajutorul careia puteti adauga propriile coduri CSS. Puteti insera codurile chiar in foaia de stil, si acestea vor fi functionabile pe orice pagina de forum; sau le puteti adauga intr-o pagina HTML daca aveti nevoie.

Va reamintim ca foaia de stil se afla in:
Tag culoare pe Forum gratuit: forum de suport al utilizatorilor - Pagina 2 Go-jum10Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS




Tutorial realizat de Cassius Dio, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit

Scris de Cassius Dio
la data de Dum Mai 12, 2013 10:12 am
 
Cauta in: Tutoriale
Subiect: CSS - Ce este si cum functioneaza?
Raspunsuri: 0
Vizualizari: 5374

Culori diferite pentru topicurile speciale

Culori diferite pentru topicurile speciale

Bun gasit! Foarte fericit

Cu ajutorul acestui tutorial puteti adauga o culoare de fundal diferita pentru celulele ce contin topic-uri speciale, precum cele care au o anumita iconita (rezolvat, in progres etc.) sau cele care sunt blocate, au atins pragul de topic popular dar si altele.

Tutorialul este disponibil pentru toate versiunile de forum.

Sageată 1. Aplicarea codurilor JavaScript:
Intai de toate, vizitati:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript

Faceti click pe butonul Creati un nou cod JavaScript.

Completati rubricile astfel:

  • Titlu: Fundal pentru topic-uri speciale
  • Amplasare: Subforumuri
  • Cod JavaScript: In functie de versiunea forumului...

phpBB2, PunBB si Invision:
Cod:
$(document).ready(function() {
/* Adaugarea unei clase pentru celulele cu anunt */
$('img[src="Link imagine anunt"]').closest('tr').addClass('annonce');
/* Adaugarea unei clase pentru celulele cu post-it */
$('img[src="Link imagine post-it"]').closest('tr').addClass('post-it');
});

phpBB3:
Cod:
$(document).ready(function() {
/* Adaugarea unei clase pentru celulele cu anunt */
$("dl.icon[style*='Link imagine anunt']").addClass("annonce");
/* Adaugarea unei clase pentru celulele cu post-it */
$("dl.icon[style*='Link imagine post-it']").addClass("post-it");
});


Modificarile necesare:
In cadrul codurilor de mai sus, trebuie sa adaugati link-urile catre imaginile necesare:
- Link imagine anunt : adresa URL catre imaginea de anunt;
- Link imagine post-it : adresa URL catre imaginea post-it.

Dupa ce ati efectuat modificarile necesare, faceti click pe butonul Valideaza.

Sageată 2. Aplicarea codurilor CSS:
Vizitati:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS

Adaugati, in functie de versiunea de forum pe care o folositi, urmatoarele coduri...
phpBB2, PunBB si Invision:
Cod:
/* Modificarea culorii pentru celulele cu anunt */
tr.annonce td {
background-color: #culoare !important;
}

/* Modificarea culorii pentru celulele cu post-it */
tr.post-it td {
background-color: #culoare !important;
}


phpBB3:
Cod:
/* Modificarea culorii pentru celulele cu anunt */
dl.annonce {
background-color: #culoare;
}

/* Modificarea culorii pentru celulele cu post-it */
dl.post-it {
background-color: #culoare;
}/


Modificarile necesare:
In cadrul codurilor de mai sus, trebuie sa adaugati culorile dorite pentru topic-urile speciale. Asadar, inlocuiti #culoare cu un cod sau nume de culoare HTML. Puteti folosi si aceasta lista:
https://help.forumgratuit.ro/t15-coduri-culori

3. Aplicarea codurilor de mai sus si pentru alte tipuri de topic-uri:
Cum spuneam si mai sus, puteti folosi acest tutorial nu numai pentru topic-urile de tip anunt si post-it, ci si pentru cele care au iconite gen rezolvat, in progres etc, dar si pentru anunturile globale, topic-urile cu statutul "popular".

Codurile JavaScript ar arata, in functie de versiunea forumului pe care o folositi, aproximativ ca cele de mai jos...
phpBB2, PunBB, Invision:
Cod:
$(document).ready(function() {
/* Adaugarea unei clase pentru celulele cu iconita "rezolvat" */
$('img[src="Link imagine rezolvat"]').closest('tr').addClass('resolu');
/* Adaugarea unei clase pentru celulele cu iconita "in progres" */
$('img[src="Link imagine in progres"]').closest('tr').addClass('progress');
});

phpBB3:
Cod:
$(document).ready(function() {
/* Adaugarea unei clase pentru celulele cu iconita "rezolvat" */
$("dd.dterm[style*='Link imagine rezolvat']").closest("dl.icon").addClass("resolu");
/* Adaugarea unei clase pentru celulele cu iconita "in progres" */
$("dd.dterm[style*='Link imagine in progres']").closest("dl.icon").addClass("progress");
});


Exclamare Pentru versiunea phpBB3: Codul phpBB3 de mai sus este valid numai pentru iconitele pentru mesaje (rezolvat, in progres etc). Daca doriti sa il folositi pentru cele blocate sau care au atins pragul de topic popular codul pe care trebuie sa il folositi este exact ca si cel de la pasul 1, cel CSS respectiv de la pasul 2. Tot ce trebuie sa modificati din el este numele clasei atribuite si adresa URL a imaginii.

Codurile CSS ar arata, in functie de versiunea forumului cam asa...
phpBB2, PunBB si Invision:
Cod:
/* Modificarea culorii pentru celulele cu anunt */
tr.resolu td {
background-color: #culoare !important;
}

/* Modificarea culorii pentru celulele cu post-it */
tr.progress td {
background-color: #culoare !important;
}


phpBB3:
Cod:
/* Modificarea culorii pentru celulele cu anunt */
dl.resolu {
background-color: #culoare;
}

/* Modificarea culorii pentru celulele cu post-it */
dl.progress {
background-color: #culoare;
}/


Modificarile necesare:
Atat pentru codurile JavaScript cat si pentru cele CSS modificarile pe care trebuie sa le efectuati corespund cu cele de la pasul 1 si 2. Atentie la editarea codurilor!


Tutorial realizat de Cassius Dio, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Scris de Cassius Dio
la data de Lun Mar 25, 2013 5:53 pm
 
Cauta in: Tutoriale
Subiect: Culori diferite pentru topicurile speciale
Raspunsuri: 0
Vizualizari: 6152

Sus

Pagina 2 din 2 • Înapoi  1, 2

Mergi direct la: