Igal pool, kus iganes Sa ei viibiks!
Twitter | Github | phpBB.com - Eesti | phpBBeesti.eu Foorum | Facebook | DISCORD Chat

phpBB 3.2 demo

phpBB - 1 tarkvara - üle 100 laienduse - eesti keeles - t a s u t a
phpBB - lokaliseeritud aastast 2008*!
*Erinevate haldajate käe all. Vaata lehekülge meist.


Laadi alla tõlge versioonile phpBB 3.2.

Welcome to phpBB Estonian Translation Team

Are you a fan of phpBB? Do you have enthusiasm for translation work? If you do, we would love to invite you to help us with phpBB volunteer translation. If you want to join our volunteer translation team, please contact us by FB/TW DM or at et.translations@phpbbeesti.net

[Õpetus] Prosilveril põhinevale kujundusele külgriba.

Arutelu phpBB 3.0.x stiilide teemal. Siin tutvustatakse ka ise tehtud stiile.

Moderaatorid: Tugi, Stiilid

doozy
Postitusi: 409
Liitunud: 13 Mai 2014, 08:00
Asukoht: Tallinn
Sugu: Määratlemata

[Õpetus] Prosilveril põhinevale kujundusele külgriba.

PostitusPostitas doozy » 14 Sept 2014, 18:55

Kuidas lisada külgribad oma foorumile.


Mida me üritame saavutada?

Külgribad on tavaline osa veebilehtedel. Nad on silmapaistvad, ning tavaliselt kasutatud menüüde jaoks, reklaami, linkide ja veebilehe enda informatsiooni kuvamiseks. Selles õpetuses saadki teada kuidas külgriba ka oma foorumile lisada.

Selle õpetuse järgi tehes teeme 6 erinevat külriba variatsiooni Sinu foorumile.


Samm 1: Loo külgriba failid

Et hoida oma kujunduse failid puhtad, loome me külgribale oma failid.

  1. Ava Notepad: Kirjuta “vasak külgriba” tekstiväljale. File → Save As:
    1. Faili nimi: sidebar_left.html
    2. Save as tüüp: All files
  2. Korda seda sama, et luua fail sidebar_right.html.
  3. Nüüd sul peaks olema kaks külgriba faili: sidebar_left.html ja sidebar_right.html. Liiguta need oma kujunduse, näiteks prosilver /template/ kausta.


Samm 2: HTMLi muudatused

Ava: /styles/prosilver/template/overall_header.html

Leia:

Kood: Vali kõik

<head>


Peale seda lisa:

Kood: Vali kõik

<!-- DEFINE $SIDEBARS = 'both' --> <!-- Options: Left | Right | Both | Off -->
<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' --> <!-- Options: Global | Index -->



Nüüd me peame kustutama #page-header div. See tegelikult ei mitte midagi, ning võib tekitada probleeme hiljem.


Otsi failis overall_header.html, leia ja kustuta:

Kood: Vali kõik

<div id="page-header">



Leia:

Kood: Vali kõik

    </div>

    <a name="start_here"></a>


Asenda sellega:

Kood: Vali kõik

<a name="start_here"></a>


Nüüd me lisame oma külgriba sturktuurilise koodi.


Leia:

Kood: Vali kõik

<div class="navbar">


Enne seda lisa

Kood: Vali kõik

<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index') -->
<!-- IF $SIDEBARS != 'off' -->
    <div class="sidebarwrapper">
<!-- ENDIF -->
    <!-- IF $SIDEBARS == 'left' -->
        <div class="fixedfluid-sidebar">
            <!-- INCLUDE sidebar_left.html -->
        </div>
       
        <div class="fixedfluid-content">
    <!-- ELSEIF $SIDEBARS == 'right' -->
        <div class="fluidfixed-sidebar">
            <!-- INCLUDE sidebar_right.html -->
        </div>
       
        <div class="fluidfixed-content">
    <!-- ELSEIF $SIDEBARS == 'both' -->
        <div class="fixedfluidfixed-left">
            <!-- INCLUDE sidebar_left.html -->
        </div>
       
        <div class="fixedfluidfixed-content">
    <!-- ENDIF -->
<!-- ENDIF -->


Ja otse loomulikult iga silt mille avame peame ka sulgema.


Ava: /styles/prosilver/template/overall_footer.html

Leia:

Kood: Vali kõik

<div class="copyright">{CREDIT_LINE}


Enne seda lisa:

Kood: Vali kõik

