I have a hard time knowing when to charge people for help. At what point is something so quick and easy for me that I can do it for free? And at what point does it take long enough that I should really be charging for it?
In order to help combat this never-ending battle, I’m going to implement a new “once in a while” feature on Nose Graze. On certain days, like today, I’ll answer all your questions! Sometimes I may only answer certain questions or other times I may open it up to anything. But I’ll be here to help you out!
A few rules
- I will only answer during certain hours. After that, I’ll close comments. Today I’ll be answering questions between 1pm and 5pm UK time.
- I don’t HAVE to answer everything (I will try though!).
- If something is too long/difficult/complex for me to answer quickly, I may have to skip it. I’m aiming to spend less than 3 minutes per question. (That may not sound like much, but I can get A LOT done in 3 minutes. Most simple CSS snippets take me about 30 seconds.)
So with that in mind…
Ask me anything about CSS tweaks for your blog!
Today’s topic is going to be restricted to HTML/CSS tweaks. If there’s something you’ve been wanting to tweak/adjust, let me know, leave a link to your blog, and I’ll help you out. Here are a few examples of good questions:
- I’ve been wanting to increase the font size for my widget titles. How can I do that?
- I can’t figure out how to center this widget in my sidebar. Help!
- How can I make my links purple?
- I want to add a little extra space between each blog post. How do I do that?
I’ll help you out and give you HTML/CSS snippets. But please do some research on how to add custom CSS to your blog, since I cannot help each person with that individually. I’ll give you the snippets, but you need to know where to place it.
On WordPress
If you don’t already have an area for adding custom CSS, install the Simple Custom CSS plugin. This will add a new menu in: Appearance » Custom CSS. You simply paste any CSS code there.
If you use the Jetpack plugin, you should already have a submenu under Appearance called “Edit CSS”. You can paste it there.
On Blogger
Here’s a link to a tutorial on how to add CSS code to Blogger. That should help you out!
I want to ditch my theme’s review system and featured image and use the cover image and the UBB ratings instead. But I would like it to look similar to what it does now. Also I want the rating stars to show up in google.
I fiddled with it for a bit but got frustrated.
That’s a fantastic idea.
It’s not good to lock yourself into a theme. If you use meta boxes or custom post types with your theme, then that data is completely lost if you ever switch themes in the future. That’s why it’s best to keep that kind of data in a plugin that can transfer from theme to theme.
UBB has support for Schema.org which will add the necessary markup to get your stars to show up in search engines. But you need to keep in mind that it’s not a guarantee. Google sometimes chooses NOT to show stars, even if you add in the markup perfectly.
UBB doesn’t have the kinds of “review data”/breakdown that your theme has in the rating system, but you could look at the Rating Report add-on for that.
I have the rating report installed. I might be changing themes too.
What an awesome post!
Can we edit CSS, so a section of words will appear automatically at the bottom of every post? Such as our social media buttons & email subscription box.
Currently I use the plug-in “Bottom of Every Post” to do the above for me. The problem is, when I add reading orders at the bottom of our posts (I use the plug-in “Insert Pages”) it makes the Bottom of Every Post plugin appear 2xs. And I can’t figure out what code “Insert Pages” is calling and how to stop it. Unless you’re familiar with this? An example can be seen on the post below:
http://starcrossedbookblog.com/2015/03/book-review-best-kind-of-broken-finding-fate-1-by-chelsea-fine/
CSS just affects the style of your site. So you can’t use CSS to add words at the bottom of your post. That’s something you have to do with HTML.
But the problem is with your “Insert Pages” plugin. It’s applying the
the_content()filter to the page you’re pulling in. I’m not sure why you’d want to use Insert Pages to add your reading orders. I’d suggest looking for a “custom snippets” plugin you can use to show the reading order with a shortcode instead. An example might be: https://wordpress.org/plugins/post-snippets/Using that I think you can create a “snippet” (like your reading order) and assign that to a shortcode ( like
[reading-order]) and whenever you insert that shortcode in the page, it will show the snippet.Thank you so much Ashley for answering my question! Now I understand the difference between CSS and HTML!
I just tried that plugin, and while it got rid of my “Bottom of Every Post” appearing 2xs it doesn’t have the ability for me to update reading orders in just one spot. I made an update in the “custom snippets” section and it doesn’t apply that update to the posts with that snippet. I’m always adding the newest released book or a recent review to our reading order so that’s why I went with “Insert Pages”. I can make an update in that one page and it updates every single post that has a link to that page saving me a ton of time.
Just an update that after finally setting up my child’s theme tonight, that issue is no longer happening. Again, thank you so much for explaining the difference between HTML and CSS….it’s been too long since my basic java class!
That’s great news!! π
I’m not sure how difficult this will be for you to answer without actually digging into my site, but it’s worth asking! I’m also not sure if this question involves CSS coding or not…
I recently switched over from Blogger to WordPress (and now I get to use your Tweak Me theme – yay!). My new blog isn’t live yet, as I have a lot left to do! So, I decided that with the new change and the new name, I wanted to completely change the look of my blog. But now it’s turning out to be a whole lot more work than I initially anticipated. I need to go into every single post to change images I created (rating stars, banners, etc.) to fit in with my new theme. Is there a quicker way around this? I’ve tried some plugins, but they didn’t work. I tried changing the image url of my old images to link to my new image url, but that didn’t work. I tried going into my website file manager, but I got confused and frustrated with that, plus it didn’t seem to be working anyway. Nothing I seem to try actually works, other than manually going into every post and changing the image!
If you know of a way to do this and it’s quick to explain, I would appreciate it!
Thanks Ashley! π
Hi Sam,
I would suggest you start using a plugin for your rating images to avoid this happening in the future. For example, if you use the Ultimate Book Blogger Plugin you can upload your rating graphics into the settings, then UBB will display your rating graphics for you, and if you want to change them in the future you just change them in the UBB settings panel and they change across your whole site.
This would avoid running into this in the future.
But for now, you can change specific image URLs with this plugin: https://wordpress.org/plugins/velvet-blues-update-urls/ So you could enter the URL of your old rating graphic, then enter the URL of your new one, and it will replace all instances of the old URL with the new one.
Hi Ashley! Thanks for doing this. I was wondering how I could force the widget titles in my right sidebar to be right-aligned instead of left-aligned. I have poked around the code a bit but haven’t been able to figure anything genius out yet.
Thanks for reading and potentially answering!
Amanda
This CSS should do the trick. π
.widget-title { text-align: right !important; }Hey Ashley,
I’m looking to at buttons to my sidebar and have been meaning to look into it, so this post is timed perfectly! When I first went to add the buttons, they appeared like normal – the width being just a tad wider than the text. Is there a way to adjust the style so that when buttons appear in the sidebar, they span the width of the bar, with the text center aligned? I currently use images as the links instead, but would like to recreate the appearance with HTML and CSS. I’m using Tweak Me v2, if that helps.
Thank you so much!
Here’s some HTML you could use:
Just change the URL and the text inside (“Reviews”).
This particular HTML will only work with Tweak Me v2 because it uses specific class names that the theme uses. But the classes will use your button styles that you set in the Tweak Me settings panel (for you they’d be pink right now, just like your read more buttons).
The
btn-blockclass name is what makes it span the full width of the sidebar area.Thanks so much!
Ashley,
Is there a way I can add / change header fonts using CSS?
Thanks for the opportunity.
Yes you can do that with CSS like this:
h1 { font-family: "Font Name Here"; }However, you have to actually make sure the font is included in your theme as well. So, for example, you can’t just enter the name of a Google font without also including the font file. That requires adding the code Google gives you to your
<head>area of your theme.Some people have social media buttons with the follower count on them. Is that CSS, or PHP already? If it is CSS, though, I’d love how to learn to do that!
The ones you’ve probably seen around are from the Ultimate Book Blogger Plugin. π
Fetching the social media numbers requires some semi-advanced PHP work.
How can I change the colour of links with html? I have one of my sites where the standard colour doesn’t work in certain places as it’s almost the same clour as the background and I want to use a different colour, but I can’t figure out how to do that. So I only want to change the colour of some links, is that possible?
I would suggest using a custom CSS class for those links. So this would require two steps.
1. Add the CSS class to the link. So after entering the link, make sure you switch to the HTML view and make it look like this:
The important part is that
class="bluelinks"you can name it whatever you want, but make sure the name is consistent with part 2.2. Add the CSS code that changes the links. You would enter something like this:
.bluelinks { color: #000000 !important; }Again, make sure the name here (bluelinks) matches the name from part 1. Then you can also change the colour code (in this case
#000000) to be the colour you want.Thanks for answering my question! I’ll go try this out!
Where should I add the CSS code? I have an edit CSS part in my wordpress dashboard, is that where the CSS should go? I never used CSS before, so I am a a bit clueless. So I rather make sure I have the right place before I mess soemthgin up.
Yes, please read the bit in my post about where to place it. π
Thanks so much! I gave it a try and it works prefectly.
You’re so awesome and generous! I don’t think I have any CSS/HTML questions right now because you’ve already done so much for me π
Unless being able to reply to comments via email (or even better text message) has something to do with HTML/CSS… But that seems extremely unlikely since they’re about style… Lol!
Anywho, thanks! You’re the best!
Sorry but that doesn’t have anything to do with CSS or HTML. π It is certainly possible, but it’s A TON of work. I’ve actually thought about doing it for my own blog but the hardest part is figuring out how to strip out reply text and email signatures.
You know, like in Gmail when you reply to an email it includes the original email below it.. But obviously you don’t want that in the blog comment, so you have to strip it out. But HOW you do that is super complex, especially because it varies for every single email client. X_X
I’ve been having trouble with line spacing in WordPress lately. It seems like the issues started right around the time of the last update. I know spacing has always been strange with WordPress, but it’s worse now. A number of my old posts are now jumbled blobs of text (an example can be found in this post http://www.kimberlyfayereads.com/2014/08/31/in-review-right-kind-of-wrong-finding-fate-3-by-chelsea-fine/.) The review used to have paragraph breaks, but they’ve been removed now. I didn’t do it. I’ve also noticed that, where before you could hit Shift+Enter to get a line break instead of a paragraph break, that doesn’t seem to be possible any longer. It’s super frustrating to have to go in and edit these old reviews, plus remember to go into the HTML editor for each new post and make sure I have tags at the beginning of each paragraph, particularly when cutting and pasting something from Word or email.
Do you have any suggestions? Anything I might be overlooking in settings? I don’t think it’s a CSS issue, but if you can think of any way to help me solve it using CSS, I would be eternally grateful. It’s super frustrating, as you can imagine.
Thanks for taking questions! I’ve always appreciated your help with any plugin or theme questions I’ve had.
Do you have any kind of plugin installed that would change or remove formatting?
An example would be PS Disable Auto Formatting.
Nope. No plugins installed that would change formatting. No plugins installed since the UBB one, as a matter of fact. And I had zero problems up until the last WP upgrade.
Sadly I can’t really offer any more advice on this then. π It’s not something I could answer without doing more digging, logging into your site, etc.
Thanks for trying!