Temayı Ekrana Kaplatmak - Tema Genişliği

admin · 5 Ara 2009

catalog\view\theme\default\stylesheet\stylesheet.css AC

Kod:

/* layout */
#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background: #FFFFFF;

Duzenlemen gereken yer: width: 960px;
Buradan genişliği ayarlayabılırsınız

eka7a' Alıntı:
css dosyasında #content width: 580px; width değerini düşürüp

#column_right deki margin-left: 10px ve #column_left margin-right: 10px; değerlerini yükseltmen lazım

marikoglu · 6 Ara 2009

Re: temayı ekranı kaplatmak

tesekur ederım kardes yardımların ıcıcın

mirac · 14 Şub 2010

Re: temayı ekranı kaplatmak

Header ile footer'ı iki yana yaslayabilirmiyiz bağımsız olarakmı çalışıyor ana sayfadan..
Mesela ana sayfa genişliği %80 veya 960 kalacak, alt ve üst bölümler %100 olarak iki yana yaslanacak.. Böyle bi şansımız varmıdır sayın admin'im

admin · 25 Şub 2010

Re: temayı ekranı kaplatmak

css dosyasında #content width: 580px; width değerini düşürüp

#column_right deki margin-left: 10px ve #column_left margin-right: 10px; değerlerini yükseltmen lazım

denemedim ama sanırım bu şekilde olması lazım

mirac · 25 Şub 2010

Re: temayı ekranı kaplatmak

Süpersin eka7a.. anasayfa genişliğini 100% yaptım iki yana yaslandı site komple.. Block ayarlarınada dıştan 10% değeri verdim site tam istediğim gibi oldu.. Çok teşekkür ederim..

zerodegree · 5 Mar 2010

Re: temayı ekranı kaplatmak

arkadaşlar temanın renklerini düzenlemek için sanırım birincisi kodlar yardımıyla ikincisi ise tema klasöründeki reimleri düzenleyerek oluyor. aslında bu konu biraz daha genişletilebilse herkesin kendi üretkenliğini ortaya koyabileceğine inanıyorum farklı temalar yapılıp burada herkese sunulabilir

mirac · 11 Mar 2010

RE: temayı ekranı kaplatmak

Resimler değilde renkler ve boyutlarla oynamak istiyorsanız Tıklayınız

Sweetling · 14 Mar 2010

RE: temayı ekranı kaplatmak

Selam arkadaşlar, ben sitenin sağındaki modüllerin hepsini sol tarafa attım
ve orta kısmı en sağa dayadım, aynı şekilde yapmak isteyen olursa

catalog/view/theme/default/stylesheet/stylesheet.css dosyasında

PHP:

#content {
	margin-left: 190px;
	margin-right: 190px;
	margin-bottom: 10px;

satırlarını bulun ve
sağa dayamak için margin-right: 190px; satırında 190'nı 0 yapın
sola dayamak için margin-left: 190px; satırında 190'nı 0 yapın

kuzumbenim · 10 Nis 2010

RE: temayı ekranı kaplatmak

dgdizayn' Alıntı:
catalog\view\theme\default\stylesheet\stylesheet.css AC

Kod:

/* layout */ #container { width: 960px; margin-left: auto; margin-right: auto; text-align: left; background: #FFFFFF;

Duzenlemen gereken yer: width: 960px;
Buradan genisligi ayarlayabılırsınız

aynısı ama benimki

Kod:

 html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0px;
