Edit CSS theme Apostrophe
-
Hello,
I use the theme Apostrophe and took a pack prenium because I want to change some things via CSS, but I’m not sure I understand how to do because it does not work. I would for example remove the category list below section (but keep the tags list).
I went to the inspector firefox, and I think I found the line has changed:
.wf-active #-handle infinite span, .wf-active .comment-reply-link .wf-active .edit-link .wf-active .entry-footer a [rel = “category tag”] .wf -active .entry-footer a [rel = “tag”] .wf-active .entry-meta {
font-family: “Arimo” sans-serif
}
We must remove .wf-active .entry-footer a [rel = “category tag”]
and paste
.wf-active #-handle infinite span, .wf-active .comment-reply-link .wf-active .edit-link .wf-active .entry-footer a [rel = “tag”] .wf- .entry active-meta {
font-family: “Arimo” sans-serif
}
in the CSS customization framework
That’s right ?
So why does not work?
Thank you
LaurentThe blog I need help with is: (visible only to logged in users)
-
Hi Laurent, see if the following gets you what you are looking for. Add this at Customize > CSS.
.post-categories { display: none; } -
Great ! It works, thank you!
So we must necessarily add CSS, there is no possibility of changing the existing one. I also use another blog platform (less than wordpress overall, but more on that), where there is access to the full CSS and modify what you want …
In fact, this was just an example because I have other things to change:
– I would actually that the category list is not deleted, but moved: I would like to just above the title of the article (or next to the date).
– That the list of tags to be moved too, just after the text of the article (before the share buttons), with little prior words: “See also articles on the same subject:”
– That the category list also appears in the preview (homepage), the same place as the date.Thank you !
Laurent -
Great, glad that worked for you.
So we must necessarily add CSS, there is no possibility of changing the existing one. I also use another blog platform (less than wordpress overall, but more on that), where there is access to the full CSS and modify what you want …
WordPress.com is a multi-user environment which means we all share the same underlying WordPress and Theme software, so we cannot edit the original CSS as it would change it for everyone. In addition, not all of the CSS is in one place. Many of the features here have their own separate CSS files so that changes and bug fixes can be rolled out quickly and easily for all.
At WordPress.com, you create CSS rules to override the original CSS and since your CSS file loads after the original CSS, it takes precedence over the original.
I would actually that the category list is not deleted, but moved: I would like to just above the title of the article (or next to the date).
Moving the tags to the top of the single posts can be done easily, but putting them below the title creates issues since the titles can vary in length and we need to use position: absolute; to move them which means they basically float free above the rest of the page elements. Replace what I had give before with the following to see how it looks with the categories at the top of the posts.
.single .post-categories { position: absolute; top: 0; } .single article { padding-top: 50px; } -
Moving the tags and categories on the single post pages is a bit more challenging as the number of tags and categories, and the length of those tags and categories can create some spacing issues give we are using position: absolute;
To more the tags and categories, give this a try.
.single .apostrophe-tags { position: absolute; top: 0; } .single article { padding-top: 120px; } -
The theme does not have the HTML for the categories in the home page source code, so we cannot add them. CSS is a styling document used by the browser to style and position the elements of a web page and cannot be used to add functionality, such as adding categories to the front page.
-
OK, thank you, it starts to be better, it works, but I thought we could more easily do what we want …
Here what bothers me what bothers me is that there is, in top of the article, the category and the date and the title. It would be logical that the category is just above the title (where same side in the same row, left).
If that is not possible, remove the date for it is not found between the two, but I do not know where we could put … -
Let’s try this. Replace all the custom CSS you have now with the following.
.single .post-categories { position:absolute; top:40px; } .single .entry-title { padding-top:40px; } .post-tags { display:none; } @media screen and (max-width: 1023px) and (min-width: 768px) { .single .post-categories { top: 370px; } } -
Thank you, it works!
I may be a bit annoying but I would still change a bit:
– While the date and categories are better reversed, the date always seems intrusive (it’s just info): is what can block it right with something kind text-align: right;
– In the foot article, I would also remove <Previous | Next>. Yes, I want a simple blog where the view is not polluted by things that do not serve much …
Thank you for your response, and sorry to insist, this is the last time, I promise!
Thank you ! -
Hello,
By modifying paramatres you have given me, I got about what I wanted (all on the same line), but because of the margin that is not very compatible with small screens like mobile. Ideally really derait center or align right
I really wrong with the concept of having to add css to be amended, so I am forced to accept the “all done” (I thank you) rather than do it myself, sorry. ..
Laurent -
Yes, I want a simple blog where the view is not polluted by things that do not serve much
Please consider these links and things serve to help your readers find more information on your site.
If you would still like to remove them, add this:
nav.navigation.post-navigation { display: none; }Also I’m not sure what you mean in the next comment:
but because of the margin that is not very compatible with small screens like mobile.
Perhaps you can clarify by uploading a screenshot and linking it here. Thanks!
-
It works, thank you!
Many of my visitors are older and do not have much in the habit of browsing blogs, this is why I prefer to delete <previous | Next>, and they browse by subject (listed in the right column) to avoid overloading the display. Also I found that the feet articles are not harmonious: the titles “share”, “next | previous”, “comments” are not all the same font and size, it does not look very nice, then delete what is not is also clarifies the blog. -
For the second point, let me explain: I put a margin-left: 250px; to shift the category (blue) but it remains on the same line as the date.
This makes good on pc : https://sottevilleaufildutemps.files.wordpress.com/2016/06/pc.jpg
But mobile (held vertically to push the maximum test) is compacted against the right edge and goes to the line as there is no place: https://sottevilleaufildutemps.files.wordpress.com/2016/06/mobile.jpg
The CSS added is :
.single .post-categories {
position: absolute;
margin-left: 250px;
top: 0;
}.single .entry-title {
padding-top: 0;
}.post-tags {
display: none;
}@media screen and (max-width: 1023px) and (min-width: 768px) {
.single .post-categories {
top: 370px;
}
}So I would prefer a text-align: right; to force right without going to the line and take the right place to the left. I tried but I failed …
Besides if it can rigged right, I would prefer either the date: https://sottevilleaufildutemps.files.wordpress.com/2016/06/date-catc3a9gorie.jpgThank you very much
Laurent -
-
Yes, I want to put the category instead of the date, and put the date stalled at the end of the line to the right, as shown in this illustration: https://sottevilleaufildutemps.files.wordpress.com/2016/06/date-catc3a9gorie.jpg
Thank you !
Laurent -
Hello,
I again sought this weekend solve my problem by trying to add text-align: right; but it does not work… I think I’m close, but it gets stuck…
So if anyone can tell me how to align right category, and left the date in the header, it’ll manage well…
Thank you !
Laurent -
This can be done, but the Modifier button causes issues, so the following will hide that.
First off, remove margin-left: 250px; from the .single .post-categories rule in your CSS. Then add the following.
.single .entry-meta { float: right; } .single .edit-link { display: none; } -
Great, it works, thank you!
The Edit button is not used, this is actually okay to delete it.I would have liked to put the category on the home page on the preview vignette (or below) but apparently this is not possibile … Too bad …
Thank you very much !
Laurent -
-
Hello,
Widget “tag cloud” display tags with different sizes depending on the number of articles. It’s ugly !
Is it possible to change the css for they are all the same size?
Thank you !
Laurent
- The topic ‘Edit CSS theme Apostrophe’ is closed to new replies.
WordPress.com Forums 
