Introducere
HTML Templates
WHMCS Themes
Pterodactyl Themes
Suport

Documentație ByteUP

Bine ai venit la documentația ByteUP. Aici vei găsi toate informațiile necesare pentru a instala, configura și personaliza template-urile noastre. Fie că folosești template-uri HTML, teme WHMCS sau teme Pterodactyl, acest ghid te va ajuta să obții maximum din produsele noastre.

Descarcă template-uri

Descarcă template-urile achiziționate din contul tău și începe să le folosești imediat.

Accesează contul

Obține suport

Întâmpini probleme? Echipa noastră de suport este gata să te ajute 24/7.

Contactează suport

Instalare

Procesul de instalare variază în funcție de tipul de template pe care l-ai achiziționat. Mai jos găsești instrucțiunile generale pentru fiecare tip de produs.

HTML Templates

  1. Descarcă fișierul ZIP din contul tău ByteUP
  2. Dezarhivează conținutul în directorul dorit de pe computerul tău
  3. Deschide fișierul index.html în browser pentru a vizualiza template-ul
  4. Editează fișierele HTML, CSS și JavaScript pentru a personaliza template-ul
  5. Încarcă fișierele pe serverul tău web folosind FTP sau orice alt instrument de transfer 
# Exemplu de încărcare folosind FTP
ftp example.com
Username: username
Password: ********

cd public_html
mkdir my-new-site
cd my-new-site
put -r * .

WHMCS Themes

  1. Descarcă fișierul ZIP al temei WHMCS din contul tău
  2. Accesează panoul de administrare WHMCS
  3. Navighează la Setup > General Settings > Templates
  4. Încarcă tema în directorul /templates/ al instalării WHMCS
  5. Selectează noua temă din lista de template-uri disponibile
  6. Salvează modificările
# Structura directorului pentru o temă WHMCS
/templates/
  /your-theme-name/
    /css/
    /img/
    /js/
    404.tpl
    account-paymentmethods-manage.tpl
    account-user-management.tpl
    announcements.tpl
    ...și alte fișiere template

Pterodactyl Themes

  1. Descarcă fișierul ZIP al temei Pterodactyl
  2. Conectează-te la serverul tău prin SSH
  3. Navighează la directorul de instalare Pterodactyl
  4. Creează o copie de backup a fișierelor existente
  5. Încarcă noile fișiere de temă în directorul corespunzător
  6. Rulează comanda pentru recompilarea resurselor
  7. Restartează serviciile necesare
# Comenzi pentru instalarea unei teme Pterodactyl
cd /var/www/pterodactyl
php artisan down

# Fă backup la fișierele importante
cp -r public/assets public/assets.backup
cp -r resources resources.backup

# Încarcă noile fișiere de temă
# Apoi rulează:

yarn install
yarn build:production

php artisan view:clear
php artisan up

Structura fișierelor

Înțelegerea structurii fișierelor te va ajuta să personalizezi mai eficient template-urile. Mai jos este prezentată structura tipică pentru fiecare tip de template.

HTML Templates

/template-name/
  /css/                  # Fișiere CSS
    style.css            # Stiluri principale
    responsive.css       # Stiluri responsive
  /js/                   # Fișiere JavaScript
    main.js              # Script principal
    plugins.js           # Plugin-uri JavaScript
  /images/               # Imagini și resurse grafice
  /fonts/                # Fișiere de fonturi
  index.html             # Pagina principală
  about.html             # Pagina Despre noi
  services.html          # Pagina Servicii
  contact.html           # Pagina Contact
  ... alte pagini HTML

Customizarea HTML Templates

Template-urile noastre HTML sunt concepute pentru a fi ușor de personalizat. Iată câteva instrucțiuni pentru modificarea elementelor comune.

Modificarea culorilor

Majoritatea template-urilor folosesc variabile CSS pentru scheme de culori, ceea ce face personalizarea foarte simplă. 

                    /* Găsește aceste variabile în css/style.css */
                    :root {
                      --primary: #00f0ff;
                      --secondary: #ff00e4;
                      --dark: #0a0a14;
                      --darker: #05050c;
                      --light: #ffffff;
                      --gray: #8e8e8e;
                    }
                    
                    /* Schimbă culorile pentru a personaliza întregul site */

