Temayı Ekrana Kaplatmak - Tema Genişliği

admin

Administrator
Yönetici
Katılım
13 Ağu 2009
Mesajlar
3,200
Tepkime puanı
1
Puanları
38
Yaş
38
Konum
Bursa
Web sitesi
www.opencart-tr.com
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

OpenCart-TR
Katılım
28 Kas 2009
Mesajlar
16
Tepkime puanı
0
Puanları
0
Re: temayı ekranı kaplatmak

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

mirac

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

Administrator
Yönetici
Katılım
13 Ağu 2009
Mesajlar
3,200
Tepkime puanı
1
Puanları
38
Yaş
38
Konum
Bursa
Web sitesi
www.opencart-tr.com
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
9 Şub 2010
Mesajlar
12
Tepkime puanı
0
Puanları
0
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
 

Sweetling

OpenCart-TR
Katılım
9 Mar 2010
Mesajlar
42
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
31 Mar 2010
Mesajlar
29
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
RE: temayı ekranı kaplatmak

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

kuzumbenim

OpenCart-TR
Katılım
31 Mar 2010
Mesajlar
29
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
10 Nis 2010
Mesajlar
17
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
10 Nis 2010
Mesajlar
17
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
10 Nis 2010
Mesajlar
17
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
31 Mar 2010
Mesajlar
29
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
13 Eyl 2010
Mesajlar
68
Tepkime puanı
0
Puanları
0
Yaş
35
Konum
İzmir
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
13 Eyl 2010
Mesajlar
68
Tepkime puanı
0
Puanları
0
Yaş
35
Konum
İzmir
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.


hatatn.png
 
Üst