CSS in luxury theme
-
I just switched themes and would like to make some changes with CSS. (I have the premium plan.)
To start, the things I’d like to do are:
Hide the categories and tags,
Make the post footers (not the blog footer, but the footers in the individual posts) italic and a slightly smaller font size.I’m trying to learn this stuff, and I know enough to be dangerous. Your help is appreciated!!!
The blog I need help with is: (visible only to logged in users)
-
Hi there,
Hide the categories and tags
Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.
.post-date p { visibility: hidden; } .post-date p .posted-on { visibility: visible !important; } .single .post-meta { display: none; }Make the post footers (not the blog footer, but the footers in the individual posts) italic and a slightly smaller font size.
I’m not sure I’m understanding exactly what part of the post footer area you wish to make smaller and italic. Can you be a bit more specific?
-
When I add a footer to the bottom of a post using the HTML code “footer” — you’ll see it on many of my posts for Image Credits. I like those to be in a slightly smaller font and italicized (I forgot to mention the italics before). This post has one:
-
-
Okay, I tried this and it seems to be working, although if I understand correctly, that doesn’t mean I’m doing it right:
.body, footer {
font-style: italic;
font-size: 11px
}Let me know if that looks like it’s right. I went to the Developer Tools on my browser and tried to figure this out, and if I didn’t say it before, I’ll say it now, I know enough to be dangerous.
-
Hi, since other places in the theme use the “footer” CSS class, I would suggest that we use the following instead.
.single .post .footer { font-style:italic; font-size:12px }A couple of things on the code you had below:
.body, footer { font-style: italic; font-size: 11px }“body” is an html tag, so you don’t use a period before it. On “footer” since it is a CSS class, in the CSS we have to add a period before it like this
.footer
so that the browsers know it is a CSS class. You will also see some listed like this
<div id="wrapper">
That is a CSS “id” and it would be preceded by a # in the CSS. -
Thank you, except that code didn’t work. I played around with it and put a comma after “post” and took the period out before “footer,” and that worked, but based on what you said, I’m not sure it should have.
What I ended up with was like this:
.single .post, footer {
font-style:italic;
font-size:12px
}Let me know if that is acceptable or if I’ve done something else that will backfire on me. Thanks for all of your help!!!
-
Well, I’ve discovered that code does some funky things in some of my posts, so obviously what I did isn’t right, either.
I left it the way you had written it and I’m going back over other posts to see if it works in some of them.
-
I’ve discovered this theme has some quirks. For example, if I have a caption with a photo, one of the following paragraphs will look like the first paragraph does, which I think is a header format.
-
Ok, sorry, I see you are using the “footer” html tag around your text at the end of the post. There are other things in the theme that use the “footer” html tag, so if we make a change to the styling of “footer” we will end up changing those other things as well.
What I would suggest is to set a unique CSS class for the last line of text, like this.
<p class="my-foot">All images © geosap – Fotolia</p>
and then this would be the CSS..my-foot { font-style:italic; font-size:12px }The plus on doing it as above is that you don’t end up possibly messing up some other formatting on something in the theme using a footer html tag.
-
Can you point me to a post where this has happened? I’ve gone back through a number of your posts and cannot find a place where the first paragraph styling is duplicated after an image with a caption.
-
The first paragraph on Luxury posts and pages has special formatting, but they do not use heading tags for that styling, it is done with a “first-child” pseudo class to affect the styling on only the first paragraph.
.content-holder > p:first-child -
I changed the posts where the first paragraph styling is duplicated. It was only a few. I changed one back,
https://myworldwithwords.com/2017/03/24/the-spirit-of-walter-cronkite/The last image I inserted, the vintage-y one of the woman who looks like she’s gossiping, is the one I’ve had problems with. When I have a caption there, you can see that the next paragraph has the first paragraph formatting.
-
-
Also, is there a way to make the main column — the one with the posts — a little wider? I don’t mind if the images in the right-hand column are smaller, in fact, I would prefer it. Just little bit wider — I’d have to play with it to see what works.
And, can I make the headers (h5, h4 etc) a different color?
Thanks!
-
Hmmm, this is strange. If you would, leave that post “as-is”. I’ve checked and tried to figure out what is causing it to pick up that styling, but have not been able to, so I’m chatting with our developers on it.
-
Sure thing. I thought it was strange, too. The only thing I can think of is that I’m using some verbiage in the caption that ties into some code, but that may be a bit far-fetched.
-
It happened again! The funky formatting, that is. This didn’t happen until I added captions to the pictures.
https://myworldwithwords.com/2017/03/31/is-the-plural-octopuses-or-octopi/I purchased rights to these images from Adobe Stock, if that makes a difference.
-
Has anyone had any luck in figuring out what’s going with the formatting? It seems to happen when I add captions to images that were originally .ai or .eps and converted to .png. Without the captions, there’s no problem with the formatting. If I can help in any way, please let me know.
-
I was playing around with this post, and discovered that I didn’t have this formatting problem with similar images (same artist) that I purchased from a different stock image copy. I made a copy of the “Octopus” post and used the different images there, and it’s password protected so as not to confuse my followers — I don’t otherwise care who sees it — and the password is: testing123 (Ha, I feel like Allen Ludden.)
I tested whether using an image in a .jpg format rather than .png made a difference, and when I used the original images, it did not. I also made the images much smaller and that didn’t change anything.
- The topic ‘CSS in luxury theme’ is closed to new replies.
WordPress.com Forums 