Alternativ, poți modifica direct clasele CSS pentru elemente specifice: 

                    /* Modifică culoarea butoanelor principale */
                    .btn-primary {
                      background-color: #3498db;
                      border-color: #3498db;
                    }
                    
                    /* Modifică culoarea textului din header */
                    .header-text {
                      color: #e74c3c;
                    }

Înlocuirea logo-ului

Pentru a înlocui logo-ul, urmează acești pași:

  1. Pregătește noul logo la dimensiunea potrivită (recomandăm 200x60px pentru majoritatea template-urilor)
  2. Salvează noul logo în directorul /images/
  3. Deschide fișierul index.html și alte pagini HTML
  4. Localizează codul pentru logo și actualizează calea fișierului 
                    <!-- Găsește acest cod în fișierele HTML -->
                    <div class="logo">
                      <a href="index.html">
                        <img src="images/logo.png" alt="Site Logo">
                      </a>
                    </div>
                    
                    <!-- Înlocuiește cu noul logo -->
                    <div class="logo">
                      <a href="index.html">
                        <img src="images/your-new-logo.png" alt="Your Company Name">
                      </a>
                    </div>

Componente HTML cu Tailwind CSS

Template-urile noastre includ o varietate de componente reutilizabile bazate pe Tailwind CSS pe care le poți folosi pentru a construi pagini personalizate.

Butoane

Poți utiliza diferite stiluri de butoane create cu Tailwind CSS: 

<button class="bg-cyan-500 hover:bg-cyan-600 text-white px-6 py-3 rounded-lg transition-colors">
  Buton Primar
</button>

<button class="border border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:bg-opacity-10 px-6 py-3 rounded-lg transition-colors">
  Buton Secundar
</button>

<button class="bg-gradient-to-r from-cyan-500 to-blue-600 hover:opacity-90 text-white px-6 py-3 rounded-lg transition-opacity">
  Buton Gradient
</button>

<button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg transition-colors">
  Buton Dark
</button>

Carduri

Cardurile sunt componente versatile pentru afișarea conținutului:

Titlu Card

Descriere card cu informații despre funcționalități sau servicii.

Titlu Card

Descriere card cu informații despre funcționalități sau servicii.

Titlu Card

Descriere card cu informații despre funcționalități sau servicii.

<div class="bg-gray-800 rounded-xl overflow-hidden hover:shadow-lg hover:shadow-cyan-900/20 transition-shadow">
  <div class="h-40 bg-gradient-to-r from-cyan-500 to-blue-600"></div>
  <div class="p-4">
    <h4 class="font-bold mb-2">Titlu Card</h4>
    <p class="text-gray-400 text-sm">Descriere card cu informații.</p>
  </div>
</div>

Alerte

Alertele sunt utile pentru a afișa mesaje importante către utilizatori:

Operațiune reușită!

Template-ul a fost instalat cu succes.

Eroare la instalare!

Nu s-a putut încărca tema.

<!-- Alertă de succes -->
<div class="bg-green-900/30 border border-green-500 text-green-200 px-4 py-3 rounded-lg flex items-start">
  <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <div>
    <h4 class="font-medium mb-1">Operațiune reușită!</h4>
    <p class="text-sm text-green-300">Template-ul a fost instalat cu succes.</p>
  </div>
</div>

Taburi

Sistemul de taburi permite organizarea conținutului în secțiuni:

Informații generale

Acest template include toate componentele necesare pentru un site web modern. 

<div class="mb-4 border-b border-gray-800">
  <div class="flex flex-wrap -mb-px">
    <button class="inline-block py-3 px-6 text-cyan-500 border-b-2 border-cyan-500 font-medium">Informații</button>
    <button class="inline-block py-3 px-6 text-gray-400 hover:text-gray-300 border-b-2 border-transparent">Specificații</button>
    <button class="inline-block py-3 px-6 text-gray-400 hover:text-gray-300 border-b-2 border-transparent">Documentație</button>
  </div>
</div>

<div class="py-4">
  <h4 class="text-xl font-medium mb-3">Informații generale</h4>
  <p class="text-gray-300">Conținutul tab-ului activ.</p>
</div>

Badge-uri și etichete

Badge-urile și etichetele sunt utile pentru a evidenția statusuri sau categorii:

Badge-uri simple:

