MyBB Çalışmalarımız-Portfolyo Eklentisi 1.4.x - 1.6.x

Kod:
1-İndirdiğiniz dosyadaki "works.php" dosyasını ana dizine atın ve "calismalar" klasörünüde images'in içine atın.

2-Admin Paneli > Temalar&Şablonlar > Şablonlar > Kullandığınız Tema > Yeni Şablon Ekle



Şablon Adı: work

Şablona Ekle:

<html>

<head>

<title>{$settings[bbname]}</title>

{$headerinclude}

</head>

<body>

{$header}

<div id="tasiyici-orta">

            <div class="icerik-sol">

                <ul class="calismalar">

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/1.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/2.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/3.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/4.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/5.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/6.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/7.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/8.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/1.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/2.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/3.jpg" /></a></li>

                    <li><a href="#"><img alt="Çalışma" src="images/calismalar/4.jpg" /></a></li>

                                        <li><a href="#"><img alt="Çalışma" src="images/calismalar/5.jpg"/></a></li>                

</ul>

            </div></div>

{$footer}

</body>

</html>



3-Admin Paneli > Temalar&Şablonlar > Kullandığın Tema > Global.css > Gelişmiş Düzenleme > En alta Ekle:



.icerik-sol {

    float: left;

    width: 1100px;

        margin: auto;

}

.calismalar {

    margin: auto;

    padding: 0px;

    list-style: none;

}

.calismalar li {

    float: left;

    margin: 0px 15px 5px 0px;

}

.calismalar li img {

    border: 5px solid #dfdfdf;

        opacity: 0.5;

        

-webkit-transition: all 250ms ease-in-out;

-moz-transition: all 250ms ease-in-out;

-o-transition: all 250ms ease-in-out;

transition: all 250ms ease-in-out;}



.calismalar li img:hover {

        opacity: 1;

}



#tasiyici-orta {

    width: 1000px;

        height: 500px;

        margin: auto;

}