[Resolved] Styling Single Post Page

Home Forums Support [Resolved] Styling Single Post Page

Home Forums Support Styling Single Post Page

Viewing 15 posts - 16 through 30 (of 39 total)
  • Author
    Posts
  • #1003257
    Max

    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;
    } 
    #1003627
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Which page can I see the carousel on?

    #1003797
    Max

    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.

    #1004138
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1004620
    Max

    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?

    #1004949
    Tom
    Lead Developer
    Lead Developer

    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.

    #1005002
    Max

    Will do!

    Thank you for your awesome help!

    #1005252
    Tom
    Lead Developer
    Lead Developer

    No problem ๐Ÿ™‚

    #1583245
    Max

    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

    #1583613
    Elvin
    Staff
    Customer Support

    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.

    #1589788
    Max

    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

    #1589970
    Elvin
    Staff
    Customer Support

    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.

    #1590478
    Max

    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.

    #1591301
    Elvin
    Staff
    Customer Support

    No problem.

    Let us know if you need further help. Happy holidays. ๐Ÿ™‚

    #1591777
    Max

    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 : )

Viewing 15 posts - 16 through 30 (of 39 total)
  • You must be logged in to reply to this topic.