Za lažje oblikovanje bomo vnesli nekaj vsebine in nastavili nekaj modulov. Predlogo morate imeti že nameščeno.
Članki
Najprej ustvarite vsaj tri članke v novi kategoriji storitve. Članke lahko označite kot "featured" oz kot izpostavljene. Zdaj lahko nastavite menu postavko v "Main menu" "Domov" na featured articles. V zavihku Layout nastavite "Leading articles" na 0, "Intro articles" na 3 in "Columns" na 3. Na prvi strani bi se zdaj morali prikazati trije članki (zaenkrat verjetno en pod drugim).
Ustvarite še menu postavko "Storitve" (tudi v Main menu) in jo nastavite na category blog.
Moduli
Okoli člankov bomo dodali nekaj modulov.
Prvi modul bo menu oziroma navigacija. Med moduli poiščite Main menu. Nastavite prikaz na vseh straneh in pozicijo "menu". Na zavihku Advanced, vpišite pod Menu class suffix navbar-nav navbar-right (dodajte na začetku en presledek). Slednje skrbi za pravilen prikaz navigacijske vrstice v vodoravnem načinu, poravnano desno.
Drugi bo tako imenovani "Hero", ki prvi nagovarja obiskovalca. Ustvarite nov custom html modul. Nastavite prikaz samo na prvi strani in pozicijo "fullwidth". Na zavihku Advanced, vpišite pod Module class suffix text-center (dodajte na začetku en presledek). V vsebinski del vnesite vsebino.
<h1>SiJoomla template</h1>
<p class="lead">Enostavna, sodobna, responsive Joomla predloga za spletno vizitko ali poslovno stran.</p>
<p><a class="btn btn-primary" href="#" role="button">Zanima me več</a></p>Za ozadje tega modula potrebujemo še večjo sliko. Pripravite sliko velikosti 1920x1200px header-bg.jpg in jo naložite v mapo templates/sijoomla/images. Kasneje jo bomo s css prikazali.
Tretji modul bo poudarjal naše prednosti. Ustvarite nov custom html modul. Nastavite prikaz samo na prvi strani in pozicijo "feature". Na zavihku Advanced, vpišite pod Module class suffix text-center (dodajte na začetku en presledek). V vsebinski del vnesite vsebino.
<div class="row">
<div class="col-md-3">
<h3>Zanesljivost</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="col-md-3">
<h3>Prilagodljivost</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="col-md-3">
<h3>Dokumentirano</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="col-md-3">
<h3>Narejeno z ljubeznijo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>Četrti bo noga. Ustvarite nov custom html modul ali kopirajte tretjega. Nastavite prikaz na vseh straneh in pozicijo "footer".
Zdaj je vsebinsko spletna stran že bolj urejena. Čas je, da nastavimo še logo in dodamo nekaj nujnih datotek ter "template overrides" v sistemu predloge.
Logo ustvarimo kot sliko logo.png in dodamo v mapo templates/sijoomla/images. Naj bo približne velikosti 190x45px.
Potrebovali bomo še Bootstrap datoteke. Ker uporabljamo verzijo 3 (Joomla privzeto uporablja 2), jih moramo vključiti sami. Na njihovi strani prenesite paket in razpakirajte datoteke (prenos). Potrebovali boste dve datoteki. Bootstrap.min.css kopirajte v mapo css naše predloge, bootstrap.min.js pa v mapo jsx.
Potrebno bo še nekaj preglasitev pogledov v template overrides za pravilen prikaz člankov. Ustvarite nove preglasitve za com_content in sicer article, category in featured.
Zdaj boste našli v html mapi predloge mapo com_content in v njej tri nove mape. V teh mapah so datoteke, ki skrbijo za nove poglede.
Najprej bomo spremenili pogled prve strani "featured articles". Odprite datoteko templates/sijoomla/html/com_content/featured/default.php in prepišite vsebino od vrstice 63 do 76 s sledečo:
<div class="items-row cols-<?php echo (int) $this->columns; ?> <?php echo 'row-' . $row; ?> row">
<?php endif; ?>
<div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> col-md-<?php echo round(12 / $this->columns); ?>"
itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
</div>
<?php $counter++; ?>
<?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>
</div>Shranite in zaprite. Na prvi strani bi zdaj morali biti trije članki prikazani trije v vrsti en ob drugem. Spremenili smo le Bootstrap class, verzija 3 namreč za stolpce uporablja "col", verzija 2 pa "span".
Podoben popravek bomo naredili v blog pogledu. Odprite datoteko templates/sijoomla/html/com_content/category/blog.php in prepišite vsebino od vrstice 93 do 110 s sledečo:
<?php if (!empty($this->intro_items)) : ?>
<?php foreach ($this->intro_items as $key => &$item) : ?>
<?php $rowcount = ((int) $key % (int) $this->columns) + 1; ?>
<?php if ($rowcount == 1) : ?>
<?php $row = $counter / $this->columns; ?>
<div class="items-row <?php echo 'row-' . $row; ?> row clearfix">
<?php endif; ?>
<div class="col-sm-<?php echo round((12 / $this->columns)); ?>">
<article class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?><?php echo $item->featured ? ' item-featured' : ''; ?>"
itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<?php
$this->item = & $item;
echo $this->loadTemplate('item');
?>
</article>
<!-- end item -->
<?php $counter++; ?>
</div><!-- end col-sm-* -->Spet, popravili smo le row in span.
Zdaj bi naša spletna stran morala izgledati nekako takole:
Dodali bomo še nekaj oblikovanja. V datoteko templates/sijoomla/css/style.css vpišite:
/*CSS style template*/
a {
transition: all .3s ease 0s
}
img {
max-width: 100%
}
body, html {
height: 100%
}
.navbar {
margin-bottom: 0!important
}
#fullwidth {
overflow: hidden;
background: transparent url("../images/header-bg.jpg") no-repeat scroll center center;
padding: 200px 0;
color: #fff;
}
.moduletable {
margin-bottom: 20px;
padding: 20px 10px
}
#header .navbar-brand {
padding: 5px;
}
.blog-more {
padding: 10px 5px
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0;
color: #000;
background-color: rgba(235, 235, 235, .8);
font-size: 12px;
padding: 1em
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, .5)
}
.error .container {
display: table;
height: 100%;
min-height: 100%;
text-align: center;
width: 100%;
padding: 200px 0
}
.error .container h1 {
font-size: 140px
}
.navbar-toggle {
margin-top: 15px!important;
padding: 15px!important;
border: none!important;
border-radius: 0 !important
}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
}
/* Mobile devices (mobile, tablet, 768px and down) */
@media (max-width:768px) {
.navbar-nav>li>a {
line-height: 30px!important;
padding-bottom: 5px!important;
padding-top: 5px!important
}
}
/* Medium devices (desktops, laptops, 768 to 992px) */
@media (min-width: 768px) and (max-width: 992px) {
}
/* Medium devices (desktops, laptops, 992px and up) */
@media (min-width:992px) {
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width:1200px) {
}
Shranite in poglejte spletno stran. Zdaj smo že bliže zamišljeni obliki.
Naslednjič nadaljujmo z oblikovanjem.
