[Resolved] Custom CSS – Confirmation more than a question

[taratamiko]

Hi ya Tom and everyone

I’m absolutely tickled pink that I’ve learned CSS well enough to make my own custom boxes for my blog posts. I really didn’t want to use a page builder for them. I managed to created a pen on Codepen and I’ll leave it here in case anyone else would like to see how I did it:

Content Boxes made using CSS

Tom, could you confirm that any other type of styles I’d like to create must first be added to Simple CSS and that the on page Simple CSS meta box can only be used for the CSS that comes with the theme? For example, I can’t just randomly create a custom CSS on page without having first put it in Simple CSS.

Also, if I continue on my crazy love affair for CSS, I may end up with more than 1000 lines, would I then need to transfer my custom CSS to my child theme’s style sheet? And how do I handle updates or would they not be affected.

Thanks so much for any light you can shed on this for me and yay, happy days, I don’t need to rely on a page builder for my blog posts, I just need CSS in my life.

[Leo]

Hi Tara,

Thanks for sharing! Glad you are enjoying working with CSS.

The codes added in Simple CSS page will affect the style globally (every page), whereas the codes added in the page metabox will only affect that specific page.

You can have as much CSS as you want in Simple CSS; updates won’t erase them. Child theme is only needed if you are modifying the core GP files.

Let us know if this is clear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[taratamiko]

Hi ya Leo

Ooooh, thanks so much for getting back to me so quickly. I swear you must be like Tom, never sleeping!

Okay, so I won’t want to change the core GP files, so that’s good, however, when I tried to add a random black box to my post page it didn’t accept it. I had not added this to my Simple CSS.

I’m wondering if it will only work on published, as I’ve got it in draft. Any thoughts on that?

Thanks sooooooo much!

[Tom]

The Simple CSS meta box won’t work on index pages like the blog I’m afraid – it’s a WordPress thing where meta box options only apply to singular pages/posts.

You can add your CSS globally into Appearance > Simple CSS for the blog stuff.

Also, if you end up with a crazy amount of CSS, it might not be a bad idea to move it into a child theme style.css file: https://docs.generatepress.com/article/using-child-theme/

CSS is awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[taratamiko]

Thanks for confirming. So my plan is to do that because I want to be able to fully customise my blog. I’ve seen some cool CSS animations so my piddly 250 lines of CSS is gonna become a lot more than that rather quickly!

I read through the articles about Child Theme and I’m still a bit unsure about how to handle updates.

I am using the child theme and I have my styleshet set up do I now simply copy over all my css from Simple CSS and delete it from there?

Also,when GP gets an update do I need to backup my stylesheet in my child theme first and copy over?

Thanks for confirming, I’d like to avoid future problems.

[Leo]

Yup copy everything over should work. Once you’ve got child theme working then the codes in Simple CSS can be deleted.

GP updates won’t overwrite/delete your stylesheet – however it’s never a bad idea to back everything up!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

Child themes never receive updates, so you don’t have to worry about losing code.

Like Leo said though, backing up once in a while is a good thing 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[taratamiko]

Hey Leo and Tomorrow

Thanks so much. I’m on a mission to get to 500 lines of Custom CSS and then I’ll transfer to my child theme stylesheet!

Happy New Year to you both!

[Tom]

Happy New Year 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts