Screams of confused frustration from CSS rookie

[dccargeek]

Hi. feels intimadted, looks around

I have a question.

My question is far beneath many of you here in this forum and will likely result in plenty of rolled-eyes, shaking heads and shouts of “GOOGLE IT!”.

I spent a few years blogging on a Word Press theme. Then I took a break. During that break I married and had kids.

I’ve since decided to reboot my old blog and start learning a handful of programs and applications (Illustrator, Premier Pro, etc.) to help create more visually appealing content to accompany my rather boring topic (policy). What better time to learn something new and pick up a time-intensive hobby than after having two children. Ugh. Any way…

My site isn’t “live” in terms of filled-with-content, but it is up (dccargeek.com). I’m still trying to narrow down colors, final logo, layout, etc. but that is NOT why I’m here.

So, on to my actual CSS-related question….

I’ve been trying to wrap my head around HTML and CSS and the loving realtionship they share and how it relates to my blog.

While I am starting to understand the many basic parts of CSS, I can’t for the life of me wrap my head around where you physically place any new HTML code that will be styled or applied.

For example, I was reading a post on using SVG files as backgrounds. It seemed like a pretty simple concept. Wrong.

HTML

< a href="/">
  Kiwi Corp
</a>

and

CSS

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

Now, I understand that the CSS goes into my Child Theme’s Style Sheet (right?) but, and here is where I show my utter stupidity, where do I put the accompanying HTML in my WP theme? Does it go in a PHP file? Directly into the HTML text module? Am I asking this question right? Why is the sky blue? Please, someone. Help me! The sky is falling.

puts brown paper bag to face inhale exhale

This has puzzled my brain for days. And while I intend to hire someone to perform some of the bigger lifting in terms of design and code, I wanted to at least be able to play around with a few visual changes so as do get an idea of what is capable before I spend money only to spend it again after I stumble upon a new feature on CodePen.

I think maybe I’ve read so many horror stories about messing up PHP files that I’m afraid-of or hoping-that I don’t need to make any changes to those files. I’ve grown used to just entering content, pressing publish and moving along. And while I know the whole point of a purchased WP theme is to do all the heavy HTML so I can just enter content, I think to really make something mine, different, etc. I need to make changes.

I’m sure this is 4th-grade easy, but that is probably where I am in terms of my HTML/CSS know-how :)

Thank you in advance for all your help!

CSS-Tricks RULES…even though it makes my brain hurt, often.

[shaneisme]

To add HTML to your WordPress blog, it will indeed take modifying the PHP files.

Generally speaking, theme builders will break up the files into things like menu.php, post.php, about.php, main.php…

Also, generally speaking, there’s the one “main” file that is sorta like the parent template that will pull in all the bits and bobs like the menu and posts. So if you wanted to change something that exists on every page, that’s likely where you’ll start.

So what exactly are you trying to do? Johnny 5 need more input…

[nixnerd]

Hi. feels intimadted, looks around

I have a question.

My question is far beneath many of you here in this forum and will likely result in plenty of rolled-eyes, shaking heads and shouts of “GOOGLE IT!”.

Hey… no need to feel intimidated and grovel. All the regulars here are down to help. We ask very little. Not knowing something is not a crime. All we ask is that you try to articulate your problem as clearly as possible and create a Codepen if you can. Since you’re likely interfacing with a database and/or using PHP… that won’t be possible.

I second what @shaneisme said. What’s your specific goal?

[dccargeek]

My goal isn’t very well-defined in my own mind which makes expressing it in text even more challenging. At the very least I want to be armed with enough know-how so that I’m aware of what is capable on the web.

For example I’m fascinated with the fun things you can do with animating SVG. I wouldn’t mind at some point adding motion to my current SVG-based logo.

Again, I apologize as it is hard to put into words what I’m looking for exactly. A bit like we didn’t know we wanted iPods until Jobs made them. Errr, something to that effect.
My goal for this post was to learn, or better understand, where in my files I need to make specific changes to create new elements (DIVs and Classes) to do things like animate a logo.

I think going forward I might be best served using the standard elements already in my purchased theme (Divi 2.0, from Elegant Themes) rather than learning to create new elements.

I hope this makes (some) sense.

Thank you again for your help 

[Author]

Posts