On one of my blog web pages (Source, Poster 2), I am in need of some css code, probably from Gary.
On this site:
https://classicalblackbird.net/wedding-music/
the categories (“Suitable for”) appear as normal links in the detail of each post (see image).
I should like them blocked in colour as they are on the main page:
I have tried every bit of css code I could guess at, but I don’t really know enough to know what is wrong. Especially as the tags block fine in the detail.
Here is the CSS I currently have:
.poster-archive-tags a, .blog-entry-tags a {
padding: 2px 4px 2px 4px;
background-color: #FFEA72;
font-size: 13px}
.poster-archive-categories a, .blog-entry-categories a {
padding: 2px 4px 2px 4px;
background-color: #CCCC33;
font-size: 13px}
Many Thanks to Project 24 by @Webdeersign for the idea of ‘blocking’ the tags and categories like this.
Any other comments on content and design also welcome, of course.
Thanks in advance
Fergus
Where exactly do you have that CSS? In the Blog items that CSS is not showing.
Put that CSS in the project wide settings (RW Settings - Code - CSS) instead of the individual pages, and see if that works for you.
1 Like
Nice to hear from you. Many thanks for getting back so quickly.
I had the code in the CSS panel for the page. When I moved it to project-wide settings all the links appeared as normal links, not blocked, in both main and detail view.
For me, who doesn’t know as much about this as I should, it would seem odd that some of the code works in the page panel for CSS, and some doesn’t. Do you know if the categories code for blog entry is actually correct?
.poster-archive-categories a, .blog-entry-categories a {
padding: 2px 4px 2px 4px;
background-color: #CCCC33;
font-size: 13px}
Thanks again
Fergus
I had a look at the Project24, and the CSS code to style the Tags is indeed in the page CSS.
I didn’t use the Categories in that Project, but the principle should be the same as the Tags.
Looking at the code on your page, your Categories have the class <blog-entry-categorywhereas your CSS code targets poster-archive-categories &blog-entry-categories.
First thing to try is to change those 2 to poster-archive-category &blog-entry-category.
You are good (in both senses of the word). Thank you .
You were very nearly right.
When I tried poster-archive-category &blog-entry-category, the categories were blocked in the details and normal links in the main page. That is the opposite way round to before.
So, after a bit of trial and error, here is the code that works:
.poster-archive-categories a, .blog-entry-category a {
padding: 2px 4px 2px 4px;
background-color: #CCCC33;
font-size: 13px}
I always thought that computer code was a very precise thing, that if a space or a comma were out of place, then the program would fail. So I don’t understand why the plural is needed for the archive and the singular is needed for the blog. However, I don’t really need to understand, I am just grateful that you helped me to make my blog look a bit better.
Now, I’ll get on to some ribbons across the corners!
Best wishes
1 Like
