Yönetici Panelindeki Listelerin Okunabilirliğini Artırmak

Post Reply

2 posts Page 1 of 1

Yönetici Panelindeki Listelerin Okunabilirliğini Artırmak

indirdim

Newbie

Posts

Joined

Tue Apr 17, 2012 6:27 am

Post by indirdim » Tue Apr 17, 2012 6:39 am

Merhaba Arkadaşlar,

Ben OpenCart platformunu yeni kullanmaya başladım. Her ne kadar çok fonksiyonel bir yazılım da olsa, yönetim paneli tasarım konusunda bazı eksiklikler içeriyor. Benim dikkatimi en çok çeken iste, ürünlerin, seçeneklerin, ürüne özel özniteliklerin v.s. listelenmesi için kullanılan tablonun okunmasının zor olması. Örneğin eğer bir özelliği düzenlemek istiyorsanır ve çok fazla özellik, seçenek alt alta listelenirse hangi özellik için hangi bağlantıya tıklamanız gerektiğini takip etmek zor olabiliyor.

Ben de sitil dosyalarındaki küçük bir değişiklikle bu problemi çözdüm. Hem tasarım hem kullanış açısından harika oldu. Sizinle de paylaşmak istedim. Yapmanız gereken, admin -> view -> stylesheet -> stylesheet.css dosyasında ufak bir değişiklik yapmak. Bu değişikliği yapmadan önce lütfen dosyanızın bir yedeğini alın ki deneme esnasında bir sıkıntı yaşarsanız sorunu giderme şansınız olsun.

stylesheet.css dosyasını açtıktan sonra 289. satıra gidin ya da " .list " tanımlamasını bulun. Bu noktadan itibaren ta ki " .pagination " tanımlamasına kadar sitil kodlarını aşağıdaki kod ile değiştirin.

Code: Select all

.list {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	border-collapse: collapse;
	text-align: left;
	width: 100%;
	margin-bottom: 20px;
}
.list td {
	border-bottom: 1px solid #ccc;
	color: #669;
	padding: 6px 8px;
}
.list thead td {
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
.list thead td a, .list thead td {
	text-decoration: none;
	color: #222222;
	font-weight: bold;
}
.list tbody td a {
	text-decoration: underline;
}
.list tbody td {
	vertical-align: middle;
	color: #669;
	padding: 6px 8px;
}
.list tbody tr:hover td
{
	color: #009;
	background: #eff2ff;
}
.list .left {
	text-align: left;
	padding: 7px;
}
.list .right {
	text-align: right;
	padding: 7px;
}
.list .center {
	text-align: center;
	padding: 7px;
}
.list .asc {
	padding-right: 15px;
	background: url('../image/asc.png') right center no-repeat;
}
.list .desc {
	padding-right: 15px;
	background: url('../image/desc.png') right center no-repeat;
}
.list tr.filter td {
	padding: 5px;
	background: #E7EFEF;
}

Değişikliği yaptıktan sonra dosyanızı kaydedin ve yayınlayın.

Bu düzenlemeyi Internet Explorer 8-9 ve Mozilla Firefox üzerinde deneme şansım oldu. Sorunsuz çalıştı. Umarım sizlerin de işine yarar. Bol kazançlar.

indirdim

Newbie

Posts

Joined

Tue Apr 17, 2012 6:27 am

Re: Yönetici Panelindeki Listelerin Okunabilirliğini Artırma

eka7a

Active Member

Posts

396

Joined

Sun Apr 12, 2009 12:59 am

Location

Türkiye

Post by eka7a » Wed Apr 18, 2012 4:23 am

Güzel bir çalışma. Daha kapsamlı olan ufak bir js ile de bunu yapabilirsiniz.

Kodu admin/view/template/common/footer.tpl dosyasına ya da header.tpl dosyasına ekleyebilirsiniz.

Code: Select all

<!-- add mouseover on admin list -->
<script type="text/javascript">
          $(document).ready( function(){
          	$(".list tbody td").css("background-color", "transparent");
          	$(".list tr").filter(":even").mouseover(function() {
          		$(this).css("background-color", "#cccccc"); 
          	}).mouseout(function(){
          		$(this).css("background-color", "#F4F4F8"); 
          	});
          
          	$(".list tr").filter(":odd").mouseover(function() {
          		$(this).css("background-color", "#cccccc"); 
          	}).mouseout(function(){
          		$(this).css("background-color", ""); 
          	});
          });
</script>
<!- add mouseover on admin list -->

js içindeki renk kodlarını istediğiniz kodlar ile değiştirebilirsiniz.

Windows 11 Pro Digital License Key

eka7a

Active Member

Posts

396

Joined

Sun Apr 12, 2009 12:59 am

Location - Türkiye