Css Konusunda çözemediğim Problem

[Anarchosa]

Arkadaşlar Bu eklediğim resmin HTML + CSS kodunu tam nasıl bulabilirim.

http://i.hizliresim.com/g2RMg0.png

Buldum ancak sitedeki gibi verimli çalışmıyor.

HTML:

Alıntı

        <div class="fourBox">
            <div class="box mor">
                <div class="head-box" style="border: 0px none;">
                    <h1><a href="../tr/projeler/satisi-devam-eden-projeler/">PROJELER</a></h1>
                    <a href="../tr/projeler/satisi-devam-eden-projeler/" class="more">Detaylar için tıklayın <span>&gt;</span></a>
                </div>
    <div class="img-box"><a href="../tr/projeler/satisi-devam-eden-projeler/"></a></div>
                <div class="animate" style="margin-top: 80px;"></div>
            </div>
            <div class="box sari">
                <div class="head-box" style="">

                    <h1><a href="../tr/kampanyalar/">KAMPANYALAR</a></h1>
                    <a href="../tr/kampanyalar/" class="more /tr/kampanyalar/">Detaylar için tıklayın <span>&gt;</span></a>
                </div>
                <div class="img-box"><a href="../tr/kampanyalar/"></a></div>
                <div class="animate" style="margin-top: 80px;"></div>
            </div>
            <div class="box turuncu">
                <div class="head-box" style="">
                    <h1><a href="http://www.youtube.com/watch?v=WWGWY39QWfE" class="tanitimfilmi">TANITIM FİLMİ</a></h1>
                    <a href="http://www.youtube.com/watch?v=WWGWY39QWfE" class="more tanitimfilmi">Detaylar için tıklayın <span>&gt;</span></a>
                </div>
                <div class="img-box"><a href="http://www.youtube.com/watch?v=WWGWY39QWfE" class="tanitimfilmi"></a></div>
                <div class="animate" style="margin-top: 80px;"></div>
            </div>
            <div class="box yesil">
                <div class="head-box last" style="">
 <h1><a href="../tr/kurumsal/baskanin-mesaji">BAŞKANIN MESAJI</a></h1>
                    <a href="../tr/kurumsal/baskanin-mesaji" class="more">Detaylar için tıklayın <span>&gt;</span></a>
                </div>
                <div class="img-box"><a href="../tr/kurumsal/baskanin-mesaji"></a></div>
                <div class="animate" style="margin-top: 80px;"></div>
            </div>
        </div>
   

 

BUDA CSS

Alıntı

 

