- This topic has 9 replies, 2 voices, and was last updated 3 years, 7 months ago by Leo.
-
AuthorPosts
-
August 20, 2020 at 12:41 pm #1411700Ivan
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 buttonPlease let me know in case I need to open different topics for each question.
Thank you,
IvanAugust 20, 2020 at 3:35 pm #1411876LeoStaffCustomer SupportHi 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; }
August 21, 2020 at 8:39 am #1412875IvanHello 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,
IvanAugust 21, 2020 at 8:49 am #1412894LeoStaffCustomer SupportIs the issue visible right now?
I zoomed in quite a bit but don’t see it:
https://www.screencast.com/t/4PsyLCvAQAugust 21, 2020 at 8:55 am #1412902IvanYes, 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.
August 21, 2020 at 9:02 am #1412917LeoStaffCustomer SupportTry 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; }
August 21, 2020 at 9:30 am #1412948IvanLooks 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?
August 21, 2020 at 9:43 am #1412967LeoStaffCustomer SupportIt should work in both π But I would recommend just sticking with one place to add your CSS so it’s easier to manage.
August 21, 2020 at 1:42 pm #1413214IvanYes, it does. My bad: */ in the wrong place. *facepalm*
Thank you for your help!
August 21, 2020 at 2:07 pm #1413229LeoStaffCustomer SupportNo problem π
-
AuthorPosts
- You must be logged in to reply to this topic.