- This topic has 38 replies, 3 voices, and was last updated 3 years, 3 months ago by David.
-
AuthorPosts
-
September 7, 2019 at 7:40 am #1003257Max
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; }
September 7, 2019 at 3:47 pm #1003627TomLead DeveloperLead DeveloperHi there,
Which page can I see the carousel on?
September 8, 2019 at 12:19 am #1003797MaxHi!
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.
September 8, 2019 at 9:19 am #1004138TomLead DeveloperLead DeveloperTry 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; }
September 9, 2019 at 3:50 am #1004620MaxThat 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?
September 9, 2019 at 9:15 am #1004949TomLead DeveloperLead DeveloperHmm, 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.
September 9, 2019 at 10:02 am #1005002MaxWill do!
Thank you for your awesome help!
September 9, 2019 at 4:10 pm #1005252TomLead DeveloperLead DeveloperNo problem ๐
December 16, 2020 at 8:55 am #1583245MaxHey 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
December 16, 2020 at 4:29 pm #1583613ElvinStaffCustomer SupportHi,
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 settingdisplay:flex;
on it and then applyorder
property to its children elements.December 21, 2020 at 11:40 am #1589788MaxHi 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
December 21, 2020 at 4:48 pm #1589970ElvinStaffCustomer Support1.) 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.
December 22, 2020 at 4:11 am #1590478MaxThanks 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.December 22, 2020 at 3:12 pm #1591301ElvinStaffCustomer SupportNo problem.
Let us know if you need further help. Happy holidays. ๐
December 23, 2020 at 3:26 am #1591777MaxHi 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 : )
-
AuthorPosts
- You must be logged in to reply to this topic.