Nou Activ În așteptare Critic

Badge-uri cu border:

HTML CSS JavaScript 
<!-- Badge-uri simple -->
<span class="bg-blue-500 text-white text-xs px-2.5 py-1 rounded-full">Nou</span>
<span class="bg-green-500 text-white text-xs px-2.5 py-1 rounded-full">Activ</span>

<!-- Badge-uri cu border -->
<span class="border border-blue-500 text-blue-500 text-xs px-2.5 py-1 rounded-full">HTML</span>
<span class="border border-green-500 text-green-500 text-xs px-2.5 py-1 rounded-full">CSS</span>

Toggle Switches

Toggle switches oferă o metodă intuitivă pentru setări de tip on/off: 

<!-- Toggle simplu -->
<label class="flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only" checked>
    <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
    <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition transform translate-x-6"></div>
  </div>
  <div class="ml-3 text-gray-200 font-medium">Activat</div>
</label>

Tooltip-uri

Tooltip-urile oferă informații suplimentare la hover:

Tooltip deasupra
Tooltip dedesubt 
<!-- Tooltip sus -->
<div class="relative group inline-block">
  <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg">
    Tooltip sus
  </button>
  <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
    <div class="bg-black text-white text-sm rounded-lg py-2 px-3 text-center">
      Tooltip deasupra
      <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-8 border-transparent border-t-black"></div>
    </div>
  </div>
</div>

Design Responsive

Toate template-urile noastre sunt complet responsive și se adaptează la orice dimensiune de ecran. Iată cum să testezi și să ajustezi designul responsive.

Testarea pe diferite dispozitive

Pentru a testa cum arată site-ul tău pe diferite dispozitive:

  1. Folosește instrumentele de dezvoltare din browser (F12 în majoritatea browserelor)
  2. Activează modul de vizualizare pentru dispozitive mobile
  3. Selectează diferite dispozitive din lista predefinită sau ajustează manual dimensiunile
  4. Verifică cum se comportă elementele la diferite dimensiuni de ecran
Breakpoint Dimensiune Dispozitive
Extra Small < 576px Telefoane mobile în format portret
Small ≥ 576px Telefoane mobile în format landscape
Medium ≥ 768px Tablete
Large ≥ 992px Desktop, laptopuri mici
Extra Large ≥ 1200px Desktop-uri mari, monitoare wide

Ajustarea elementelor responsive

Dacă trebuie să ajustezi comportamentul responsive al anumitor elemente: 

                    /* Găsește aceste reguli în css/responsive.css */
                    
                    /* Mobile (sub 576px) */
                    @media (max-width: 575.98px) {
                      .header {
                        padding: 15px 0;
                      }
                      .hero-title {
                        font-size: 2rem;
                      }
                    }
                    
                    /* Tablete (768px - 991px) */
                    @media (min-width: 768px) and (max-width: 991.98px) {
                      .container {
                        max-width: 720px;
                      }
                      .hero-title {
                        font-size: 2.5rem;
                      }
                    }

Customizarea temelor WHMCS

Temele WHMCS pot fi personalizate pentru a se potrivi cu identitatea brandului tău. Iată cum să modifici cele mai importante elemente.

Modificarea culorilor și stilurilor

Fișierele principale de stil se găsesc în directorul css al temei tale: 

                    /* Path: /templates/your-theme-name/css/style.css */
                    
                    :root {
                      --brand-primary: #00f0ff;
                      --brand-secondary: #ff00e4;
                      --text-color: #333333;
                      --background-color: #ffffff;
                    }
                    
                    /* Modifică aceste variabile pentru a actualiza culorile din întreaga temă */

Personalizarea șabloanelor

WHMCS folosește fișiere .tpl pentru șabloane. Poți edita aceste fișiere pentru a modifica structura paginilor: 

                    <!-- Path: /templates/your-theme-name/header.tpl -->
                    
                    <header>
                      <div class="container">
                        <div class="logo">
                          <a href="index.php">
                            <img src="{$WEB_ROOT}/templates/{$template}/img/logo.png" alt="{$companyname}">
                          </a>
                        </div>
                        
                        <nav class="main-menu">
                          {include file="$template/includes/navbar.tpl"}
                        </nav>
                      </div>
                    </header>
                    
                    <!-- Modifică acest cod pentru a personaliza header-ul -->

