Link to the category from bar: category page improvements

  • Author
    Posts
  • #136765

    I would like to improve some things on the page … of linking to a category. For example we take this page into account https://intellettualemoderno.com/category/letteratura-straniera/
    I would like to:
    1) Delete / Hide the word “Category: Foreign Literature” (this applies to each page of each category)
    2) Delete those few lines of text that are displayed
    3) Shrink a little the photo
    To make you understand (if the translation with google translate is wrong) I would like to change these things: https://imgur.com/a/jUMWIpF

    I would like to get this final effect (I modified the photo with Paint): https://imgur.com/a/YSwoqQA

    Thank you. I trust in your brilliant help. You are very kind

    The blog I need help with is intellettualemoderno.com.

    #136792

    binarymoon
    Theme Author

    Hi there. You will need the following css:

    1) hide the category title

    .archive .title { display: none; }

    2) Hide archive excerpt

    .archive article p { display: none; }

    3) Shrink photo. The first width is the photo, and the second is the title and excerpt. You will need to tweak both sizes or you will end up with large gaps between the photo and text. The two values should add up to 100%, so set the image to the size you want, and then do 100 – the new width to work out the second size.

    .main article.post-archive.has-post-thumbnail.layout-horizontal-left a.thumbnail {
    width: 30%;
    }
    .main article.post-archive.has-post-thumbnail.layout-horizontal-left .entry {
    width: 70%;
    }
    #136800

    Thank you very much, you are kind and patient. I would like to ask you other things about this page:

    1) How can I put a horizontal line between one post and another? A line to divide the two photos/post/square

    2) How can I change the size of the title text?

    3) How can I reduce the space between one post and another? Then reduce the space between the square above and the square below. There is too much white space

    Thank you :)

    #136804

    Instead, can you view posts this way? (example): https://imgur.com/a/5tJLmyE

    I hope so :'(
    The theme you created is really nice, but some little things need to be improved. I confide in your brilliant help

    #136860

    binarymoon
    Theme Author

    Add a border and reduce the space between articles

    .archive article.post-archive {
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
    }

    Post title font size:

    .archive .main article h2.posttitle {
    font-size: 100%;
    }
    #136861

    binarymoon
    Theme Author

    If you want to change the layout so the posts are in a grid then you should ignore the code I gave you previously and switch the archive post layout in the Customizer to use the ‘thumbnails full size above post’ layout. I can then give you some css to turn them into a grid.

    #136871

    The result is not the best. I entered your code, of course it works and I thank you so much, but the site still gives me an unprofessional impression. Maybe with the layout and the grid posts it’s better >>> esempio https://imgur.com/a/5tJLmyE

    Could you please write the code for me? Excuse me for writing you a lot in the last few days. I’m not a webmaster, I’m a simple enthusiast and I can not do much.
    If all people had your kindness, the world would be a better place
    Thank you

    #136888

    binarymoon
    Theme Author

    To use the grid layout you need to change the post layout as described in my previous message and then add the following css.

    .archive .main #main-content {
    display: flex;
    flex-wrap: wrap;
    }
    .archive .main article.post-archive {
    width: 50%;
    }

    You will also probably need to remove the custom css that sets the widths of the image and title.

    #136891

    I deleted the previous css and I entered this that you gave me. I also set “use the ‘thumbnails full size above post’ layout. Of your code I set:width: 31%;
    I have this result: https://imgur.com/a/pppfGXS

    But there is a problem:

    1) Posts are apt, united, attached to each other: I would like a little space between one post and another

    2) The images of the posts are of different sizes. How to set them all the same size? That is, making squares all the same on this page (no the image inside the post).
    P.S: I do not know, if in this case, it is important to say: Inside the post I inserted a css to set all the images to the same size. To the author just insert the image inside the post and it is automatically proportioned. It works well, everything is ok.

    #136898

    binarymoon
    Theme Author

    To fix the spacing between items change this:

    .archive .main #main-content {
    display: flex;
    flex-wrap: wrap;
    }

    To this:

    .archive .main #main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }

    To make the images the same size use:

    .archive .main article.post-archive a.thumbnail img {
    height: 10rem;
    object-fit: cover;
    }
    #136901

    Thanks for the codes. :)

    Things are much better (look at https://intellettualemoderno.com/category/letteratura-straniera/), but there is something that does not convince me:

    1) Can I choose the dimensions (I would like them a little smaller) of the author and the date?

    2) Perhaps I remain only the author. If I do this, how can I hide only the date? That is to hide “ON 6 NOVEMBER 2018”

    3) Can I choose the dimensions of the vertical length of the gray separator line? I would like it 1 cm shorter.

    4) Can I choose the distance of the white space … between one post and another?

    Thank you and I’m sorry for the many questions. Thanks again, you’re very kind

    #136904

    Ah, another question, I had forgotten.
    5) Is there no way to align the image and the title? As well as from example photos https://imgur.com/a/IevNYQc

    #136942

    Help, please :'(

    #137000

    binarymoon
    Theme Author

    1) author and date size:

    .archive .entry .postmetadata {
    font-size: 0.5em;
    }

    2) hide the date. Go to the Customizer > content options > untick post date

    3) The grey line is the size of the box that holds the post content. The only way to make it shorter is to remove the padding on the box.

    .archive .main article.post-archive .entry {
    padding-bottom: 0;
    }

    4) margin between posts

    .archive .main article.post-archive {
    margin-bottom: 1.5rem;
    }

    5) Align post title with edge of image.

    .archive .main article.post-archive .entry {
    padding-left: 0;
    }
    #137053

    GENIUS, thank you

    #137081

    Wait, unfortunately the problem is not solved: you forgot something, that is the mobile version (phone) I agree only now, because the web version is fine, but there are problems with the phone version. I’m a bit pessimistic to solve this problem, but I hope in your genius.

    The problem is in the links that call the page of a category: https://intellettualemoderno.com/category/letteratura-straniera/
    In the web version I inserted a grid with 3 posts. Everything is ok, but in the phone you see badly (here’s the problem https://imgur.com/a/QDX0HyB): you see bad picture, but in particular the title text … too broken and short.

    I tried to change the grid, with 2 posts instead of 3. It goes a little better (here is https://imgur.com/a/Fgc5qd7), but there is always the problem of the title text … too broken and short.

    I’ve also tried to reduce the size of the title text, but it’s not good enough. How can I solve? I prefer the 3 post grid, but the 2 post grid is fine too: the problem is that title text … too broken and short.

    Thank you

    #137092

    you forgot to answer here. thank you and sorry

    #137102

    binarymoon
    Theme Author

    I didn’t forget – some problems take longer to solve than others.

    @media only screen and (max-width: 782px)
    .archive .main article.post-archive {
    width: 47%;
    }
    }
    @media only screen and (max-width: 600px)
    .archive .main article.post-archive {
    width: 99%;
    }
    }
    #137115

    Submitted. Does not work. The display is the same as before, nothing has changed (see https://imgur.com/a/MfhzsSW). Maybe because I have already inserted “@media only screen” and maybe create a conflict, but I do not think (here is a txt of css inserted in my site https://ufile.io/0iie4). I also tried to change the grid from 3 post to 2, to increase the space, but the problem of the broken title always persists. Do you have any suggestions?

    At this link https://intellettualemoderno.com/category/letteratura-straniera/ (rewrite so as not to confuse us): you can change “only” the mobile phone grid and see the posts not at 3 or 2 at a time horizontally on the same floor , but only 1 at a time?

    In this way, for example: https://imgur.com/a/i7ByvgK

    So the web version on the pc and the tablet remain the same as they are (with grid and 3 horizontal posts on the floor), while only the phone version is changed

    #137125

    binarymoon
    Theme Author

    Apologies – I missed some brackets on the code. Seems they didn’t copy from Chrome.

    @media only screen and (max-width: 782px) {
       .archive .main article.post-archive { width: 47%; }
    }
    @media only screen and (max-width: 600px) {
       .archive .main article.post-archive { width: 99%; }
    }

The topic ‘Link to the category from bar: category page improvements’ is closed to new replies.