Customizing comments in MH Magazine theme

nmegwalu · Member · Jun 26, 2014 at 12:54 pm
Copy link

Add topic to favorites
Hello!
I’d love to get some help on customizing my comments section with CSS on the MH Magazine theme. It’s currently not clear enough, and difficult to follow the threads…

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jun 26, 2014 at 4:26 pm
Copy link
I can help you get started! Keep in mind that CSS can be tailored to each theme, and each task, differently and there’s always more than one way to accomplish a given task in CSS. Because of that, there probably isn’t any set thread to follow to learn how to make changes.

I checked the comments section on your latest post at http://veryloudyouth.org/2014/05/27/free-our-minds-and-free-our-girls/ and I see that you have added the following CSS:
```
.commentlist .comment {
	border: 1px solid black;
	margin-bottom: 10px;
}

.commentlist .comment-text {
	padding: 10px;
}
```
Do you still need help customizing your comments further than those changes you applied earlier?

If you’re interested in learning more about CSS in general, this is a great tutorial if you’re just starting out:
http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b
niftitalks · Member · Jun 26, 2014 at 5:44 pm
Copy link
Yes! I do still need help. I tried changing the names in the comment section to orange, but it skips the names, (when there’s no link) and targets the date. I was hoping to get help fixing that.
designsimply · Member · Jun 26, 2014 at 6:06 pm
Copy link
I checked http://veryloudyouth.org/2014/05/27/free-our-minds-and-free-our-girls/ and both the comment names look orange to me there.

Let’s look at a very specific example. Can you link to to one of posts that has a comment where the name is skipped (not orange) so I can take a closer look?
nmegwalu · Member · Jun 26, 2014 at 6:15 pm
Copy link
take a look here:
http://veryloudyouth.org/2014/06/19/professor-university-of-lagos/
niftitalks · Member · Jun 26, 2014 at 7:21 pm
Copy link
Use the link above
Sorry for using different usernames. Same person!
designsimply · Member · Jun 26, 2014 at 7:57 pm
Copy link
Thanks for including a link (links are sooo helpful).

I looked at http://veryloudyouth.org/2014/06/19/professor-university-of-lagos/ and I see that the name Jamike in the comments is gray because of just what you said, it’s not linked.

I also see that this snippet of CSS from your CSS is turning the first link inside comments orange:
```
.vcard.meta a:first-of-type {
	color: #FAA543
}
```
I also see that in the HTML structure, there is no wrapper around names in comments that aren’t linked, so there’s really no way to use CSS to target just the name only. One possible workaround though would be to turn all of the text in the top part of comments orange:
```
.vcard.meta {
	color: #faa543;
}
```
The only downside is that it turns the “//” separators orange too.
nmegwalu · Member · Jun 26, 2014 at 8:08 pm
Copy link
You know, I can’t complain… I think its still better defined this way.

Is it possible to disable the // separators?
designsimply · Member · Jun 27, 2014 at 1:19 am
Copy link
There isn’t a way to disable the // separators that I could figure out. They’re just not separated out in the code in any way, so there’s no way to attach to just those pieces of the text using CSS.

You might try asking the theme authors if they would be willing to add some HTML to the theme to make it so you can target unlinked names in comments and separators using CSS. It doesn’t seem too unreasonable a request to me, and there is a forum where you can ask the theme authors directly at http://premium-themes.forums.wordpress.com/forum/mh-magazine if you’d like to try. Be super specific in your request with a link to a page where they can see an example, and include a note about what name you want to change to orange (i.e. Jamike) and what CSS you tried to use that didn’t work.
niftitalks · Member · Jun 27, 2014 at 2:51 am
Copy link
Awesome. Sounds like a plan. Thanks a ton for your help!!

No items found.