Configurarea modulelor

Multe dintre temele noastre WHMCS includ module personalizate care pot fi configurate din panoul de administrare:

  1. Accesează panoul de administrare WHMCS
  2. Navighează la Addons > [Numele modulului temei]
  3. Configurează setările modulului conform preferințelor
  4. Salvează modificările

Setări comune pentru module

  • Slider Homepage: Configurează imaginile și textele pentru sliderul din pagina principală
  • Secțiuni Servicii: Personalizează serviciile afișate pe pagina principală
  • Testimoniale: Adaugă și gestionează testimonialele clienților
  • Integrare Social Media: Configurează link-urile către platformele de social media
  • Footer Personalizat: Modifică textul și link-urile din footer

Customizarea temelor Pterodactyl

Temele Pterodactyl pot fi personalizate pentru a oferi o experiență unică utilizatorilor tăi de servere de jocuri.

Modificarea stilurilor

Fișierele de stil pentru temele Pterodactyl se găsesc în directorul resources/scripts/styles: 

                    /* Path: resources/scripts/styles/variables.ts */
                    
                    // Modifică aceste variabile pentru a schimba schema de culori
                    export default {
                        colors: {
                            primary: 'hsl(210, 100%, 50%)', // Albastru
                            'primary-hover': 'hsl(210, 100%, 45%)',
                            secondary: 'hsl(280, 100%, 50%)', // Violet
                            'secondary-hover': 'hsl(280, 100%, 45%)',
                            background: 'hsl(210, 15%, 6%)',
                            'background-secondary': 'hsl(210, 15%, 9%)',
                        }
                    }

După modificarea fișierelor de stil, trebuie să recompilezi resursele: 

                    # Recompilează resursele după modificări
                    cd /var/www/pterodactyl
                    yarn build:production
                    
                    # Curăță cache-ul
                    php artisan view:clear

Întrebări frecvente

Pot folosi template-ul pe mai multe site-uri?

Licențele noastre Standard permit utilizarea unui template pe un singur site. Pentru utilizare pe mai multe site-uri, recomandăm licența Professional sau Enterprise care permite utilizarea pe 5, respectiv nelimitat de site-uri.

Cum actualizez template-ul la cea mai recentă versiune?

Actualizările sunt disponibile în contul tău de pe Template Market. Descarcă cea mai recentă versiune și înlocuiește fișierele existente. Recomandăm să faci o copie de backup înainte de actualizare și să verifici orice personalizări făcute.

Template-urile sunt compatibile cu toate browserele?

Da, toate template-urile noastre sunt testate și compatibile cu browserele moderne: Chrome, Firefox, Safari, Edge și Opera. Oferim suport limitat pentru Internet Explorer 11.

Ce fac dacă întâmpin o eroare în timpul instalării?

În cazul erorilor de instalare, verifică mai întâi documentația pentru cerințele specifice. Dacă problema persistă, contactează echipa noastră de suport prin ticket sau email cu detalii despre eroare și capturi de ecran relevante.

Troubleshooting

Probleme comune și soluții

Problemă Cauză posibilă Soluție
Imaginile nu se încarcă Căi de fișiere incorecte Verifică dacă căile către imagini sunt corecte și dacă fișierele există în directoarele specificate
CSS nu se aplică Fișier CSS neîncărcat sau erori Verifică consolă pentru erori, asigură-te că fișierul CSS este încărcat corect în header
Meniul mobil nu funcționează Eroare JavaScript Verifică consolă pentru erori JavaScript, asigură-te că jQuery este încărcat înaintea scripturilor de meniu
Tema WHMCS nu se activează Instalare incompletă Verifică dacă toate fișierele temei sunt încărcate în directorul corect și dacă permisiunile fișierelor sunt setate corect
Erori după actualizarea Pterodactyl Incompatibilitate de versiune Verifică dacă tema este compatibilă cu versiunea Pterodactyl instalată, recompilează resursele

Contact suport

Dacă ai întrebări sau probleme care nu sunt acoperite în această documentație, echipa noastră de suport este pregătită să te ajute.

Email Support

Trimite-ne un email și vom răspunde în maxim 24 de ore.

support@template-market.com

Ticket Suport

Deschide un ticket de suport în sistemul nostru.

Deschide Ticket