• Hallo, ik gebruik WordPress 3.61 met een gecustomized DFblog thema. Onlangs heb ik de manier waarop mijn comments worden weergegeven eens wat opgefrist en ik ben tevreden op één ding na. De avatars staan nu links, maar ik zou graag zien dat de comment-text netjes rechts uitgelijnd wordt naast de avatars zonder te ‘wrappen’. Ik ben al tijden op zoek naar een manier om dat te doen en het moet mogelijk zijn, maar alles wat ik tot nu toe geprobeerd heb werkt niet. Ik ben niet onbekend met CSS, maar ook geen pro op dat gebied. Ik hoop dat iemand me kan helpen!

    De site waarop je de comments met wrapping (gebeurt alleen bij langere comments) kunt zien is http://www.estrellaweb.nl. en bij bijvoorbeeld dit artikel kun je het vooral goed zien: http://www.estrellaweb.nl/2013/10/share-your-site-deel-2/#comments. Dit is de huidige code van het comments gedeelte:

    /* Comments
    **************************************************************** */
    
    form#commentform input#submit {
    	float: right;
    }
    form#commentform .required {
    	color: red;
    }
    
    #comments {
    	line-height: 1.5em;
    	margin: 0 0 20px 0;
    	}
    
    #comments .browse {
    	clear: both;
    	height: 20px;
    	margin: 0 0 10px;
    	}
    
    .commentlist {
    	margin: 10px 0 0;
    	}
    
    .commentlist li {
    		clear:left;
    		list-style: none;
    		padding:10px;
    	}
    
    li.comment {
    	margin-bottom: 10px;
    	padding-top: 10px;
    	font-size: 12px;
    	}
    
    	.vcard img.avatar {
    		float:left;
    		border: 2px solid #eebcbe;
    		padding: 3px;
    		margin: 5px 15px 5px 0;
    		background: #fff;
    		border-radius: 50%;
    		-moz-border-radius: 50%;
    		-webkit-border-radius: 50%;
    	}
    
    	.vcard cite {
    		font-weight: bold;
    		font-size: 12px;
    	}
    	.vcard span {
    		border: 2px;
    	}
    	.commentmetadata {
    		font-size: 10px;
    	}
    
    	li.comment blockquote {
    		font-size: 12px;
    		min-height: 2em;
    	}
    	.reply {
    	border-bottom: 3px dotted #cdd;
    	padding-bottom: 10px;
    	padding-left: 70px;
    	font-size: 11px;
    	}
    
    .commentlist li.even {
    	background: #f9f9f9;
    }
    
    .commentlist li.odd {
    	background: #fff;
    }
    
    .commentlist .bypostauthor {
    
    }
    
    /* .comment-body table -> see the entry section */
    .comment-body ul,
    .comment-body ol {
    }
    .comment-body ul ul,
    .comment-body ol ol {
    	margin-bottom: 0;
    }
    .comment-body ul li {
    	list-style: circle;
    	padding: 0;
    }
    .comment-body ul ul li {
    	list-style: disc;
    	padding: 0;
    }
    .comment-body ol li {
    	list-style: decimal;
    	padding: 0;
    }
    .comment-body ol ol li {
    	list-style: lower-alpha;
    	padding: 0;
    }
    
    #respond {
    	font-size: 12px;
    	}
    	#respond p.small {
    		font-size: 10px;
    	}
    	#respond textarea {
    		width: 96%;
    	}
    	#respond div.cancel-comment-reply {
    		padding: 10px 0 0;
    	}
    
    #commentform {
    	padding-bottom: 30px;
    }

    Ik heb zelf vooral dingen bij li.comment en vcard img.avatar aangepast, maar misschien zoek ik het wel op de verkeerde plek. Ik hoop dat iemand hier een oplossing voor heeft!

1 reactie aan het bekijken (van in totaal 1)
  • Thread starter Ester Dammers

    (@rebelstar)

    Het probleem is onverwachts al opgelost, toch zelf gevonden. Heb de afbeelding “position: absolute” gegeven en de tekst een padding aan de linkerkant. Had eerder al iets dergelijks geprobeerd, maar blijkbaar net verkeerd. Op dit topic kan dus een slotje.

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Comment-text niet om avatar wrappen’ is gesloten voor nieuwe reacties.