Archived topic
Posts Page Customization
9 replies · Started by Ivan on August 20, 2020
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
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;
}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
Is the issue visible right now?
I zoomed in quite a bit but don't see it:
https://www.screencast.com/t/4PsyLCvAQ
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.
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;
}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?
It should work in both :) But I would recommend just sticking with one place to add your CSS so it's easier to manage.
Yes, it does. My bad: */ in the wrong place. *facepalm*
Thank you for your help!
No problem :)
