Theme change to X - want to change tag css

Support
#1

Greetings,

Convinced a client to goto Ethos 1. She has a blog with 50+ previous posts using a basic wordpress theme. After changing the theme, I used custom CSS globally to change the header tags and such. However, I want to use cornerstone going forward and the global CSS is messing it up.

My question is, how can I use the custom CSS for the previous posts? I tried to add code to the bottom of each post in post settings, but it says use classes. These do not work in the Post Setting Body CSS box:

p {font-size:1.1em;}

h1{font-size:2.5em;}
h2{
font-size:2.0em;
font-weight:300;}
h3{
font-size:1.5em;
font-weight:300;}
h4{
font-size:1.1em;
font-weight:300;}

How can I add this custom css to each post so I can remove the global CSS and move forward with Cornerstone default settings?

#2

Hello Jana,

Thanks for writing in!

It is best that you know the order of how the styling gets loaded in your site.

  • Theme’s stack style.css
  • Child theme’s style.css
  • WordPress Additional CSS in Appearance > Customize
  • Theme Option Settings
  • Theme Options Custom CSS (global css)
  • Cornerstone’s page custom css

So if you have a child theme, it is best that you add your custom css in the child theme. And if you are not using a child theme, you can place your custom css in the WordPress Additional CSS so that your custom css will be applied to old posts but will not affect the Cornerstone texts.

Hope this helps.

#3

I understand the importance of a child theme since I make changes to the php code. I have implemented a child theme.

The previous posts were not made using cornerstone, so I can’t add css that way, & I’m not converting 50+ posts to cornerstone.

Forgive me, it seems I didn’t make myself clear.

Essentially all I am asking is what is the css code for an individual post in the “body css class(es)” form to change H1, H2, p, etc tags?

#4

Sorry for the confusion, Jana.

Going back to your first post, there is no way to add CSS to each post if you’re not going to use Cornerstone. There are 2 ways you can target all your single posts only.

  1. Easy but not optimal. Add the Single Post CSS Class to your selectors so you turn h2 to .single-post h2. The code will still reside in Global CSS so it’s not optimal because the CSS is only needed for single post and since it’s global, it will be loaded in pages where it’s not needed.
  2. Requires PHP but optimal. Before proceeding with this method, please remember that syntax errors introduced in the code can break your site. Below is a sample custom code to be added to your functions.php to add CSS only to all single posts. I’ve tested this before posting but can break your site depending on the functions you’ve added in your functions.php. If this does break your site, please consult a third party developer because we have no support custom code issues.
/* Add CSS to Single Posts Only */
add_action( 'wp_head', 'single_post_css');

function single_post_css() {
  if ( is_singular( 'post' ) ) :
?>
<style>
  /* Insert all your CSS below */
  h1 { font-size:2.5em; }
</style>
<?php
  endif;
}

Lastly, the Body CSS Class(es) is not a place to add CSS. It’s for assigning classes to the body tag of the post.

Hope that helps.

#5

Thanks for getting back to me.

I thought so, probably why I couldn’t find the solution online anywhere.

To clarify, this code will only affect the previous single posts? In the future, when I use cornerstone, those posts will not be affected by this?

#6

Additionally, I don’t mind going through the 50+ posts and copying and pasting the same CSS somewhere. So if that is a solution that is fine too.

#7

No, it will apply to all single posts regardless if you use Cornerstone or not.

You’ll need to use a third party plugin like this: https://wordpress.org/plugins/oh-add-script-header-footer/. Please contact the plugin author for usage instructions.

Thanks.

#8

Yes, just tested. Your “solution” to add lines to functions.php which is exactly like adding it to global css.

Should have just passed the buck in the beginning and saved us all some time.

#9

That’s incorrect. The CSS will only apply to single post. Global CSS will apply to all pages in your site including archive pages like the blog page.

Sorry about that. I was actually thinking to save you some time by applying the CSS to all single post at once rather than adding individually. I didn’t intend to waste time.

#10

I see about your first point. However, the whole site needs that CSS to be applied, except the new posts that will be done with Cornerstone.

Anyways, lost in translation. Guess I’m on my own.

#11

You previously said that you need that CSS for your 50 posts so I suggested a third party plugin for that.

Now, you need it for your whole site. That is technically possible but that will need custom programming which is outside the scope of our support.

Thank you for understanding.

#12

Couple things and this thread is done.

First, thanks for giving me the idea about the plugin. Thought there were some lines that could be added to functions.php to fix this, but that isn’t possible, or as your team is trained to say like a mantra “out of the scope, blah, blah…”

2nd, your suggestion failed again. That plugin is out of date and not supported nor tested on the latests version of WP. Didn’t work at all.

3rd, for those that are searching for a solution to the same problem I had, download the plugin: “WP Add Custom CSS”. Works like a charm, although it’s another plugin.

4th. Does your support team have a shortcut to give the answer “outside the scope of our support, thanks for blah blah blah”? If not, it should be implemented to save company even more time and money. In my experience, it seems like the goto reply.

Nothing against you personally. You’re just doing your job @christian_y

Take Care

#13

You’re welcome. I’m sorry if you think “outside the scope of our support” is like a mantra but it is only used if what customers want is really beyond what the theme is capable of. Please see our Terms.

The reason I personally use that is to prevent custom development and supporting third party plugins. We should be only giving an idea if we can like what I did here but we should not continue giving support for them as they’re not part of our products.

It’s only a suggestion. Please note that we are not here to suggest or recommend specific plugins for your project nor we could do that at all. If you also review my response, I said:

I said like. That means you’re free to search the WordPress repository for better plugins specific to your requirements. The plugin you used is “like” what I’ve suggested. It only just works for CSS.

Also, if the plugin hasn’t been tested it does not mean it doesn’t work. I understand that you wanted a tested plugin and has support though so glad you’ve found one. Just note that they are not our products and we’re not responsible for checking their compatibility with our products nor WordPress.

No, we don’t have a shortcut. We often go above and beyond to solve the problem if we can that is why I suggested a plugin.

Thanks and take care too.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.