Blog editing: Changing appearance

Topic Resolution: Resolved

This topic has 9 replies, 2 voices, and was last updated 6 years, 6 months ago by Harry.

Viewing 9 reply threads

Save

Author

Posts
- October 13, 2017 at 9:21 pm #11716
 lorry
 Hello
 
 On picture 1 you can see our Blog page. On picture 2 you can see what we want it to look like. Excatly the same as picture 2.
 1. Get rid of black rectangles in Photo
 2. Get rid of Title in Photo
 3. Put title underneath the picture
 4. no Author name, no comments
 How can we get our blog to look like picture 2?
 
 Thanks!
 
 picture 1
 
 picture 2
- October 13, 2017 at 11:22 pm #11724
 
 Harry
 
 Hi,
 
 You can make this layout by follow the steps:
 
 1. Go to Theme option > Blog and follow this screen shot
 
 2. Add custom css in JanStudio > Theme Option > General Layout > Custom CSS
 
 .jas-blog .jas-masonry .inside-thumb {
 left: 0;
 right: 0;
 bottom: 0;
 padding: 20px 15px;
 position: relative;
 background: none;
 color: #4d5959;
 }
 .jas-blog .jas-masonry .inside-thumb .post-title a, .jas-blog .jas-masonry .inside-thumb a:not(.cg) { color: #4d5959;}
 .jas-blog .inside-thumb .post-meta span:not(.cat) { display: none;}
 article.post { margin-bottom: 60px;}
 
 Best regards
 
 Harry
 Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio
- October 14, 2017 at 3:27 am #11732
 lorry
 Hello,
 
 Your CSS code resolved only half of my issues in the blog.
 
 I need to:
 1. Make all pictures in the blog same size like the one with house
 2. Eliminate Comment Number and Icon in the blog page, but not in the post
 3. Eliminate the first sentences of the blog text underneath the picture in the blog page
 Thanks!
- October 14, 2017 at 10:12 am #11742
 
 Harry
 
 Hi,
 
 1. You need add more css
 
 .jas-blog .post .post-thumbnail {
 margin-bottom: 0;
 max-width: 100%;
 height: 300px;
 overflow: hidden;
 display: inline-block;
 }
 .jas-blog .post-thumbnail img {
 width: auto;
 min-height: 300px;
 max-width: inherit;
 }
 
 .jas-blog .post-action {
 border: none;
 padding: 8px 20px;
 text-align: center;
 display: block;
 }
 
 .jas-blog .read-more.pr {
 text-align: center;
 display: inline-block;
 padding: 5px 10px;
 border: 1px solid;
 }
 
 2. You can delete first sentences in your blog post by add read more before first sentence.
 
 Best regards
 
 Harry
 Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio
- October 18, 2017 at 6:01 am #11960
 
 lorry
 
 Hello,
 
 I could not finish the blog because of some details that are wrong or missing. Actually I have the following CSS that you can check.
 
 .jas-blog .jas-masonry .inside-thumb {
 left: 0;
 right: 0;
 bottom: 0;
 padding: 20px 15px;
 position: relative;
 background: none;
 color: #4d5959;
 }
 .jas-blog .jas-masonry .inside-thumb .post-title a, .jas-blog .jas-masonry .inside-thumb a:not(.cg) { color: #4d5959;}
 .jas-blog .inside-thumb .post-meta span:not(.cat) { display: none;}
 article.post { margin-bottom: 60px;}
 
 .jas-blog .post .post-thumbnail {
 margin-bottom: 0;
 max-width: 100%;
 height: 300px;
 overflow: hidden;
 display: inline-block;
 }
 .jas-blog .post-thumbnail img {
 width: auto;
 min-height: 300px;
 max-width: inherit;
 }
 
 .jas-blog .post-action {
 border: none;
 padding: 8px 20px;
 text-align: center;
 display: block;
 }
 
 .jas-blog .read-more.pr {
 text-align: center;
 display: inline-block;
 padding: 5px 10px;
 border: 1px solid;
 }
 
 The problems are (look attachments)
 
 1- The first picture shows the situation before we added the entire CSS (only half). The idea was to delete only the two red circles (first sentences of text and comments) and have the pictures in the same size (which was solved).
 
 What did not work was: The first sentence is still there and the comments too. I do not want the solution of adding a ”read more” in the text to make the sentences disappear.
 
 2- In the second and third pic I noted that the “READ more” button is in the middle which is fine, but I still have the comments in the blog page. I do not want this button. Also I have the beginning of text and When I add the read more in the post is not fixed, I would like to have no text there and only the title.
 
 3- When I upload the picture, the tittle disapears. I want the tittle underneath the picture together with a read more button and NO comments and NO beginning of text. Thanks
- October 18, 2017 at 11:35 am #11966
 
 Harry
 
 Hi,
 
 Sorry because the code still not correct, you can change prev code to
 
 .jas-blog .jas-masonry .inside-thumb .post-title a,
 .jas-blog .jas-masonry .inside-thumb a:not(.cg) { color: #4d5959;}
 .jas-blog .inside-thumb .post-meta span:not(.cat) { display: none;}
 article.post { margin-bottom: 60px;}
 .jas-blog .post .post-thumbnail > a {
 margin-bottom: 0;
 max-width: 100%;
 height: 300px;
 overflow: hidden;
 display: inline-block;
 }
 .jas-blog .post-thumbnail img {
 width: auto;
 min-height: 300px;
 max-width: inherit;
 }
 .jas-blog .comments-link { display: none;}
 .jas-blog .read-more.pr {
 text-align: center;
 display: inline-block;
 padding: 5px 10px;
 border: 1px solid;
 }
 .read-more:hover i {
 opacity: 0;
 right: 0;
 }
 
 2. If you want hide first
 
 You have to switch editor to classic
 
 and add custom css code
 
 .jas-blog .post-content {
 text-indent: -9999em;
 }
 .jas-blog .post-action {
 border: none;
 padding: 8px 20px;
 text-align: center;
 display: block;
 text-indent: 0;
 margin-top: -50px;
 }
 
 Best regards
 
 Harry
 Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio
- October 18, 2017 at 12:13 pm #11970
 
 lorry
 
 Hello,
 
 It worked, but when I use columns format for the text, the “read more” button move to the side and the text appear in the blog page. Do you know some solution?
 
 Thanks! (I added attachments)
- October 18, 2017 at 2:36 pm #11976
 
 Harry
 
 Hi,
 
 For this case if you want remove the first sentences you can’t use Page builder for blog post.
 
 If you want to use page builder you have keep first sentences and don’t make first row – one column for only first sentences with readmore button. and split second row with more column.
 
 Best regards
 
 Harry
 Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio
- October 18, 2017 at 10:52 pm #12019
 
 lorry
 
 Hi,
 
 I am sorry, I am not sure if I understood well. Here is what I tried- I added a row on the top of the columns row and it did not work. When I work with the columns the Read More button is still not centered and the text of the columns still appears on the blog page.
 
 Can you please explain what is happening?
 
 thanks
- October 18, 2017 at 11:04 pm #12021
 
 Harry
 
 Please add readmore to first row to make it center. Now you add readmore on content of 2nd row. so it can’t center.
 
 Regards
 
 Harry
 Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio
Author

Posts