Artisteer ile yapılmış bir temanın modül pozisyonuyla oynama

Kodla Büyü

erbay111

Site Gezgini
Mesajlar
97
Artisteer ile yapılmış bir temamız var:

Temamızın index.php dosyasındaki kodlarımızı verelim:
Kod:
<?php
defined('_JEXEC') or die;

/**
 * Template for Joomla! CMS, created with Artisteer.
 * See readme.txt for more details on how to use the template.
 */

require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';

// Create alias for $this object reference:
$document = $this;

// Shortcut for template base url:
$templateUrl = $document->baseurl . '/templates/' . $document->template;

Artx::load("Artx_Page");

// Initialize $view:
$view = $this->artx = new ArtxPage($this);

// Decorate component with Artisteer style:
$view->componentWrapper();

JHtml::_('behavior.framework', true);

?>
<!DOCTYPE html>
<html dir="ltr" lang="<?php echo $document->language; ?>">
<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" />
    <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" />
   
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

    <!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.responsive.css" media="all">

    <script>if ('undefined' != typeof jQuery) document._artxJQueryBackup = jQuery;</script>
    <script src="<?php echo $templateUrl; ?>/jquery.js"></script>
    <script>jQuery.noConflict();</script>

    <script src="<?php echo $templateUrl; ?>/script.js"></script>
    <?php $view->includeInlineScripts() ?>
    <script>if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script>
    <script src="<?php echo $templateUrl; ?>/script.responsive.js"></script>
</head>
<body>

<div id="art-main">
    <div class="art-sheet clearfix">
<header class="art-header"><?php echo $view->position('position-30', 'art-nostyle'); ?>

    <div class="art-shapes">
        
            </div>

<h1 class="art-headline" data-left="42.99%">
    <a href="<?php echo $document->baseurl; ?>/"><?php echo $this->params->get('siteTitle'); ?></a>
</h1>
          
</header>
<?php if ($view->containsModules('position-1', 'position-28', 'position-29')) : ?>
<nav class="art-nav">
    
<?php if ($view->containsModules('position-28')) : ?>
<div class="art-hmenu-extra1"><?php echo $view->position('position-28'); ?></div>
<?php endif; ?>
<?php if ($view->containsModules('position-29')) : ?>
<div class="art-hmenu-extra2"><?php echo $view->position('position-29'); ?></div>
<?php endif; ?>
<?php echo $view->position('position-1'); ?>
 
    </nav>
<?php endif; ?>
<?php echo $view->position('position-15', 'art-nostyle'); ?>
<?php echo $view->positions(array('position-16' => 33, 'position-17' => 33, 'position-18' => 34), 'art-block'); ?>
<div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content">
<?php
  echo $view->position('position-19', 'art-nostyle');
  if ($view->containsModules('position-2'))
    echo artxPost($view->position('position-2'));
  echo $view->positions(array('position-20' => 50, 'position-21' => 50), 'art-article');
  echo $view->position('position-12', 'art-nostyle');
  echo artxPost(array('content' => '<jdoc:include type="message" />', 'classes' => ' art-messages'));
  echo '<jdoc:include type="component" />';
  echo $view->position('position-22', 'art-nostyle');
  echo $view->positions(array('position-23' => 50, 'position-24' => 50), 'art-article');
  echo $view->position('position-25', 'art-nostyle');
?>                        </div>
                        <?php if ($view->containsModules('position-7', 'position-4', 'position-5')) : ?>
<div class="art-layout-cell art-sidebar1">
<?php echo $view->position('position-7', 'art-block'); ?>
<?php echo $view->position('position-4', 'art-block'); ?>
<?php echo $view->position('position-5', 'art-block'); ?>
                        </div>
<?php endif; ?>

                        <?php if ($view->containsModules('position-6', 'position-8', 'position-3')) : ?>
<div class="art-layout-cell art-sidebar2">
<?php echo $view->position('position-6', 'art-block'); ?>
<?php echo $view->position('position-8', 'art-block'); ?>
<?php echo $view->position('position-3', 'art-block'); ?>


                        </div>
<?php endif; ?>
                    </div>
                </div>
            </div>
<?php echo $view->positions(array('position-9' => 33, 'position-10' => 33, 'position-11' => 34), 'art-block'); ?>
<?php echo $view->position('position-26', 'art-nostyle'); ?>


    </div>