<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index')-->
    <!-- IF $SIDEBARS == 'left' or $SIDEBARS == 'right' -->
        </div><!-- /.fixedfluidcontent -->
        </div><!-- /.sidebarwrapper -->
    <!-- ELSEIF $SIDEBARS == 'both' -->
        </div>
        <div class="fixedfluidfixed-right">
            <!-- INCLUDE sidebar_right.html -->
        </div>
        </div>
    <!-- ENDIF -->
<!-- ENDIF -->



Samm 3: CSS muudatused

Õnneks me ei muuda me midagi CSSis. Lisame ainult mõned uued read, et seadistada struktuuri.

Ava: /styles/prosilver/theme/common.css

Faili lõppu lisa:

Kood: Vali kõik

/* Sidebars */
.sidebarwrapper {
    position: relative;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 170px;
    background: white;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 270px;
    background: white;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 260px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 270px 0 170px;
    background: white;
}

/* Sidebar Styling */

.ad1, .ad2 {
    display: block;
    float: left;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}



Samm 4: Kasutamine


Külgribade lubamine

Administraatoritel on mitmeid võimalusi, kui külgribad on paigaldatud. Neid saab seadistada muutes neid koodi ridu failis overall_header.html:

Kood: Vali kõik

<!-- DEFINE $SIDEBARS = 'both' -->


Valikud:

  • Left: Külgriba näidatakse ainult vasakul poolel;
  • Right: Külgriba näidatakse ainult paremal poolel;
  • Both: Külgriba kuvatakse mõlemal poolel, nii paremal kui ka vasakul.
  • Off: Külgribasi ei kuvata üldsegi.


Samuti saad valida kus külgribasi näidatakse.

Kood: Vali kõik

<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' -->


Valikud:

  • Global: Külgriba(d) on näidatud kõigil lehtedel kaasa arvatud Kasutaja juhtpaneelis ja sisselogimise lehel
  • Index: Külgriba(d) on näidatud ainult foorumi esilehel.

Külgriba laiuse muutmine

Selles ava common.css fail, ning leia üles näiteks koht "right sidebar":

Kood: Vali kõik

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 260px;
    bottom: 0;
    padding: 0;
}


Laiuse muutmiseks lihtsalt muuda width: 260px;, näiteks width: 300px;


Samm 5: Külgribale sisu lisamine

Minnes tagasi Samm 1 juurde, siis külgribad sisaldavad kujunduse faile template kaustas. Sidebar_left.html sisaldab vasaku külgriba teksti, ning sidebar_right.html sisaldab paremale poolele lisatud sisu.

Lisa need koodid omale faili (loomulikult võid ise oma loodud koodi lisada):

Kood: Vali kõik

<div class="forabg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Plokk 1</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist sidebar">
            <li class="bg1">Rida</li>
            <li class="bg2">Rida</li>
            <li class="bg1">Rida</li>
            <li class="bg2">Rida</li>
            <li class="bg1">Rida</li>                       
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>


Kood: Vali kõik

<div class="forumbg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Plokk 2</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist sidebar">
            <li class="bg1">Rida</li>
            <li class="bg2">Rida</li>
            <li class="bg1">Rida</li>
            <li class="bg2">Rida</li>
            <li class="bg1">Rida</li>                       
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>


Kood: Vali kõik

<div class="panel bg1">
    <div class="inner"><span class="corners-top"><span></span></span>
        Paneel 1
    <span class="corners-bottom"><span></span></span></div>
</div>

<br />

<div class="panel bg2">
    <div class="inner"><span class="corners-top"><span></span></span>
        Paneel 2
    <span class="corners-bottom"><span></span></span></div>
</div>

<br />

<div class="panel bg3">
    <div class="inner"><span class="corners-top"><span></span></span>
        Paneel 3
    <span class="corners-bottom"><span></span></span></div>
</div>


Kood: Vali kõik

<a class="ad1" href="#"><img src="{T_THEME_PATH}/images/1.gif" width="125" height="125" alt="" /></a>
<a class="ad2" href="#"><img src="{T_THEME_PATH}/images/2.gif" width="125" height="125" alt="" /></a>
<a class="ad1" href="#"><img src="{T_THEME_PATH}/images/3.gif" width="125" height="125" alt="" /></a>
<a class="ad2" href="#"><img src="{T_THEME_PATH}/images/4.gif" width="125" height="125" alt="" /></a>

Mine “3.0.x Stiilide foorum”

Kes on foorumil

Kasutajad foorumit lugemas: Registreeritud kasutajaid pole ja 1 külaline

phpBB Eesti : Lahtiütlus