[Resolved] Styling Single Post Page

[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

[David]

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

[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.

[David]

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?

[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.

[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.”

[David]

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

[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

[David]

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

[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?

[David]

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.

[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.

[David]

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

[Max]

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

[David]

Glad to hear that

[Author]

Posts