Styling Single Post Page

Hey there!

A quick follow-up question: In this post you mentioned the

font 0 method to hide commas between tag links

I am trying to apply that method to the tags links in the Post Carousel Pro plugin as well. So far I was able to style the tags links in order to make them look the same as the ones native to the theme/WP. But the "font 0 method" did not work here so I did not manage to remove the commas.

This is the code I used (the plugin has an own custom CSS field):

.sp-pcp-post-meta li i.fa.fa-tags {
    color: black !important;
}
.sp-pcp-post-meta li a[rel="tag"] {
    color: white !important;
    background-color: rgb(206, 169, 47);
    font-size: 10px !important;
    padding: 1px 4px;
    margin-right: 2px;
    margin-top: 2px;
    text-transform: capitalize;
    word-break: break-word;
    display: inline-block;
    border: 0px solid blue;
    border-radius: 3px;
    -webkit-transition: opacity .6s ease-in;
    transition: opacity .6s ease-in;
}
.sp-pcp-post-meta li a[rel="tag"]:hover {
    opacity: .6;
    -webkit-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
} 

Hi there,

Which page can I see the carousel on?

Hi!

You can see it on the homepage: https://alexandrin.de/ although basically it concerns every grid/list/carousel I created with that plugin. It should be possible to target the whole plugin or single instances.

Try this:

.sp-pcp-post-meta li {
    font-size: 0 !important;
}

.sp-pcp-post-meta li a, 
.sp-pcp-post-meta li i, 
.sp-pcp-post-meta li time {
    font-size: 9px !important;
}

That almost worked - just a bit too well. But now the commas of the categories are also gone. Is it possible to only target the commas of the tags?

Hmm, it doesn't look like it's possible with their HTML markup, unfortunately. You'll need to contact their support to see if there's a better way to remove the commas.

Will do!

Thank you for your awesome help!

No problem :)

Hey there,

I am using GP Premium version 1.12.2 and WP version 5.5.3.

At the moment, on different pages (single post, homepage, static pages) below a browser width of 768px the sidebar tag cloud widget gets pushed to the bottom position of the website - just above the footer.
I would like to know how I can change that behaviour to:

1.) alter the breakpoint/browser width at which the tag cloud gets pushed out of the sidebar and
2.) change the position of the tag cloud on a page (single post, homepage, static page), being able to place it above/underneath another widget etc.

I provided a link to a single post page and my homepage.

Best wishes and thanks a lot in advance

Max

Hi,

You can change the breakpoint by using @media rules.

Say, for example, you want the content and sidebar to go 70%/30% on 768px but go full-width on 600px then you can do something like this:

@media (max-width:768px){
div#content {
    flex-direction: row;
    display: flex;
}
div#primary {
    width: 70%;
}
div#right-sidebar {
    width: 30%;
    margin-left: 30px;
}
}

@media (max-width:600px){
div#content {
    flex-direction: column;
    display: flex;
}
div#primary {
    width: 100%;
}
div#right-sidebar {
    width: 100%;
    margin-left: unset;
}
}

As for changing of the widget order within the sidebar, you can turn the .inside-right-sidebar into a flexbox by setting display:flex; on it and then apply order property to its children elements.

Hi Elvin,

thank you for the quick response.

Regarding the first question I am not sure whether this is what I am looking for so to be able to better understand your solution let me specify my question:
1.) What exactly happens at the 769px browser width breakpoint to my tag cloud widget once I decrease the browser width to 768px? Does it get pushed out of the sidebar or is the sidebar simply being placed underneath the rest of the main content of any page on my website?

2.) Here I think you might have misunderstood what I was asking (or perhaps I do not understand how the right sidebar works): As mentioned above, once the browser width falls below 769px (mobile breakpoint) the tag cloud gets placed underneath the rest of the main content of any page on my website. I do not want to change its position within the sidebar but would like it to not appear at the bottom of the page. Instead I would like it to appear at any other place of the main content area, e.g. beneath the post carousel on my homepage or above the author widget on single post pages. I provided a link to a screenshot below.

Best regards

1.) What exactly happens at the 769px browser width breakpoint to my tag cloud widget once I decrease the browser width to 768px?

If you use the CSS provided on my previous reply, once the site detects any resize, say 768px, it will use the css specified ion @media (max-width:768px){...} which will apply 70% width to content and 30% width to sidebar meaning these 2 areas will be displayed in 1 row.

The sidebar will only get pushed below the content on viewports 600px or smaller as specified in the media rule.

2.) ... I do not want to change its position within the sidebar but would like it to not appear at the bottom of the page. Instead I would like it to appear at any other place of the main content area, e.g. beneath the post carousel on my homepage or above the author widget on single post pages. ...

Ah, in that case, you must add in 2 tag clouds within the page. Keep the default one on the sidebar but set it to hide on mobile by adding hide-on-mobile class to it.

As for the 2nd tag cloud, we add this for mobile so we have to set it to hide on desktop.

If this tagcloud plugin you're using has a shortcode, you can place its shortcode within a Block element or Hook element and set its display rule to "posts - all posts".

You then set its hook to generate_after_content so it goes before the comment section.

You then set hide-on-desktop class on it so it hides on desktop.

This way you have 2 tagclouds that don't appear at the same time. 1 tagcloud appears on the sidebar on desktop view but is hidden on mobile and the other tagcloud appears before the comment area when on mobile view but hides on desktop.

Thanks again for the fast response and suggestion.
That about clarifies the issue at hand. I am familiar with the @media rule and am already using it to specify the width of my content area - I was just unsure regarding the behaviour of the sidebar. I will work my way through the suggestions you provided and respond again here afterwards.

No problem.

Let us know if you need further help. Happy holidays. :)

Hi again!

So since I am not quite firm in CSS I read up on the "classes" topic and how to add them to certain elements. Before I tried adding the hide-on-mobile class to the tag cloud widget (in this case #tag_cloud-7) but all it did was reformat the title.
The options which are suggested in your documentation don't seem to apply here since there is no custom-classes field nor a text editor available. Also, it is not a custom class which I want to create but a pre-existing one. So due to my lack of understanding I have to ask: Do you need to add the abovementioned class via css or php?

Best wishes and in case you are already enjoying your days off: Happy Holidays : )