[Resolved] greating grey line under specific page titles and more

[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

[Tom]

Hi there,

What CSS have you used right now? I’m seeing multiple blocks of CSS adding borders.

Let me know 🙂

[Max]

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.

[Tom]

What if you do this?:

.archive .site-main .entry-header {
    margin-bottom: 50px !important;
    border-bottom: 1px solid #eee !important;
}

[Max]

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.

[David]

The 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;
}

[Max]

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.

[David]

1. 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;
}

[Max]

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

[David]

You’re welcome

[Author]

Posts