[Resolved] Styling Single Post Page

Home Forums Support Styling Single Post Page

  • This topic has 22 replies, 3 voices, and was last updated 1 year ago by Tom.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #976067
    Max

    Hi there!

    I am using the latest GP Premium.

    What I want to do:

    1.) Basically I want to find a way to influence the way single post pages look in general:
    I want to be able to:
    – add some padding on the left and right side of the text,
    – change the font size and colour of the post/page title (only single post type),
    – change the font size and colour of the displayed date,
    – add some more space underneath the text (above the author box).

    2.) Also, I wwould like to style the meta information which gets displayed underneath each post:
    – categories (including icons),
    – tags (including icons),
    – previous and next post item.

    Would that be possible using CSS or would I need to create a specific template? If this is more of a WordPress than a GP problem in general I will take a look at the WordPress forum of course.

    Thank you and best wishes

    #976103
    David
    Staff
    Customer Support

    Hi there,

    1. This CSS in order of requirements:

    .single-post .inside-article {
        padding: 0 30px;
    }
    
    .single-post .entry-title {
        font-size: 24px;
        color: #222;
    }
    
    .entry-meta .posted-on a {
        font-size: 24px;
        color: red;
    }
    
    #auther_bio_info {
        margin-top: 50px;
    }

    2. What type of styling you require? You already have some CSS styling the Tags. Let me know

    #976263
    Max

    Hi David,

    1.) Thank you for the CSS – the padding required the !important command but the rest worked just fine.
    I also figured out the according class for the author name but could you tell me how to style the “by” in-between the date and the name (underneath the title)?

    2.) Basically I would like the same effect as described in my other post: https://generatepress.com/forums/topic/adding-tag-cloud-element/page/2/#post-976080
    So the same effect used in the tag cloud.
    Or (perhaps easier): A way to simply disable the “clicked on/used link” attribute. Basically the tags should only get a transition (fade-in –> opacity –> fade-out/back to normal) once the user does a mouse over and leave (like in the tag cloud). The font colour should simply stay white. So no change/effect whatsoever once the tag gets clicked.

    #976273
    David
    Staff
    Customer Support

    Need to target this selector for the ‘by’ and the author name:

    .byline .author, .byline .author a

    In you tagclod styling you’re using the .tagcloud a, .tags-links a selector. Can you change it to just target the .tagcloud a i can then provide some other CSS to include removing the commas. Do you want this same style on the Category links as well?

    #976454
    Max

    Ok,
    Thank you for providing the selector.

    I removed the .tags.links a selector. I checked and voilà: Now the tags are being displayed as plain old text. Just to clarify: I would like the tags to look like in the tag cloud (everywhere on the website).

    Regarding the category links: I would simply like to change their colour and weight.
    The same goes for the links underneath (previous and next post).
    As mentioned, I would like to be able to exchange the icons in front of the category and tag line (using different ones from the font awesome repository) so that they are the same everywhere on the webpage, so globally.

    #976814
    Max

    I closed the other thread (which I linked above – the CSS code for styling the tags is also in that thread.) since we are basically working on a solution to that problem:

    Here is what I also wrote there and what the original problem was:

    “– The transition which is enabled within the tag cloud does not work when hovering over the according tag on the archive page/single post page (so not in the tag cloud): The font colour simply changes to gray. What does work seems to be the transition duration. There is no opacity though.
    – They behave differently after they have been clicked: Basically the colour changes and the transition effect sort of breaks which looks quite irritating of course.”

    #976883
    David
    Staff
    Customer Support

    OK, so replace this:

    .tagcloud a {
        color: white;
        background-color: rgb(206, 169, 47);
        font-size: 10px !important;
        padding: 1px 4px;
        margin: 0px 0px;
        text-transform: capitalize;
        word-break: break-word;
        display: inline-block;
        border: 0px solid blue;
        border-radius: 3px;
        -webkit-transition: all .6s ease-in;
        -o-transition: all .6s ease-in;
        transition: all .6s ease-in;
    }
    
    .tagcloud a:hover {
        opacity: .5;
        -webkit-transition-property: all;
        -webkit-transition-duration: .6s;
        -webkit-transition-timing-function: ease;
        -webkit-transition-delay: 0s;
    }

    with:

    /* font 0 method to hide commas between tag links */
    .tags-links {
        font-size: 0;
    }
    /* Apply general hove style to tags-links and tagscloud */
    .tagcloud a,
    .entry-meta .tags-links a,
    .entry-meta .tags-links a:hover,
    .entry-meta .tags-links a:visited {
        color: white;
        background-color: rgb(206, 169, 47);
        font-size: 10px !important;
        padding: 1px 4px;
        margin-right: 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;
    }
    /* Strip tag cloud default margins */
    .tagcloud a {
        margin: 0px 0px;
    }
    /* Tags hove styling */
    .tagcloud a:hover,
    .entry-meta .tags-links a:hover {
        opacity: .5;
        -webkit-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    
    /* Change cat and tag link icons - replace content unicodes */
    .cat-links:before, .tags-links:before {
        font-family: FontAwesome !important;
        font-size: 14px;
    }
    
    .cat-links:before {
        content: '\f07b';
    }
    
    .tags-links:before: {
        content: '\f02c';
    }
    #991664
    Max

    Hi David,

    Thank you for providing the code. So far everything works.
    Two things are missing regarding the request in the original post (paragraph 2):

    1.) The category text (above the tags at the bottom of the single post page) itself does not change (e.g. colour). I did not find an elegant solution to changing it individually. Using .entry-meta a would only change the looks of all of the four lines (tags included). Is there a way to only changing the category text?

    2.) the “previous post” and “next post” items (below the tags at the bottom of the single post page) including the left and right arrows. It is the same story as in Nr. 1.)

    Best regards

    #991942
    David
    Staff
    Customer Support

    1. You can target them in the same way you did tag-links – so where you see:

    .entry-meta .tags-links a,
    .entry-meta .tags-links a:hover,
    .entry-meta .tags-links a:visited

    tags-links gets swapped for cat-links

    2. The post navigation is similar you can target .post-navigation a

    #997012
    Max

    1.) That worked well!

    2.) With a bit of fiddling I was able to change the <> parts of the navigation individually – only the colour/size/weight though.
    Would it be possible to swap them for a fontawesome icon or does that not work because they are simple font elements?

    #997317
    David
    Staff
    Customer Support

    2. You would just need to include the nav selectors in this rule:

    .cat-links:before, .tags-links:before {
        font-family: FontAwesome !important;
        font-size: 14px;
    }

    Then add the FA icon unicode for the icon you want to use like you did for cat and tag links.

    #997927
    Max

    I tried adding the nav selectors to the rule in all kinds of combinations but none of them worked. This is the code I am currently using:

    .cat-links:before, .tags-links:before, .prev, .next {
        font-family: Fontawesome !important;
        font-size: 14px;    
    }

    and

    .prev, .next {
        color: rgb(206,169,47);
        font-size: 16px !important;
        font-weight: bold;
        content: '\f299';      
    }

    Removing the other attributes (size etc.) did not change the outcome. After looking up some wordpress pages I also added .post-navigation before the selectors (and in the rule) but that did not change anything either – the arrows did not get replaced by the icon.

    #997942
    David
    Staff
    Customer Support

    You have to include the :before pseudo selector. eg. .prev:before
    It creates a fake (pseudo) element to insert that icon before the prev.

    #997969
    Max

    I did that and it still did not work. Then I added the !important command and voilà – all done.
    Thanks a lot David!

    #998113
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.