آموزش ایجاد یک بنر تمام عرض زیر هدر سایت

ممکن است مایل باشید بنر تصویر یا گرافیک بزرگی در زیر ناحیه هدر و بالای بخش محتوای وب پیج خود داشته باشید، اما بخش هدر و بخش محتوا با پهنای معمولی باشند. این بنر در وسط صفحه واقع می شود.

این کار را می توان با اضافه کردن یک ناحیه ماژول جدید در فایل های index.php و templateDetails.xml انجام داد. این ماژول جدید در زیر هدر و بالای محتوا قرار می یگرد و کل عرض مانیتور یا صفحه نمایش بزرگ را پر می کند.

این کار را می توان با اضافه کردن یک ناحیه ماژول جدید در فایل های index.php و templateDetails.xml انجام داد. این ماژول جدید در زیر هدر و بالای محتوا قرار می یگرد و کل عرض مانیتور یا صفحه نمایش بزرگ را پر می کند.

بایستی بخش هدر فایل index.php را تعدیل کنیم بطوری که بتوان آن را طوری سبک بندی کرد که ویژگی های ناحیه محتوا از نظر پهنا و محل قرار گیری را داشته باشد.

همچنین لازم است که سبک هایی برای ناحیه هدر تعریف شود که با سبک ناحیه محتوا هماهنگی داشته باشد و پهنا و محل قرارگیری آنها هم راستا باشد.

همچنین بایستی استیل مورد نظر برای ناحیه بنر را تعریف کنید. سبک مورد نظر برای پوزیشن بنر ایجاد شده معمولا در فایل custom.css نوشته می شود.

همیشه قبل از ویرایش فایل اروجینال قالب جوملا، یک نسخه پشتیبان برای موارد اضطراری تهیه کنید.

اضافه کردن پوزیشن بنر تمام عرض به فایل templateDetails.xml

فایل templateDetails.xml در ریشه فلدر قالب پروتواستار جوملا را با یک ویرایشگر متن یا از طریق ناحیه مدیریت قالب جوملا باز کنید.

پوزیشن های زیر را به لیست پوزیشن ها اضافه کنید:

<positions>
        <position>widebanner</position>
        <position>banner</position>
        <position>debug</position>
        <position>position-0</position>
        ...

اضافه کردن پوزیشن به فایل index.php

قبل از ویرایش فایل index.php اطمینان حاصل کنید که از فایل های قالب پروتواستار پشتیبان گرفته باشید.

فایل index.php را باز کرده و ویرایش های زیر را انجام دهید. خطوطی که هایلایت هستند جدید بوده و بایستی در فایل index.php درج شود، سایر خطوط نیز جابجا شده تا پوزیشن ماژول widebanner اضافه شود.

توجه: این کد بخش <header> را جابجای کرده تا در بالا و خارج از <"div class="container> قرار گیرد.

<div class="body">
            <!-- Header -->
            <div id="headercontainer" class="container">
            <header class="header" role="banner">
                <div class="header-inner clearfix">
                    <a class="brand pull-left" href="/<?php echo $this->baseurl; ?>/">
                        <?php echo $logo; ?>
                        <?php if ($this->params->get('sitedescription')) : ?>
                            <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                        <?php endif; ?>
                    </a>
                    <div class="header-search pull-right">
                        <jdoc:include type="modules" name="position-0" style="none" />
                    </div>
                </div>
            </header>
            <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
            <?php if ($this->countModules('position-1')) : ?>
                <nav class="navigation" role="navigation">
                    <div class="navbar pull-left">
                        <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                    </div>
                    <div class="nav-collapse">
                        <jdoc:include type="modules" name="position-1" style="none" />
                    </div>
                </nav>
            <?php endif; ?>
            </div>
            <!--------- ADD WIDE BANNER ------------>
            <?php if ($this->countModules('widebanner')) : ?> 
            <div id="widebannerholder" class="screenwide"> 
                <jdoc:include type="modules" name="widebanner" style="xhtml" /> 
            </div> 
            <?php endif; ?> 
            <!--------- END WIDE BANNER ---------------> 
            <jdoc:include type="modules" name="banner" style="xhtml" />
            <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>"> 
            <div class="row-fluid">

با این ادیت ها می بینید که تگ <"div class="container... از بالای <header> به بالای <"div class="row-fluid> منتقل شده است. تگ <"div id="headercontainer" class="container> به آن اضافه شده است بطوریکه همان ویژگی های ناحیه محتوا را داشته و بتوانید آن ناحیه را در صورت لزوم سبک بندی کنید.

اضافه کردن سبک به فایل user.css برای زیباسازی و نمایش تغییرات ایجاد شده

در مقاله های قبلی از استایل شیت custom.css صحبت شد که فایل به صورت دستی ساخته شده و در فایل index.php به قالب معرفی می شود. در نسخه های بالاتر از 3.5 جوملا ویژگی جستجوی استایل شیت سفارشی به قالب پروتواستار اضافه شده است. فقط کافی است که استایل شیت سفارشی خود را بجای custom.css به user.css نامگذاری کنید. جوملا به طور خودکار این استایل شیت را پیدا کرده و سبک درج شده در آن را اجرا میکند. بنابراین فایل user.css خود را باز کنید و خطوط استیل زیر را به آن بیافزایید:

body.site {padding: 0px;}
header {width: 100%}
#headercontainer {width: 940px}
#widebannerholder {height: auto; width: 100%}
#widebannerholder img {width: 100%; height: auto;}

این کد فضای خالی حاشیه عنصر body.site را حذف می کند و بنر ایجاد شده کل صفحه نمایش را خواهد پوشید. پهنای عنصر headercontainer# با پهنای عنصر container. یکسان است، زیرا از یک کلاس هستند. می توانید استیل های دیگری به این کد اضافه کنید تا پوزیشن ماژول به شکل مورد نظر شما ظاهر شود.

اضافه کردن سبک media@ برای صفحه نمایش باریک

می توانید سبک های دلخواه خود برای صفحه نمایش های کوچکتر را با استیل های media@ در فایل user.css درج کنید، بخصوص به عنصر headercontainer# بطوریکه پهنای آن 100% مانده و با عرض صفحه نمایش منطبق باشد.

طریقه ایجاد ماژول برای پوزیشن جدید

در ادمین جوملا به منوی مدیریت ماژول جوملا بروید. یک ماژول جدید از نوع Custom بسازید. ماژول را باز کنید. یک ویرایشگر متن می بینید. تصویر بنر خود را در آن درج کنید. در این ادیتور برای تصویر عرض و ارتفاع تعیین نکنید. اگر در اینجا طول و عرض برای تصویر تعیین کنید، سبک تدوین شده در استایل شیت را رونویسی می کند زیرا استیل سر خود بر استیل فایل استیل شیت اولویت دارد. این مسئله بخصوص در وبسایت های ریسپانسیو مشکل ساز می شود.

حال ماژول خود را به پوزیشن widebanner ست کنید. حال ماژول را برای منوی مورد نظر خود تخصیص داده و ذخیره کنید. وقتی وبسایت خود را باز کنید، بنر شما به طور تمام عرض نمایش خواهد یافت.