[Resolved] Posts Page Customization

Home Forums Support Posts Page Customization

  • This topic has 9 replies, 2 voices, and was last updated 1 month ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1411700
    Ivan

    Hello,

    I recently started with GP using the Article demo site for inspiration. 🙂 The theme is fantastic and it’s going pretty well so far. I just cannot find a way to fully customize the posts page:

    I would like to do the following things:

    1) reduce the padding around the content
    2a) use text-align: justify for the excerpt
    2b) or remove the excerpt altogether – setting the word count to 0 still leaves the dots – …
    3) control the padding, border size, and border radius of the button

    Please let me know in case I need to open different topics for each question.

    Thank you,
    Ivan

    #1411876
    Leo
    Staff
    Customer Support

    Hi there,

    1. This option should work:
    https://docs.generatepress.com/article/content-padding/

    2a Try this CSS:

    .entry-summary {
        text-align: justify;
    }

    3. Go to Additional CSS field and edit this block of CSS:

    button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    	border-width: 1px;
    	border-style: solid;
    	border-color: inherit;
    }

    To something like this:

    button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
        border-width: 1px;
        border-style: solid;
        border-color: inherit;
        padding: 5px;
        border-radius: 5px;
    }
    #1412875
    Ivan

    Hello Leo,

    Thank you very much for your suggestions!

    1) Works great.
    2a) Works great as well.
    3) I have some troubles here. This is the code now:

    button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    	border-width: 1px;
    	border-style: solid;
    	border-color: inherit;
    	/* Custom CSS */
    	padding-top: 15px;
    	padding-bottom: 15px;
    	padding-left: 25px;
    	padding-right: 25px;	
    	border-radius: 5px;
    	border-width: 2px;
    	/* End Custom CSS */
    } 

    I kind of get the result I want, but the border only appears when I hover over the button. Otherwise the border is missing and there are these green edges:

    Commenting out border-style: solid; brings the border back, but then it disappears on hover. Do you have any idea how to fix this?

    Thanks,
    Ivan

    #1412894
    Leo
    Staff
    Customer Support

    Is the issue visible right now?

    I zoomed in quite a bit but don’t see it:
    https://www.screencast.com/t/4PsyLCvAQ

    #1412902
    Ivan

    Yes, it is. My screenshot is from Firefox. Apparently Chrome/Edge do not show the green edges, but the border is still missing. You can see it when you hover over the button – it gets a bit bigger because the border appears.

    #1412917
    Leo
    Staff
    Customer Support

    Try editing your CSS to this:

    button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
        border-style: solid;
        border-color: transparent;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 25px;
        padding-right: 25px;
        border-radius: 5px;
        border-width: 2px;
    }

    And add this as well:

    button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, a.button:hover {
        border-color: #00bfa6;
    }
    #1412948
    Ivan

    Looks like this did the job! Great, thank you very much! 🙂

    May I just ask you why some of the code you posted here (e.g. 2a) works only with the Additional CSS field and not with Simple CSS?

    #1412967
    Leo
    Staff
    Customer Support

    It should work in both 🙂 But I would recommend just sticking with one place to add your CSS so it’s easier to manage.

    #1413214
    Ivan

    Yes, it does. My bad: */ in the wrong place. *facepalm*

    Thank you for your help!

    #1413229
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.