padding: 0px;
text-align: center;
background: #ff9999;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input, textarea, select {
margin: 3px 0px;
}
a, a:visited {
color: #1B57A3;
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: none;
}
a img {
border: none;
}
p {
margin-top: 0px;
}
//* layout */
#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background: #FFFFFF;
}
#header .div2 {
float: left;
padding-top: 15px;
padding-left: 15px;
}
#header .div3 {
float: right;
padding-top: 7px;
height: 38px;
}
#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
}
#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
background: url('../image/pempe.png') no-repeat;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
background: url('../image/tab_2.png') no-repeat;
color: #FFF;
padding-bottom: 10px;
z-index: 3;
}
#header .div5 {
clear: both;
}
#header .div5 .left {
background: url('../image/header_1_left.png') no-repeat;
width: 5px;
height: 40px;
float: left;
}
#header .div5 .right {
background: url('../image/header_1_right.png') no-repeat;
width: 5px;
height: 40px;
float: right;
}
#header .div5 .center {
background: url('../image/header_1_center.png') repeat-x;
height: 40px;
margin-left: 5px;
margin-right: 5px;
}
#header .div6 {
clear: both;
margin-bottom: 10px;
}
#header .div6 .left {
background: url('../image/header_2_left.png') no-repeat;
width: 5px;
height: 32px;
float: left;
}
#header .div6 .right {
background: url('../image/header_2_right.png') no-repeat;
width: 5px;
height: 32px;
float: right;
}
#header .div6 .center {
background: url('../image/header_2_center.png') repeat-x;
height: 32px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
}
#header .div7 {
float: right;
padding-top: 2px;
}
#header .div8 {
float: left; margin-top: 6px;
}
#header .div9 {
float: left;
}
#header .div10 {
float: left;
margin-top: 2px;
}
#search {
padding-top: 7px;
padding-left: 5px;
color: #FFF;
font-weight: bold;
}
#search select {
border: 1px solid #0A5391;
padding: 1px;
}
#search a {
color: #FFF;
}
#search input {
border: 1px solid #0A5391;
padding: 2px;
}
#breadcrumb {
float: left;
padding-top: 7px;
padding-bottom: 11px;
height: 13px;
margin-bottom: 10px;
color: #000000;
}
.switcher {
float: right;
margin-top: 3px;
margin-left: 10px;
}
.switcher a {
text-decoration: none;
display: block;
}
.switcher .selected {
background: #FFFFFF url('../image/switcher.png') repeat-x;
}
.switcher .selected a {
border: 1px solid #CCCCCC;
background: url('../image/arrow_down.png') 116px center no-repeat;
color: #666666;
padding: 2px 5px 2px 5px;
width: 121px;
}
.switcher .selected a:hover {
background: #F0F0F0 url('../image/arrow_down.png') 116px center no-repeat;
}
.switcher .option {
position: absolute;
z-index: 3;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background-color: #EEEEEE;
display: none;
width: 131px;
}
.switcher .option a {
color: #000;
padding: 3px 5px 3px 5px;
}
.switcher .option a:hover {
background: #FFC;
}
.switcher img {
position: relative;
top: 1px;
}
#column_left {
float: left;
width: 180px;
margin-right: 10px;
clear: left;
}
#column_right {
float: right;
width: 180px;
margin-left: 10px;
clear: right;
}
#content {
margin-left: 190px;
margin-right: 190px;
margin-bottom: 10px;
}
#content .top .left {
background: url('../image/content_top_left.png') no-repeat;
width: 5px;
height: 32px;
float: left;
}
#content .top .right {
background: url('../image/content_top_right.png') no-repeat;
width: 5px;
height: 32px;
float: right;
}
#content .top .center {
background: url('../image/content_top_center.png') repeat-x;
margin-left: 5px;
margin-right: 5px;
}
#content .top h1 {
padding: 8px 0px 8px 7px;
}
#content h1, .heading {
color: #99cccc;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
}
.heading {
border-bottom: 1px solid #DDDDDD;
padding-bottom: 3px;
margin-bottom: 10px;
}

/* blockların arka planını komple değiştirmek için alttaki bölümü kullan */

