- This topic has 9 replies, 3 voices, and was last updated 3 years, 4 months ago by
David.
-
AuthorPosts
-
September 20, 2019 at 3:08 pm #1014864
Max
Hey there,
I am using the latest GP premium.
I saw that there is a thin grey bar underneath the tag archive title (see page link) which I like. That is why I tried to copy that line in order to apply it to the entry title of my static category pages (all posts, science posts, stray observations). You will find them if you go to the menu and open the “posts” item.
The line is in place but the issue is that it shows up in other places (see tag archive and then take a look at the entry titles of the posts in the archive list) which is normal because the selector covers these instances. I tried finding the specific selector for my three category pages but did not succeed.1.) Could you help me with finding the selector which targets only the entry titles of the static category pages (mentioned above)?
2.) Is there an easy way to display that grey line on the tag archive page in-between the list items, so in-between the post previews? Basically they would function like separators like on this page.
Best regards
September 20, 2019 at 7:13 pm #1014939Tom
Lead DeveloperLead DeveloperHi there,
What CSS have you used right now? I’m seeing multiple blocks of CSS adding borders.
Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 21, 2019 at 7:57 am #1015283Max
Hi Tom,
The only CSS I added is:
.entry-header { margin-bottom: 50px !important; border-bottom: 1px solid #eee !important; }
As far as I know the original line (tag archive) was already there, so it was nothing I (actively) added to the mix. So once I remove the above CSS the grey line on the category pages and in the post preview on tag archive pages will disappear.
September 21, 2019 at 6:25 pm #1015599Tom
Lead DeveloperLead DeveloperWhat if you do this?:
.archive .site-main .entry-header { margin-bottom: 50px !important; border-bottom: 1px solid #eee !important; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 22, 2019 at 1:06 am #1015696Max
Hm that only removed the grey line on under the titles of the three individual category pages (e.g. here) which I mentioned but kept it everywhere else.
I left the code in place for you to see.September 22, 2019 at 6:08 am #1015802David
StaffCustomer SupportThe tag archive title is getting a border from this CSS:
.page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee }
It is being added by Bootstrap which is coming from the magee shortcodes plugin. You will need to add CSS to remove it eg.
.page-header { border: 0; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 22, 2019 at 7:37 am #1015843Max
Hi David,
Thank you for pointing that out.
I added the CSS and now the grey line from the plugin is gone. I added one manually via CSS.Do you have an idea regarding my original request? Tom’s code (which I left in place) does not seem to work as far as I can see. It basically only added a grey line underneath the byline/date/author name for each list item.
Basically
1.) that one should disappear and
2.) instead I would like the same line I added underneath the tag archive page titles under the three category page titles and
3.) add a line in-between the list items so after each post preview (see the example in my original request).1.) I was able to remove the grey line manually using this code:
.archive.tag .entry-title { margin-bottom: 0 !important; border: 0 !important; }
This only seems to work if I use
.archive .site-main .entry-title
instead of Tom’s.archive .site-main .entry-header
but honestly, that seems to be a bit messy. I do not quite understand why the.entry-header
selector overwrites the CSS applied to the.entry-title
on tag archive pages and hence adds the grey line there. As a matter of fact the only thing that the.archive .site-main .entry-header { margin-bottom: 50px !important; border-bottom: 1px solid #eee !important; }
code does is adding a grey line underneath the byline/date/author name for each list item.
But if I was able to target the selectors for Nr. 2.) directly I would not need to remove the grey line in the first place.September 22, 2019 at 4:27 pm #1016193David
StaffCustomer Support1. So the issue – those ‘static archives’ are Pages. Each of which has a ID that is referenced in the Body tag classes eg.
.page-id-1084 .entry-header { padding-bottom: 10px; margin-bottom: 20px !important; border-bottom: 1px solid #eee !important; }
This is ID 1084 for the Stray Observations. You can string multiple
.page-ID-XXXX .entry-header
selectors for each of your static archives.2. Try this CSS to put a separating line between posts on tag archive:
.archive.tag .post { border-bottom: 1px solid #eee !important; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 23, 2019 at 10:55 am #1016953Max
That worked super well!
I also added some linear and radial gradients to the respective pages – after some research it was fairly easy. Like this (in case anyone is interested):
border-image: linear-gradient(to right, rgb(206,169,47) 0%, white 70%) 1;
and
border-image: radial-gradient(rgb(206,169,47), white) 1;
I found the according tutorials here and here.
Thank you for your explanation regarding the page ID and for finding the selector!
Best wishes
September 23, 2019 at 3:57 pm #1017144David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.