.fourBox {padding: 0 10px 0 10px;}
.fourBox .box { width: 235px; float: left; position: relative; padding: 10px 0 0 0; overflow: hidden;}
.fourBox .box:hover {cursor: pointer;}
.fourBox .box h1 {font: 800 25px/23px roboto;}
.fourBox .box h1 a {color: #666f79;}
.fourBox .box h1 a span { font-size: 22px; font-weight: 100; color: #666f79; display: block; }
.fourBox .box a.more { color: #666f79; font: 13px roboto; }
.fourBox .box a.more span {font: 800 11px arial;}
.fourBox .box .head-box { border-right: 1px solid #deeaf7; padding: 0 0 0 10px; margin: 0 0 10px 0; position: relative; z-index: 2; }
.fourBox .box .head-box.last {border:0 !important;}
.fourBox .box .img-box { height: 100px; position: relative; z-index: 2; }
.fourBox .box .img-box a {width: 100%; height: 100%; display: block;}
.fourBox .box .animate { position: absolute; width: 100%; height: 100px; z-index: 1; margin-top: 80px; top: 0; }

.fourBox .mor {}
.fourBox .mor .img-box { background: url(../images/projeler.jpg) no-repeat; transition: all ease 0.5s; }
.fourBox .mor:hover .img-box {background: url(../images/projeler.jpg) no-repeat;}
.fourBox .mor .animate {background: #257cc0;}
.fourBox .mor a.more span {color: #257cc0 !important;}
.fourBox .mor h1 a {color: #257cc0 !important;}

.fourBox .mor2 {}
.fourBox .mor2 .img-box { background: url(../images/musterimemnuniyet.jpg) no-repeat; transition: all ease 0.5s; }
.fourBox .mor2:hover .img-box {background: url(../images/musterimemnuniyet.jpg) no-repeat;}
.fourBox .mor2 .animate {background: #257cc0;}
.fourBox .mor2 a.more span {color: #257cc0 !important;}
.fourBox .mor2 h1 a {color: #257cc0 !important;}

.fourBox .turuncu {}
.fourBox .turuncu .img-box { background: url(../images/tanitim-filmi.jpg) no-repeat; transition: all ease 0.5s; }
.fourBox .turuncu:hover .img-box {background: url(../images/tanitim-filmi.jpg) no-repeat;}
.fourBox .turuncu .animate {background: #e69623;}
.fourBox .turuncu a.more span {color: #e69623 !important;}
.fourBox .turuncu h1 a {color: #e69623 !important;}

.fourBox .turuncu2 {}
.fourBox .turuncu2 .img-box { background: url(../images/keyifliyasam.jpg) no-repeat; transition: all ease 0.5s; }
.fourBox .turuncu2:hover .img-box {background: url(../images/keyifliyasam.jpg) no-repeat;}
.fourBox .turuncu2 .animate {background: #e69623;}
.fourBox .turuncu2 a.more span {color: #e69623 !important;}
.fourBox .turuncu2 h1 a {color: #e69623 !important;}

.fourBox .sari {}
.fourBox .sari .img-box { background: url(../images/kampanyalar.jpg) no-repeat; transition: all ease 0.5s; }
.fourBox .sari:hover .img-box {background: url(../images/kampanyalar.jpg) no-repeat;}
.fourBox .sari .animate {background: #cf3227;}
.fourBox .sari a.more span {color: #cf3227 !important;}
.fourBox .sari h1 a {color: #cf3227 !important;}

.fourBox .sari2 {}
.fourBox .sari2 .img-box { background: url(../images/akilliev.jpg) no-repeat; transition: all ease 0.5s; }
.fourBox .sari2:hover .img-box {background: url(../images/akilliev.jpg) no-repeat;}
.fourBox .sari2 .animate {background: #cf3227;}
.fourBox .sari2 a.more span {color: #cf3227 !important;}
.fourBox .sari2 h1 a {color: #cf3227 !important;}

.fourBox .yesil {}
.fourBox .yesil .img-box { background: url(../images/haberler.jpg) no-repeat; transition: all ease 0.5s; }
.fourBox .yesil:hover .img-box {background: url(../images/haberler.jpg) no-repeat;}
.fourBox .yesil .animate {background: #309946;}
.fourBox .yesil a.more span {color: #309946 !important;}
.fourBox .yesil h1 a {color: #309946 !important;}

.fourBox .yesil2 {}
.fourBox .yesil2 .img-box { background: url(../images/spor.jpg) no-repeat; transition: all ease 0.5s; }
.fourBox .yesil2:hover .img-box {background: url(../images/spor.jpg) no-repeat;}
.fourBox .yesil2 .animate {background: #309946;}
.fourBox .yesil2 a.more span {color: #309946 !important;}
.fourBox .yesil2 h1 a {color: #309946 !important;}

/* ================== Content Animations Colors ================== */

 

.applyBox { background: url(../images/serit-1.jpg) top; min-height: 106px; margin: 45px 0;}
.applyBox .container_12 { padding: 25px 0;}
.applyBox .text {}
.applyBox .text p { font: 100 20px/24px roboto; color: #fff;}
.applyBox .button { text-align: right;}
.applyBox .button a { background: #4d3c95; color: #fff; font: 400 15px roboto; padding: 13px 20px 10px; border-bottom: 4px solid #48388f; border-radius: 3px; display: inline-block; }
.applyBox .button a span { font: 800 17px calibri; margin: 0 0 0 15px;}

.applyBoxTwit { background: url(../images/serit-22.jpg) top; min-height: 66px; margin: 45px 0;}
.applyBoxTwit .container_12 { padding: 25px 0;}
.applyBoxTwit .text {}
.applyBoxTwit .text p { font: 100 18px/24px roboto; color: #fff;}
.applyBoxTwit .button { text-align: right;}
.applyBoxTwit .button a { background: #4d3c95; color: #fff; font: 400 15px roboto; padding: 13px 20px 10px; border-bottom: 4px solid #48388f; border-radius: 3px; display: inline-block; }
.applyBoxTwit .button a span { font: 800 17px calibri; margin: 0 0 0 15px;}

 

Site Adresi Burda:

http://www.demirinsaat.com.tr/tr/

 

2.Olarakta farklı bir sorum var Wordpress HEADER yani Admin menüsünün hemen altına sosyal ağları eklemek istiyorum eklentiyi indirdim kurdum ancak Header nasıl yerleştireceğimi çözemedim.

 

Şöyle bir Code verdi program ama ;

<?php if ( function_exists('cn_social_icon') ) echo cn_social_icon(); ?>

Verilen eklentiyi ayar kısmında böyle biey yazıyor;

Note: You can also add shortcode to Text Widget but this code add_filter('widget_text', 'do_shortcode'); needs to be added to your themes functions.php file.

 

functions.php dosyasında herhangi bir yere koyduğumda sunucu patlıyor.

[Anarchosa]

güncel

[cihaneken]

Kodun başındaki <?php ve sonundaki ?> etiketlerini kaldır ve o şekilde eklemeyi dene. PHP içerisine PHP eklemenin kuralları vardır.