#content .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #ccccff ;
padding: 10px 10px 1px 10px;
min-height: 380px;
}
#content .bottom .left {
background: url('../image/content_bottom_left.png') no-repeat;
width: 5px;
height: 5px;
float: left;
}
#content .bottom .right {
background: url('../image/content_bottom_right.png') no-repeat;
width: 5px;
height: 5px;
float: right;
}
#content .bottom .center {
background: url('../image/content_bottom_center.png') repeat-x;
height: 5px;
margin-left: 5px;
margin-right: 5px;
}
.box {
margin-bottom: 10px;
background: url('../image/box_top.png') no-repeat;
}
.box .top {
padding: 8px 0px 8px 7px;
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.box .top img {
float: left;
margin-right: 5px;
}

/* ürün listesinin arka planını değiştirmek için alttaki bölümü kullan */

.box .middle {
border-left: 1px solid #ff3300;
border-right: 1px solid #ff3300;
background: #ccccff;
padding: 10px;
}
.box .bottom {
height: 5px;
background: url('../image/box_bottom.png') no-repeat;
}
.success {
padding: 5px 0px;
margin-bottom: 10px;
background: #E4F1C9;
border: 1px solid #A5BD71;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.warning {
padding: 5px 0px;
margin-bottom: 10px;
background: #FFDFE0;
border: 1px solid #FF9999;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.wait {
padding: 5px 0px;
margin-bottom: 10px;
background: #FBFAEA;
border: 1px solid #EFEBAA;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.required {
color: #FF0000;
font-weight: bold;
}
.error {
color: #FF0000;
display: block;
}
.help {
cursor: pointer;
}
.tooltip {
border: 1px solid #FDDA5C;
background: #FBFF95;
padding: 5px;
font-size: 11px;
width: 250px;
}
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
.button {
padding-left: 8px;
display: inline-block;
margin-right: 5px;
background: url('../image/button_left.png') top left no-repeat;
text-decoration: none;
color:#FFF;
}
.button span {
color: #FFF;
display: block;
padding: 4px 12px 5px 5px;
background: url('../image/button_right.png') top right no-repeat;
}
.buttons {
background: #F8F8F8;
border: 1px solid #DDDDDD;
padding: 5px;
margin-bottom: 10px;
}
.buttons input {
padding: 0px;
margin: 0px;
}
.buttons table {
width: 100%;
border-collapse: collapse;
}
.buttons table td {
vertical-align: middle;
}
.content {
margin-bottom: 10px;
width: 100%;
}

/* son ürünlerin arka planını değiştirmek için alttaki bölümü kullan */

.list {
margin-bottom: 10px;
width: 100%;
background: #ccccff ;

}

.list td {
text-align: center;
vertical-align: top;
background-color:#ccccff;
background-repeat: no-repeat;
padding-bottom: 10px;
 
}

}
.sort {
margin-bottom: 10px;
background: #F8F8F8;
height: 30px;
width: 100%;
}
.sort .div1 {
float: right;
margin-left: 5px;
padding-top: 6px;
padding-right: 9px;
}
.sort .div2 {
text-align: right;
padding-top: 9px;
}
.sort select {
font-size: 11px;
margin: 0;
padding: 0;
}
.pagination {
display: inline-block;
width: 100%;
background: #F8F8F8;
margin-bottom: 10px;
}
.pagination .links, .pagination .results {
padding: 7px;
}
.pagination .links {
float: left;
}
.pagination .links a {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
}
.pagination .links b {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
background: #FFFFFF;
}
.pagination .results {
float: right;
}
.tabs {
width: 100%;
height: 31px;
margin-bottom: 0px;
}
.tabs a {
float: left;
display: block;
padding: 6px 15px 7px 15px;
margin-right: 2px;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab_3.png') repeat-x;
color: #000000;
font-weight: bold;
font-size: 13px;
text-decoration: none;
z-index: 1;
position: relative;
top: 1px;
}
.tabs a.selected {
background: #FFFFFF url('../image/tab_3.png') repeat-x;
border-bottom: 0px;
padding-bottom: 8px;
z-index: 3;
}
.tab_page {
border: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px;
display: block;
z-index: 2;
margin-bottom: 10px;
}
#footer {
width: 100%;
clear: both;
padding-top: 5px;
border-top: 1px solid #DDDDDD;
}
#footer .div1 {
float: left;
text-align: left;
}
#footer .div2 {
float: right;
text-align: right;
}
#category ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/bullet_1.png');
}
#information ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/bullet_2.png');
}
.cart {
border-collapse: collapse;
width: 100%;
border: 1px solid #EEEEEE;
margin-bottom: 10px;
}
.cart th {
background: #EEEEEE;
padding: 5px;
font-weight: normal;
}
.cart td {
padding: 5px;
}

ama tema geniş neden acaba

mirac · 10 Nis 2010

RE: temayı ekranı kaplatmak

Temanda genişlik sorunu yok.. Kendi templatemde normal tam ekran çalıştı.. Tarayıcının çerezlerini silmeyi dene..

kuzumbenim · 10 Nis 2010

RE: temayı ekranı kaplatmak

960 kısa olması lazım değilmi usta ?

ben temayı daraltmak istiyorum 960 da orjinali olması lazım ama olmuyor kodda bi hata var

mirac' Alıntı:
Temanda genişlik sorunu yok.. Kendi templatemde normal tam ekran çalıştı.. Tarayıcının çerezlerini silmeyi dene..

tamam saol oldu yardımınla

huseyin44 · 13 Nis 2010

RE: temayı ekranı kaplatmak

Merhabalar Smrel temada sayfayı nasıl genişletebiliriz değiştirmemiz gereken yerler neresi bu konuda yardımcı olursanız sevinirim

mirac · 13 Nis 2010

RE: temayı ekranı kaplatmak

