prosilver aliniat la stanga

Inca de cand a aparut versiunea beta a phpbb3, prosilver a revolutionat complet modul in care aratau si se comportau temele bazate pe arhitectura acestuia. Trebuie sa recunosc ca eu o consider o tema foarte bine realizata. Pe langa multe alte lipsuri pe care as fi dorit sa le vad macar in versiunea finala a phpbb3 se numara si o optiune cu ajutorul caruia sa poti comuta aliniamentul posturilor intr-un thread. Cu totii stiti ca informatiile legate de profil, by default in prosilver se afla in partea dreapta (lucru care pe mine nu ma deranjeaza foarte tare insa se pare ca pe uni da). Am observat ca multa lume se plange de acest lucru si m-am gandit ca le-ar prinde bine o solutie. Asadar putin mai jos sunt cativa pasi pe care va invit sa-i urmati daca doriti sa schimbati acest “inconvenient” la tema prosilver.

  1. Incepem cu imaginea “online”. Dupa ce am aplicat cateva rotatii am obtinut icon_user_online.gif Acum va trebui sa incarcam imaginea in urmatorul director: styles/prosilver/imageset/en/
  2. Urmatorul pas consta in editarea fisierul content.css localizat in styles/prosilver/theme/. Mai exact vom localiza clasa .postbody care ar trebui sa arate cam asa:
    3. 1
2
3
4
5
6

          color: #333333;
      line-height: 1.48em;
      padding: 0;
      width: 76%;
      float: left;
      clear: both;

    Vom schimba float: left in float: right

  3. Vom localiza clasa .postprofile care ar trebui sa arate cam asa:
    4. 1
2
3
4
5
6
7
8

          /* Also see tweaks.css */;
      margin: 5px 0 10px 0;
      min-height: 80px;
      color: #666666;
      border-left: 1px solid #FFFFFF;
      width: 22%;
      float: right;
      display: inline;

    Vom schimba float: right in float: left si border-left in border-right

  4. Vom cauta clasa .pm .postprofile unde deasemenea vom schimba din border-left in border-right
  5. Acum vom modifica clasa .online care initial arata in felul urmator:
    6. 1
2
3

          background-image: none;
      background-position: 100% 0;
      background-repeat: no-repeat;

    iar noi o vom modifica in

    1
2
3

          background-image: none;
      background-position: 0 0;
      background-repeat: no-repeat;
  6. In final daca se doreste a evita efectul “de a fi in aer” cum ii spun multi putem adauga la clasa .postbody codul urmator
    7. 1
2

    padding-left: 10px;
border-left: 1px solid #FFFFFF;

    care are practic ca rezultat adaugarea unei linii in stanga pe toata inaltimea postului (in cazul acesta va sfatuiesc sa eliminati codul

    1

    border-right: 1px solid #FFFFFF;

    din clasa .postprofile pentru a nu va trezi cu doua linii verticale amandoua servind aceluiasi scop, si anume de a delimita zona cu informatiile despre utilizator de mesajul propriu-zis).

Sper sa va fie de folos acest tutorial. Cat despre rezultatul obtinut acesta poate fi vizionat aici

* numele directorului “prosilver” la care face referire acest tutorial se poate schimba in functie de tema cu conditia ca aceasta sa fie bazata pe structura prosilver si sa fie orientata spre dreapta deasemenea.

Posted in: tutoriale
Tags:

This entry was posted on Saturday, December 15th, 2007 at 10:22 pm and is filed under tutoriale. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.