Displaying comment section in Spun theme

texturedmodern · Member · Jan 30, 2015 at 5:00 pm
Copy link

Add topic to favorites
Hello,

I’m very new to the blogging world and am just beginning to learn about customization and CSS. So please bear with me if my questions are naive or the answers are seemingly self-evident!

The comment section in the Spun theme is hidden so you have to actually click on the comment button to see the section. I’d like to make it so that the section is always visible/more prominent for visitors to each post.

I’ve tried editing the CSS using some code I found on another forum but am not having any luck. It could be due my terrible knowledge of CSS and how to manipulate it and/or it could just be that I have the code wrong. Could anyone help guide me through the process?

Many thanks,
Jessica

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Jan 30, 2015 at 11:22 pm
Copy link
Please add the following CSS to the CSS Editor and see how it goes:
```
span.comments-link , div#comments-toggle {
    display: none;
}

div#comments {
    display: block;
}

.site-navigation {
margin-top: 0px;
margin-bottom: 0px;
}
```
Your question is certainly not naive :-)
texturedmodern · Member · Jan 31, 2015 at 5:14 am
Copy link
Thank you! That definitely did what I wanted to do. The only thing is that while the comments are now visible, they are at the absolute bottom of the page. Would you happen to know the code for moving them a bit higher up, hopefully above the “related” content section?

Thanks again,
Jessica
staff-happychia · Staff · Jan 31, 2015 at 8:47 am
Copy link
I don’t know how can we reorder the Comments and Recent Posts sections.

But we can pull the comments box further up by removing the bottom padding and margin of the post as following:

First remove the following rule from the existing custom CSS:
```
.site-navigation {
margin-top: 0px;
margin-bottom: 0px;
}
```
Then add the following CSS:
```
.site-content .site-navigation{
    margin-top: 0;
    margin-bottom: 0
}

.single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results{
padding-bottom: 0px;
margin-bottom: 0px;
}
```

No items found.