Aynı şekilde değiştirebilirsiniz.. Arkadaşın css dosyasında kod fazlalığı kalmış başka bişey silerken o yüzden komut almıyordi bir yerden sonra..

huseyin44 · 17 Nis 2010

RE: temayı ekranı kaplatmak

Selam ben 1.4.0 ve smrel tema kullanıyorum bahsettiginiz

/* layout */
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #FFFFFF;
bu bölüm deki ayarı

/* layout */
#container {
width: 1020px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #FFFFFF;

Şeklinde değiştirerek sayfayı genişletmek istiyorum fakat sayfanın her tarafı eşit şekilde genişlemiyor üst kısım genişliyor başka yapılması gereken ayarlar mı var bunun dışında

mirac · 17 Nis 2010

RE: temayı ekranı kaplatmak

huseyin44' Alıntı:
Selam ben 1.4.0 ve smrel tema kullanıyorum bahsettiginiz

/* layout */
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #FFFFFF;
bu bölüm deki ayarı

/* layout */
#container {
width: 1020px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #FFFFFF;

Şeklinde değiştirerek sayfayı genişletmek istiyorum fakat sayfanın her tarafı eşit şekilde genişlemiyor üst kısım genişliyor başka yapılması gereken ayarlar mı var bunun dışında

Kullandığınız tema genişlemeye müsait bir tema değil.. Komple modifiye etmeniz gerekli css dosyasını nerdeyse..

Default temada container bölümündeki widht bölümüne 100% değeri verdiğinizde iki yana yaslanır temanız..

huseyin44 · 17 Nis 2010

RE: temayı ekranı kaplatmak

1.4.0 icin geniş tema ne onerebilirsiniz şu an genelde 1.4.7 üzerine tema calısması yapılıyor sanırım veya katagoriler,alışveriş sepeti filan yazan yerlerdeki renkleri nasıl değiştirebiliriz en azından 1.4.7 icin yapılan temalardaki başlık kısmındaki renklerle uyumlu bir tema yapmak istesek diye soruyorum.

kuzumbenim · 17 Nis 2010

RE: temayı ekranı kaplatmak

huseyin44' Alıntı:
1.4.0 icin geniş tema ne onerebilirsiniz şu an genelde 1.4.7 üzerine tema calısması yapılıyor sanırım veya katagoriler,alışveriş sepeti filan yazan yerlerdeki renkleri nasıl değiştirebiliriz en azından 1.4.7 icin yapılan temalardaki başlık kısmındaki renklerle uyumlu bir tema yapmak istesek diye soruyorum.

sitede arama yaparsanız bulursunuz

kripto35 · 17 Eyl 2010

RE: temayı ekranı kaplatmak

mirac' Alıntı:
Süpersin eka7a.. anasayfa genişliğini 100% yaptım iki yana yaslandı site komple.. Block ayarlarınada dıştan 10% değeri verdim site tam istediğim gibi oldu.. Çok teşekkür ederim..

ya bende siteyi ekrana kaplattım % kullanarak ama sağ ve sol blokları %10 kadar içeri çekmek istiyorum tam kenarlara yapışmasınlar yani. Mirac kardeş sen yapmışın %10 olayını ama ben block ayarlarını bulamadım. tüm ayarları kurcaladım nerdeyse ama değiştiremedim bana bi yardım edermisin

mirac · 17 Eyl 2010

RE: [CSS] Temayı Ekrana Kaplatmak - Tema Genişliği

\catalog\view\theme\Kullandığın Tema\stylesheet\stylesheet.css Aç..

Bul..

Kod:

#column_left {
    float: left;
    width: 180px;
    margin-right: 10px;
    clear: left;
}
#column_right {
    float: right;
    width: 180px;
    margin-left: 10px;
    clear: right;
}

Değiştir..

Kod:

#column_left {
    float: left;
    width: 180px;
    margin-right: 10px;
    margin-left: 10px;
    clear: left;
}
#column_right {
    float: right;
    width: 180px;
    margin-left: 10px;
    margin-right: 10px;
    clear: right;
}

kripto35 · 17 Eyl 2010

RE: [CSS] Temayı Ekrana Kaplatmak - Tema Genişliği

sizin dediğinizi yaptım ama default temada bozulma oldu ??? bide header sabit kaldı onuda aynı oranda içeriye çekmek istedim ben.

Temayı Ekrana Kaplatmak - Tema Genişliği

Administrator

OpenCart-TR

OpenCart-TR

Administrator

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR