Archived topic
Changing Blog Styles
12 replies · Started by Sumit on May 23, 2018
Hi I am wondering how hard it is to change a blog layout to like this https://www.jonloomer.com/
I like how he has all the elements laid out. Can I achieve layout similar to that using Generate Press?
Thanks!
Hi there,
That shouldn't be hard with GP.
Which part are you stuck on? Any chance you can link me to your site so I can see the current progress?
Let me know :)
I have few questions.
1. I want to align above the image post content like this along with that underline and number of comments option. http://prntscr.com/jlrts1
2. underline effect along with link hover color, also I want to change the color of underline.
Right now these 2 should do it.
Thanks
Try this PHP snippet to move comments link up:
add_filter( 'generate_post_author_output', 'tu_categories_to_author' );
add_filter( 'generate_show_comments', '__return_false' );
function tu_categories_to_author( $output ) {
echo $output . ' - ';
if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
echo '<span class="comments-link">';
comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
echo '</span>';
}
}
Adding PHP: https://docs.generatepress.com/article/adding-php/
Then add this CSS to make them inline with author:
.blog .comments-link,
.archive .comments-link {
display: inline-block;
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Any chance you can link me to the page in question?
Should make it easier for me to nail down the rest of the code.
Let me know :)
it worked for comments.
Now I need to centre align it align and make Blog title size bigger and the other text sizes bit bigger.
I wonder how I can change line heights for that text under the blog title?
Also about the number 2. in the previous email.
I added my site.
Hi there,
1. What are you wanting to center align?
2. You can up the blog title font size by upping the size of H2 elements in "Customize > Typography > Headings", or adding some CSS like this:
h2.entry-title {
font-size: 40px;
}
3. You can up the line height like this:
.entry-meta {
line-height: 2em;
}
Let me know :)
please check to see how blog title and elements with it are aligned in the center.
Also I want to know how I can increase the content text size and make all the links bolder.
Other think I want to know is how I can add an underline hover effect on all links? Like you can see it on jonloomer.com
Thanks
Try this CSS:
header.entry-header {
text-align: center;
}
.blog .inside-article a,
.archive .inside-article a {
font-weight: 700;
}
.blog .inside-article a:hover,
.archive .inside-article a:hover {
text-decoration: underline;
text-decoration-color: #000;
}
.blog .inside-article .entry-title a:hover,
.archive .inside-article .entry-title a:hover {
text-decoration-color: #fff; /*title hover color*/
}
.blog .sidebar a:hover,
.archive .sidebar .entry-title a:hover {
text-decoration: underline;
text-decoration-color: #000;
}
This is almost there,
is it possible to change the underline color of blog title hover?
Also is it possible to make the same hover effect in the links on the sidebar?
Thanks
Also I have noticed that number of comments section have disappeared from the actual blog post. Basically when I visit the post.
Thanks Leo, you guys rock, Really like the support I am getting. Seriously only make or break for a software product is support system and GeneratePress has it nailed down.
Do you mind sharing the tool you using for this support system? Is it custom solution or it is a wordpress tool?
Thanks
Glad we have been helpful!
We are using BBPress with custom styling etc :)