<footer class="art-footer">
  <div class="art-footer-inner">
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 50%">
<?php if ($view->containsModules('position-31')) : ?>
    <?php echo $view->position('position-31', 'art-nostyle'); ?>
<?php else: ?>
        <p>Copyright © 2011-2012</p>
    <?php endif; ?>
</div><div class="art-layout-cell layout-item-0" style="width: 50%">
<?php if ($view->containsModules('position-32')) : ?>
    <?php echo $view->position('position-32', 'art-nostyle'); ?>
<?php else: ?>
         <?php endif; ?>
</div>
    </div>
</div>

    <p class="art-page-footer">
        <span id="art-footnote-links">Designed by <a href="erdalbayrak1@gmail.com" target="_blank">Erdal BAYRAK</a>.</span>
    </p>
  </div>
</footer>

</div>



<?php echo $view->position('debug'); ?>
</body>
</html>
Şimdi modül pozisyonlarını ön izleyelim.

Artisteer temaların modül pozisyonlarıyla oynamak zordur belki ama esnek bir yapı bularak pozisyonları istediğimiz gibi değiştirebilir veya çoğaltabiliriz.
İşte uygun pozisyon yapılarından biri:
Kod:
<?php echo $view->positions(array('position-16' => 33, 'position-17' => 33, 'position-18' => 34), 'art-block'); ?>
Görüldüğü üzere aynı satırda 3 adet pozisyon var.
=>33 , =>33 ,=> 34 sayıları modül genişliğinin, ana gövde (main) genişliğine göre % yüzdesel oranını ifade ediyor. Stil dosyasıyla oynamaya gerek kalmadan buradan değiştirebilirsiniz.
Bu satırdaki pozisyonlardan yalnızca birine modül atanırsa 33+33+34=100 yüzde yüzünü kullanır. Birinci ve ikinci pozisyonlara atama yapılırsa üçüncü pozisyon alanı ikinciye 33+34 dahil olur.
Yukarıdaki kodu katı div alanları dışında farklı yerlere çoğaltarak yeni pozisyonlar ekleyebilirsiniz. Ancak eklediğiniz pozisyonu tema klasörü içindeki, (templateDetails.xml dosyasındaki) pozisyonlar dizinine dahil etmelisiniz.
'art-block' ifadesi bu pozisyonlar için css dosyasında tanımlı blok stilinin uygulanacağını belirtir. Pozisyonun kullanım amacına göre 'art-nav', 'art-content' vb. son ekler de tanımlayabilirsiniz veya 'art-nostyle' diyerek stil dosyasına bağlamazsınız.
Pozisyon eklemek için verdiğim kodları '<div></div>' tagları arasına yapıştırırken hangi stile bağladığınız önemlidir.Dilerseniz boş kullanabilirsiniz.
Ben haber temasında üç ayrı menu kullandığım için stil dosyasında olmayan
Kod:
<div class="art-ustmenubg">, <div class="art-f1">
gibi extra div tanımları kullandım. Bu durumda div tanımlarını stil dosyasına yazmalısınız(templates.css dosyasına-ayrıca anlatmak gerekir)..
Değiştirilen ve yeni eklenen pozisyonlar ve yeni index.php dosyamız/b]
ÖRNEK:

1,2,3,4....10 gibi rakamlarla gösterilen alanlar yeni oluşturulan veya değiştirilen pozisyonlar. Yukarıda ilk verdiğimiz index.php dosyasındaki kodlarla karşılaştırıp değişiklikleri inceleyebilirsiniz.
Yeni temanın pozisyon görünümü şu şekilde değişti;


Tabi unutmuyoruz templateDetails.xml dosyasına yazıyoruz yeni pozisyonlarımızı;

Tema ile yapılan Joomla 3x haber sitesi

http://joomlaweb.site/
 

Ekli dosyalar

  • artisteer.jpg
    artisteer.jpg
    209.3 KB · Görüntüleme: 826
  • temapozisyonilk.jpg
    temapozisyonilk.jpg
    164.9 KB · Görüntüleme: 825
  • temapozisyonyeni.jpg
    temapozisyonyeni.jpg
    465.4 KB · Görüntüleme: 825
  • modul_pozisyon_site.png
    modul_pozisyon_site.png
    185 KB · Görüntüleme: 824
  • xml.jpg
    xml.jpg
    134.8 KB · Görüntüleme: 820
  • ana.jpg
    ana.jpg
    481.1 KB · Görüntüleme: 817
BBNET
Geri
Üst