Twenty Twelve – where to add code

Are you using a child theme or custom CSS (i.e. jetpack plug-in has it)? Make sure you are not modifying theme files. That way your changes won’t be overwritten when WP or the theme is updated. It’s also very important that you have a clean copy of the default theme for troubleshooting purposes.

https://codex.www.ads-software.com/Child_Themes

Yeah I am aware of that.

Btw, if I do modifications to other files (like comments, footer, etc) do I create child files for those too?

Yes, all changes to php files and functions should be made in the child theme. The link above explains all that.

Ok, and so how do I make the background transparent?

These should be helpful:
https://www.w3schools.com/css/css_background.asp

https://www.w3schools.com/css/css_image_transparency.asp

But when you make an element transparent – it’s inherited by all contained elements — so it may work better to use a background image that is transparent. In that case, you’d need to create the image in a photoshop-like program and then use it as a background image in the body tag.

Yeah I know what code to put, problem is I don’t know where to put it in the style.css file. Like I cannot find the place where body styles starts.

Custom or child CSS should be empty – so just put it in the file.

Yeah I know what code to put, problem is I don’t know where to put it in the style.css file. Like I cannot find the place where body styles starts.

For my Child style.css, I began with something like this:

/*
Theme Name: our2012testing
Version: 1.1
Theme URI:
Description: NoNameYet TwentyTwelve ChildTester
Author:
Author URI:
Template: twentytwelve
License URI: license.txt
**************************************
*/
@import url("../twentytwelve/style.css");

/* =Notes
-------------------------------------------------------------- */

/* =Reset
-------------------------------------------------------------- */

/* =Repeatable patterns
-------------------------------------------------------------- */

/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
...

By doing that all the way down, I can now easily place the default and my own sheet side-by-side and compare as I go along while bringing things I want to change on over.

Like I cannot find the place where body styles starts.

With a Child Theme stylesheet, you don’t need to know where certain styles are. You should be creating new styles to override old styles, therefore the general rule of CSS kicks in; to add new styles at the bottom of the stylesheet.

I have always had a problem with the child themes (obviously I have read the WP document on it), I don’t seem to understand it. Like how do access them, edit them etc.

Now, I do plain on learning it ASAP, but I want to see how the theme will look with transparent background. I will re-build the page later (with a child theme etc), just playing with design options for now.

I still haven’t been able to get anything transparent. I need the whole page transparent. So how do I do it in 2012 theme? I tried adding

.content {
background-color: transparent!important;
}

at the end of style.css, didn’t help.

Ok, so I watched a video on child themes and understood it all, got child theme going now.

So how do I find what id or class I have to change? Do I just go through all the files and look, or is there a method for it?

Use a browser developer tool like the one built-in to Google Chrome. The tool exposes underlying HTML and CSS that is applied to certain elements https://snag.gy/hRigR.jpg .