Home Forums Themes Support Gecko Blog editing: Changing appearance

Topic Resolution: Resolved

This topic contains 9 replies, has 2 voices, and was last updated by  Harry 1 month, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #11716
    lorry
    Supported

    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 1

    picture 2

    picture 2

    #11724

    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

    #11732
    lorry
    Supported

    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!

    #11742

    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

    #11960
    lorry
    Supported

    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.

    <span style=”color: #0000ff;”>.jas-blog .jas-masonry .inside-thumb {</span>
    <span style=”color: #0000ff;”>left: 0;</span>
    <span style=”color: #0000ff;”>right: 0;</span>
    <span style=”color: #0000ff;”>bottom: 0;</span>
    <span style=”color: #0000ff;”>padding: 20px 15px;</span>
    <span style=”color: #0000ff;”>position: relative;</span>
    <span style=”color: #0000ff;”>background: none;</span>
    <span style=”color: #0000ff;”>color: #4d5959;</span>
    <span style=”color: #0000ff;”>}</span>
    <span style=”color: #0000ff;”>.jas-blog .jas-masonry .inside-thumb .post-title a, .jas-blog .jas-masonry .inside-thumb a:not(.cg) { color: #4d5959;}</span>
    <span style=”color: #0000ff;”>.jas-blog .inside-thumb .post-meta span:not(.cat) { display: none;}</span>
    <span style=”color: #0000ff;”>article.post { margin-bottom: 60px;}</span>

    <span style=”color: #0000ff;”>.jas-blog .post .post-thumbnail {</span>
    <span style=”color: #0000ff;”> margin-bottom: 0;</span>
    <span style=”color: #0000ff;”> max-width: 100%;</span>
    <span style=”color: #0000ff;”> height: 300px;</span>
    <span style=”color: #0000ff;”> overflow: hidden;</span>
    <span style=”color: #0000ff;”> display: inline-block;</span>
    <span style=”color: #0000ff;”>}</span>
    <span style=”color: #0000ff;”>.jas-blog .post-thumbnail img {</span>
    <span style=”color: #0000ff;”> width: auto;</span>
    <span style=”color: #0000ff;”> min-height: 300px;</span>
    <span style=”color: #0000ff;”> max-width: inherit;</span>
    <span style=”color: #0000ff;”>}</span>

    <span style=”color: #0000ff;”>.jas-blog .post-action {</span>
    <span style=”color: #0000ff;”>border: none;</span>
    <span style=”color: #0000ff;”>padding: 8px 20px;</span>
    <span style=”color: #0000ff;”>text-align: center;</span>
    <span style=”color: #0000ff;”>display: block;</span>
    <span style=”color: #0000ff;”>}</span>

    <span style=”color: #0000ff;”>.jas-blog .read-more.pr {</span>
    <span style=”color: #0000ff;”>text-align: center;</span>
    <span style=”color: #0000ff;”>display: inline-block;</span>
    <span style=”color: #0000ff;”>padding: 5px 10px;</span>
    <span style=”color: #0000ff;”>border: 1px solid;</span>
    <span style=”color: #0000ff;”>}</span>

    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

    #11966

    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

    #11970
    lorry
    Supported

    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)

    #11976

    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

    #12019
    lorry
    Supported

    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

    #12021

    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

     

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.