Ok sayısı yerini değiştirme

durpoy

Gamification eklentisini kullanıyorum. Anasayfa da her konudaki ana yanıt için beğeni sayısını gösteren yer var. Onu tartışmadaki yanıt sayısının altına nasıl kaydırabilirim. Resimde ok çizerek gösterdim.

Bağlantı: https://forum.sourceturk.net

Kylo

durpoy

li.item-discussion-votes {
	right: 35px;
	top: 40px;

	@media @phone {
		right: 15px;
		top: 65px;
	}
}

durpoy

Kylo teşekkür ederim.

durpoy

Tartışmaya gelen oy sayısının önünde bu şekilde font awesome ikonu var. Ama görüntüleme sayısı ve yanıt sayısı önünde ikon yok.

Masaüstü görünümdeki gibi ikonları ekleyebilir misiniz?

Bağlantı: https://forum.sourceturk.net

Mevcut cssler:

@media (min-width: 768px)
{
    .IndexPage li.item-discussion-views
    {
        margin-right: -70px;
        width: 55px;
		color: #667c99;
    }
}

li.item-discussion-votes
{
	right: 35px;
	top: 40px;
	@media @phone
    {
		right: 15px;
		top: 60px;
		background: #e8ecf3;
		color: #667c99;
		border-radius: 4px;
		font-size: 12px;
		padding: 2px 6px;
		position: absolute;
	}
}

durpoy

En son bu şekilde güncelledim. Ama görünümü tam istediğim gibi olmadı.

@media (max-width: 767px)
{
	.IndexPage li.item-discussion-views:before
	{
		display: inline-block;
		font-family: 'Font Awesome 5 Free';
		font-size: inherit;
		text-rendering: auto;
		content: '\f06e';
		float: left;
		margin-left: -21px;
		margin-top: 0;
		background: #e8ecf3;
		padding: 2px 8px;
		position: relative;
	}
	.DiscussionListItem-count:before
	{
		display: inline-block;
		font-family: 'Font Awesome 5 Free';
		font-size: inherit;
		text-rendering: auto;
		content: '\f27a';
		float: left;
		margin-left: -21px;
		margin-top: 0;
		background: #e8ecf3;
		padding: 2px 8px;
		position: relative;
	}
}

li.item-discussion-votes
{
@media @phone
    {
		right: 15px;
		top: 60px;
		background: #e8ecf3;
		color: #667c99;
		border-radius: 4px;
		font-size: 12px;
		padding: 2px 6px;
		position: absolute;
	}
}

durpoy

css ler bu şekilde. Şu an tek sorun masaüstü görünümde. eğer olumsuz oy verilmiş ise görünümde ufak bir bozukluk oluyor.

@media (max-width: 767px)
{
    .IndexPage li.item-discussion-views
    {
        display: inline-block;
		margin-top: -1px;
    }
	.IndexPage li.item-discussion-views
	{
		background: transparent;;
		color: #667c99;
		border-radius: 4px;
		font-size: 12px;
		padding: 2px 6px;
		position: absolute;
		right: 58px;
		top: 35px;
	}
	.IndexPage li.item-discussion-views:before
	{
		display: inline-block;
		font-family: 'Font Awesome 5 Free';
		font-size: inherit;
		text-rendering: auto;
		content: '\f06e';
		float: left;
		margin-left: -21px;
		margin-top: -1.75px;
		background: transparent;
		padding: 2px 8px;
		position: relative;
	}
	.DiscussionListItem-count
	{
		margin-right: -35px;
		background: transparent;
		color: #667e99;
		border-radius: 4px;
		font-size: 12px;
		padding: 2px 6px;
	}
	.DiscussionListItem-count:before
	{
		display: inline-block;
		font-family: 'Font Awesome 5 Free';
		font-size: inherit;
		text-rendering: auto;
		content: '\f27a';
		float: left;
		margin-left: -21px;
		margin-top: -2px;
		background: transparent;
		padding: 2px 8px;
		position: relative;
	}
}

@media (min-width: 768px)
{
    .IndexPage li.item-discussion-views
    {
        margin-right: -70px;
        width: 55px;
        color: #667c99;
    }
}

li.item-discussion-votes
{
	right: 35px;
	top: 40px;
	@media @phone
    {
        display: inline-block;
		font-size: inherit;
		text-rendering: auto;
		right: 15px;
		top: 60px;
		background: transparent;
		color: #667c99;
		border-radius: 4px;
		font-size: 12px;
		padding: 2px 6px;
		position: absolute;
	}
}

Kylo

durpoy Mesajındaki kodlara bakmadım, okunamayacak durumdalar. Tarayıcı konsolundan şu düzeltmeleri yapıp fazlalıkları silince istediğini elde ediyorsun:

.item-discussion-votes .icon {
	display: none;
}

.item-discussion-views::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f06e";
    padding: 2px 8px;
}

.DiscussionListItem-votes::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f164';
    padding: 2px 8px;
}

.DiscussionListItem-count::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f075";
    padding: 2px 8px;
}

.DiscussionListItem-count {
	padding-left: 0;
}

durpoy

Kylo teşekkürler.

Harici CSS’ler:
https://paste.ubuntu.com/p/CRqFgRbQd7/

Oy sayısını sağa doğru yazması gerekirken sola kaydırmış. Bunu nasıl düzeltebiliriz?

Mobil görünümde oy sayıları kısmının arka plan dikdörtgeni diğer görüntülenme sayısı ve yanıt sayısına göre küçük kalıyor. Bunu nasıl düzeltebiliriz? Aynı olmasını ayarlamak istiyorum.

Kylo

durpoy Dostum ben elimden geldiğince yardımcı olmaya çalışıyorum ama sen hiç deneyip öğrenmeye çalışmıyorsun, sürekli hazır kod istiyorsun. Kendi eklediğin gereksiz margin text-rendering float position font-size değerlerini kaldırıp diğer değerler için benim gönderdiğim kodları kullanır mısın? Bunu yapmazsan en ufak bir düzenleme için bile başkasından cevap beklemek zorunda kalırsın o yüzden biraz gayret edersen çok da zor bir şey olmadığını göreceksin.

durpoy

Kylo ben de elimden geldikçe uğraştım. Bu kadar anlıyorum belki. Kafam basmıyor. Dediginiz kodların çoğunu konu ile ilgili yerlerden zaten silmişim. Attigim paste ubuntu linkinde yok zaten. Lütfen siz bu tartismada daha yardımcı olmayın. Hatta benim hiç bir konuma lütfen yardım etmeyin. Bu sayede sinirlenmezsiniz.