Extrem TutorialsConectare

Peste 500 tutoriale in limba romana.


Tema noua pe Extrem Tutorials

Salutare tuturor,

Dupa cum puteti observa, am efectuat schimbari semnificative asupra interfetei grafice a forumului Extrem Tutorials. De aceasta data am optat pentru un design simplu, rapid si de bun gust. Tema in momentul de fata nu a fost optimizata la maxim, in acest moment se incarca in fix 3 secunde, confirm [Trebuie sa fiti inscris si conectat pentru a vedea acest link] ,...

Cereri intrare in staff[Deschise]

Salutare tuturor,

Extrem Tutorials a redeschis cererile pentru aderarea in echipa, persoanele care doresc sa ocupe pozitia de Moderator sau Graphic Designer trebuie sa indeplineasca conditiile de mai jos:

Conditii de indeplinit

1. Acest topic este adresat exclusiv persoanelor care nu au mai facut parte din echipa acestui forum, ca urmare persoanele care au mai facut parte din staff, sunt rugate sa ma contacteze...

Schimbare cursor mouse

Pentru a schimba cursorul mouse-ului este necesar adagarea urmatorului cod in foaia de stil css.

Cod:

body {cursor: url (URL_CURSOR1);} a {cursor: url (URL_CURSOR2);}


Inlocuiti URL_CURSOR1 si URL_CURSOR2 cu link-ul direct catre cursor.

Pentru a adauga intr-o pagina html adaugati codul de mai sus in tagurile .

Site-uri ce contin cursoare aveti aici:

[Trebuie...

Proprietatea css background

Bun gasit,
In acest tutorial o sa va prezint ce este "background" si cum se foloseste propietatile lui.

Propietatile backgroundului sunt:

Cod:

background-color
background-image
background-repeat
background-attachment
background-position



Da incepem cu background-color:
1.Background-color este cum se vede dupa nume un background pe baza unei colori
Sa dam un exemplu:

Cod:

body{
background-color:...

Personalizare clase pentru phpBB3

În acest tutorial puteţi găsii câteva clase elementare pentru versiune phpBB3. Dvs. puteţi le puteţi folosii şi personaliza:

Personalizarea conturului forumului:

Cu contur normal:

Cod:

#wrap{
border: 1px solid #culoare;
border-radius: 5px;}

Cu contur punctat:

Cod:

#wrap{
border: 1px dashed #culoare;
border-radius: 5px;}


Personalizarea background-ului din interiorul forumului:

Cum sa schimbi culoarea unui text atunci cand il selectezi !

Buna tuturor !
Astazi am sa va arat cum puteti sa schimbati culoarea unui text cand il selectati (de ex: il selectati pentru copy)
Imaigne de exemplu: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
» Asa va arata la final,desigur daca dvs. veti dori alta culoare va arata altcumva.

» Adaugati urmatorul...

Rotirea avatarului la plasarea cursorului peste el

Salutare prieteni,

In tutorialul de astazi am sa va arat cum puteti personaliza avatarele in asa fel incat, in momentul cand plasati cursorul pe acestea sa se roteasca 360 grade.

Pentru inceput intrati in:
P.A. ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS ~> iar de aici depinde de versiunea forumului dumneavoastra.

Phpbb2 :

Cod:

      .poster-profile img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
          ...

Cum puteti seta opacitatea la avatare (toate versiunile)

Salutare tuturor,

In tutorialul de astazi am sa va arat cum puteti seta o opacitate pentru avatarele forumului dvs. Tot ce trebuie sa faceti este sa adaugati codul specific versiunii forumului tau in P.A ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil css

Phpbb3, Invision

Cod:


.postprofile dl dt a img {
 opacity: 0.6;
 -moz-transition-property: opacity;
 -moz-transition-duration: 0.6s;
 -webkit-transition-property: opacity;
 -webkit-transition-duration:...

Border avatar

Descriere:
Cu ajutorul acestui tutorial veti putea pune un border la avatar.
Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS 2620290309 Atentie: Acest cod este functionabil doar pe forumurile cu versiunea phpbb2 !


Pasul nr:1
Pentru inceput trebuie sa adaugam codul urmator in CSS.
Panou...

Tagul "Code" Personalizat

Salut. În acest mic tutorial am de gând să vă explic cum puteţi personaliza tagurile CODE cu ajutorul codurilor CSS simplu şi uşor.Acest tutorial este compatibil doar pentru versiunea phpbb2.

Demonstraţie: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Pasul 1. Mergem în:
Panou de administrare > Afişare > Imagini şi culori > Culori > Foaie...

[Tutorial] Bara de navigare web html/css

Sunt nou in domeniul Tutorialelor dar m-am decis sa ma pun sa fac multe pe partea de web programming, va rog sa imi scuzati gafele Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS 827527 este primul meu tutorial Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS 109884 oricum sper sa va ajute.



CSS - Icon inaintea numelui


Codul este

Cod:

a[href="/Link profil"] strong {
background: url(IMAGINE) left no-repeat;
padding-left: 12px;}

Trebuie sa liecare user sa puneti acest cod in CSS...
Niste imagini...:
Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS 13114611
Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS 13114612

Adaugarea unui chenar la titlul rangului

Bun gasit,

In tutorialul de astazi am sa va arat cum puteti adauga un chenar rangurilor de pe forumul dvs. Acest tutorial se aplica pentru toate versiunile, deci haideti sa incepem.
Demonstratie:
Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS Aaaaaaaaaaaaaaaa

Cod:

.tech {
    background: url("http://i43.servimg.com/u/f43/14/73/12/96/highli11.png") repeat-x scroll 0px 0px rgb(70, 88, 78);
    border: 1px solid rgb(58, 74, 64);
    border-radius:...

[Phpbb2]Border-radius la toate avatarele forumului

Descriere:
Daca doresti ca toate avatarele de din topicele forumului tau sa fie rotunde nu trebuie decat sa uremezi passi de mai jos.

Pasul nr:1
Pentru inceput trebuie sa adaugam codul urmator in CSS.
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS

Menu with CSS3

Salut, Vizitator in acest tutorial am sa iti prezint meniul Menu with CSS3, acest nuniu este un meniu foarte dreagut care ne permite sa navigam mult mai repede pe pe forumul ,siteul, blogul nostru.Este foarte usor de instalat daca veti urma atent pasi de instalare.


Demonstratie:

Slick CSS3 Button cu box-shadow & rgba

TUTORIAL


1. Mai întâi de toate exista o simplă legătură cu o clasă de buton.Vom folosi clasa class="button_unique"
In paginile HTML sau mesaje va veti folosi de codul:

Cod:

<a class="button_unique" href="#">Continut..</a>


2. Acum codul CSS, care "va pune in functiune" butonul dvs.

Warning box pentru anunturi

Salutare prieteni,  Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS 109884 

Am creat niste tabele pentru anunturile de pe forumurile dvs. Tot ce trebuie sa faceti este sa urmati pasii de mai jos.

Pentru inceput adaugati in css:

P.A ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil css

Cod:

.warnbox {
min-height: 60px;
background: url(https://cdn4.iconfinder.com/data/icons/gnome-desktop-icons-png/PNG/64/Gnome-Dialog-Error-64.png) left no-repeat;

3 meniuri simple cu ajutorul CSS-ului

Salut sunt mr.franta si astazi v-am pregatit un meniu simplu si foarte atragator,asta fiind parerea mea cel putin.
Dificultatea acestui meniu este foarte redusa pot sa spun ca este chiar simplu.
Previzualizare live [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Previzualizare live 2
[Trebuie sa fiti inscris...

Paginarea Sistem nou PunBB

Salut,sunt mr.franta si in acest tutorial va voi ajuta sa personalizati paginarea fara a fi nevoie de a modifica template-urile simplu si usor cu ajutorul CSS-ului.
Pentru a putea vizualiza codurile CSS va rog sa raspundeti la subiect din minim  cuvinte din respect pentru munca
Previzualizare
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

1.Personalizare...

Efect de scoci la balizele BBCode [code][/code]

Salutare prieteni,
In minutele urmatoare am sa va arat cum puteti adauga un efect tip scoci la tagurile code. Mai jos aveti o previzualizare pentru a vedea despre ce este vorba.
Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS Test11

Pentru realizarea acestui efect adaugati urmatorul cod in:
Panou de administrare ~> Afisare ~> Culori ~> Imagini si culori ~> Foaie de stil css

Cod:

dl.codebox{
    margin: 20px auto;
    width: 720px;
    min-height:...

Personalizarea widget-urilor forumului

Salutare prieteni,

In tutorialul de astazi am sa va arat cum puteti personaliza widget-urile forumului cu ajutorul css-ului. Tot ce trebuie sa faceti este sa urmati pasii de mai jos.

Uitati un exemplu pentru a va da seama despre ce este vorba:
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Acum ca stiti despre ce este...

Adaugarea unui meniu miscator cu ajutorul css-ului

Salutare tuturor,

In tutorialul de astazi am sa va arat cum puteti adauga un meniu miscator pe forumurile voastre. O demonstratie pentru a vedea despre ce este vorba aveti mai jos.


Adaugati urmatorul cod in Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS

Cod:

#menu-css li {
 display: inline;
 list-style:...

Aplicarea unui gradient ( fara imagine ) cu ajutorul css-ului

Sa stii Vizitator ca aplicarea unui gradient ca fundal la un tabel sau o pagina web nu este functionala pe orice browser de internet, asa ca am cautat cat am putut de bine pe internet si am gasit coduri diferite pentru browsere diferite.
Mai jos Vizitator ai 3 browsere diferite, Mozilla FireFox, Internet Explorer si Safari, iar alaturi de ele ai cod-ul pentru gradientul care v-a fi vizibil pe acel browser.

Esti gata sa incepem Vizitator ? Bun atunci sa-i dam bice.

Inainte de toate tin sa-ti atrag...

Un meniu css3 afisat in partea stanga a paginii

Menu with CSS3

Salut, Vizitator in acest tutorial am sa iti prezint meniul Menu with CSS3, acest nuniu este un meniu foarte dreagut  care ne permite sa navigam mult mai repede pe pe forumul ,siteul, blogul nostru.Este foarte usor de instalat daca veti urma atent pasi de instalare.

Demonstratie:[Trebuie sa fiti inscris...

Meniu albastru afisat pe verticala

Bun gasit,

In tutorialul de astazi am sa va arat cum puteti adauga un meniu vertical pe forumul dvs. Tot ce trebuie sa faceti este sa urmatii pasii de mai jos.


Demonstratie:

Demonstratie:
Instalare:

1. CSS
Adaugati codul urmator in CSS:

Panoul de administrare in meniu de Navigare (phpBB3)

Salutare tuturor,

Astazi am sa va arat cum puteti pune panoul de administrare in bara de linkuri (" meniu ").

Demonstratie pHpBB3:
Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS Header11

Intrati in Panoul de control > Module > HTML & JAVASCRIPT > Gestiunea codurilor JavaScript > Coduri JavaScript > Creaza un nou cod JavaScript.
Titlu: Admin
Amplsare: All Pages ( Toate Paginile )
Cod JS:

Cod:


/*

Mutare coloana "ultimele mesaje"

Salutare tuturor,
In tutorialul de astazi am sa va arat cum puteti muta coloana utlimele subiecte in fata celor cu subiecte si replici. Acest tutorial consta in adaugarea unui singur cod in css si se aplica pentru versiunea phpbb3.

Cod:

ul.topiclist dd {
border-left: 1px solid white;
display: block;
float: right;
padding: 4px 0;
}



O previzualizare pentru phpbb3:
[Trebuie sa fiti înscris...

Legenda in chenar (phpbb3)

Salutare,

In tutorialul de astazi am sa va arat cum puteti adaga grupurile din legenda intr-un chenar elegant. Acest tutorial necesita adaugarea unui singur cod in css si se aplica doar pentru forumurile phpBB.

Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS Dsadasdasdas

Adaugati in CSS:

Cod:

em b {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #C7C7C7;
border-radius: 3px 3px 3px 3px;
font-style: normal;
left: 820px;
margin: 0 auto;

Adaugare parteneri in tabel [punbb si phpbb2]

Buna ziua,  Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS 4111689092 

In tutorialul de astazi am sa va arat cum puteti adauga partenerii intr-un tabel.

Pentru inceput trebuie sa adaugati in CSS:
P.A~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil css

Cod:

#parte {
list-style: none;
float: left;
font-family: 'Play';
font-size: 14px;
text-align: center;
color: #777;
background: #F9F9F9;
width: 88px !important;
text-shadow:...

Rotirea avatarului la pozitionarea cursorului pe acesta

In acest tutorial am sa va prezint cum puteti face ca avatarul sa se roteasca la 360 de grade pentru toate versiunile. Este un tutorial simplu, dar care are un aspect frumos daca este aplicat de forumul tau.

Pentru forumurile forumgratuit:
Spoiler :
PhpBB2:

Cod:

.poster-profile img{
    -webkit-transition: all 1.0s ease-out;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
}

Aspect nou al profilului in interiorul topicului

Salutare,
M-am gandit sa fac un nou aspect pentru versiunea Invision la profilul din interiorul topicului.

Mergem in PA ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS si adaugam:

Cod:

.postprofile img {
border: 1px solid #DDD;
background-color: #EFEFEF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 5px;
margin-top: 5px;
}
.chenar{
border: 1px solid #DDD;
background-color: #EFEFEF;
-webkit-border-radius:...

Meniu asemanator cu sexy drop down menu pe prosilver si phpbb3

Acum puteti avea pe forumurile proprii un meniu asemanator cu meniul sexy drop down menu. Compatibil cu forumurile phpbb3 (forumgratuit) si prosilver pe (forumurile PhpBB).

Prosilver (PhpBB):
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

Cod:


.headerbar...

Meniu Vertical CSS pentru Widget sau template

[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Acest cod se poate adauga intr-un widget sau o pagina html
Codul meniului :

Cod:

<html>
<head>
<title>Meniu de linkuri cu css – tutorial</title>

<style type="text/css">
#meniu...

Utilizarea gradientului pentru forum

Salut de carand am invatat sa folosesc gradient.multi nu stiu ce este asa ca am sa va spun chiar eu pe scurt.
Gradientul este un fundal colorat care poate fi folosit ca o imagine
Intrati aici si personalizati-va colorile preferate,ele vor inlocui imaginile care ingreuneaza forumul

[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

un...

Personalizarea link-ului atunci cand avem un mesaj nou

Salutare tuturor,

In tutorialul de astazi am sa va arat cum puteti adauga o culoare pentru a evidentia link-ul atunci cand aveti un mesaj nou in INBOX.

Adaugati urmatorul cod in:
Panou de Administrare > Afişare > Imagini si culori >  Culori > Foaia de stil CSS:

Cod:


span.new-message {
  color: orange !important;
  background: url(http://i.imgur.com/EYFX8.png) no-repeat center;
}

Inlocuiti "orange" cu culoarea dorita.

Si ai reusit.  

Casuta de cautare personalizata [Phpbb3]

Cu cateva proprietati css simple am reusit sa fac o bara de cautare care sa nu semene cu nici un forum de pe aceasta platforma. Nu a fost deloc greu, mai exact a fost foarte simplu.
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

Cod:


#search-box #keywords {
padding: 5px;
border-radius...

Banner mişcător pentru toate versiunile.

Salutare tuturor,
Probabil că aţi văzut pe unele forumuri.. atunci când pui cursorul peste imaginea tip logo aceasta se mişcă.
Toate codurile de mai jos se pun in foaia de stil css !

Invision:

Cod:

div#logostrip #logo {
-moz-transition-duration: 1.5s;
-webkit-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
}
div#logostrip:hover #logo:hover {
margin-left:100px;
}


phpBB3:

Cod:

#logo-desc {

Hover la link-uri mai lent

Buna ziua!
In acest mic tutorial am sa va arat cum puteti sa incetiniti hoverul link-urilor forumurilor. Hover este atunci cand plasati cursorul peste un link.
COD:

Cod:

a:link {
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;}


Ce este colorat poate fi modificat:
a:link {
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;

Logo in coltul forumului

Descriere : Un foarte scurt tutorial , care va ajuta sa pozitionati un logo in coltul forumului dvs. [ Vezi in HD ]




Video :






Cod :

Cod:

 <img...

Aplicarea unui border asupra butoanelor BBCode


..
Salut Vizitator , in acest mic tutorial am sa te imvat cum poti personaliza butoanele BBCode,bun dic.... sa nu mai stam la varba si sa trecem direct la treaba.


Prima Etapa.
Cel de jos este codul css cu ajutorul caruia vom putea peronaliza butoanele BBCode.

Cod:

button.button2, input.button2{
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;}

Efect de tranzitie a unei imagini

Codul este unul simplu, dar cu un efect foarte frumos Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS 230108
Demo: http://demonstratii.wikiforum.ro/

Cod:


.clasa {
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 0%;-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
height: 180px;}

clasa:hover {
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position:...

Efect tranzitie la linkuri

Demo: http://demonstratii.wikiforum.ro/
Pentru a creea un efect de tranzitie la linkuri folosim codul CSS urmator:

Cod:


a:link, a:visited, a:active {
color: #Culoare1;
outline: none;
text-decoration: none;
transition-property: border, color;
transition-duration: .25s;
-o-transition-property: border, color;
-o-transition-duration: .25s;
-webkit-transition-property: border, color;
-webkit-transition-duration: .25s;
-moz-transition-property: border,...

Personalizeaza-ti cursorul

Acest cod este pentru orice site, el poate fi adaugat in foaia de stil css (style.css).

Acesta este un cursor schimbator cand pozitionezi cursoru pe un link.

Pentru mai multe cursoare cautati pe Google cu cuvintele urmatoare "Cursor" si "Cursor Mouse"

Cod:

body{cursor: url(http://i66.servimg.com/u/f66/11/96/49/61/arrow11.png), progress;}

a:hover, a {cursor: url(http://i66.servimg.com/u/f66/11/96/49/61/hand11.png), progress;}

Iconite sociale cu ajutorul CSS-ului

Previzualizare: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Cod:

<style>
html{
height:100%;
margin:0;
min-height:100%;
padding:0;
width:100%;}


#container{
width:100%;
height:100%;
background:-moz-linear-gradient(center...

Interiorul categoriilor punctate

Cod:

li.row {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:1px dashed #BEBEBE;
}

.forums .row {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:1px dashed #BEBEBE;
}

Prescurtare cod pentru a schimba forma unui text

In acest tutorial am sa va arat cum se poate modifica culoarea textului,marimea,fontul cu un cod scurt si usor de retinut.

Exemplu cod prescurtat:

Cod:

<div class="nume_clasa">CONTINUT</div>



Vom crea codul css si pe urma va fi functional codul nostru.
Dati numele clasei dupa proprile preferinte:

Cod:

.nume_clasa {

Vizitator poti sai dai ce nume vrei de exemplu .text_generalitati {.

La cest cod vom adauga marimea...

Border la avatar

Salut, Vizitator in acest tutorial am sa te invat cum poti pune un border de avatar.


1.


Panou de administrare>Afisare> Template-uri > General > viewtopic_body > iar in template-ul viewtopic_body cautati codul acesta:{postrow.displayed.POSTER_AVATAR} si inlocuitil cu acesta:

HTML...

Rotire banner[phpbb2]

Cod:

    #i_logo {
    padding: 5px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;

Border Meniu

Buna seara!
Azi va voi prezenta cum sa faceti un border la meniu.
Aveti nevoie doar de un cod css:
1.CSS:

Cod:

.navlinks li:hover{
      border: 1px dashed #000;;
      padding: 2px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;}

Miscare logo din partea stanga in partea dreapta

Pentru cei care nu stiu prea bine css, am extras din tema lui [Trebuie sa fiti inscris si conectat pentru a vedea acest link] de pe Hitskin acest efect dragut de miscare al bannerului.

Phpbb3 & Invision:

Cod:

#logo {
  float: left;
  -webkit-transition-duration:...

[phpbb3] Imagine panou de administrare

Cu acest cod puteti adauga o imagine in loc de panou de administrare. *Doar pentru versiunea phpbb3.
Demonstratie: Extrem Tutorials - Peste 500 tutoriale in limba romana - CSS YXOH9

Instalare: P.A. > Afisare > Culori > Foaia de stil css.

Cod:

#page-footer .copyright strong a{
position: fixed;
top: 10px;
left: 20px;
background-image:url('http://cdn1.iconfinder.com/data/icons/discovery/32x32/status/important.png');
width: 65px;
height: 32px;
background-repeat:no-repeat;
background-position:left...

Logo hover

Salutare tuturor

Astazi am sa va prezint cum puteti sa schimbati banerul la hover cu mici propietati CSS.

Codul este cam asa:

Cod:

#logo {
 background: url(Link banner 1);
}

#logo:hover {
background: url(Link banner 2);
 }


Inlocuiti 'Link banner 1' cu link-ul bannerului care sa apara la inceput si 'Link banner 2' cu link-ul bannerului care sa apara la plasarea cursorului pe primul banner, adica la hover.

Sper ca...
 mark_chat_read 
Moderatori

Nici unul

Permisiunile acestui forum:

Nu puteti posta subiecte noi in acest forum
Nu puteti raspunde la subiectele acestui forum