Let’s start from the Beginning


I hate my current website. I liked it better before, but then I decided to get rid of all my JavaScript and wanted to use new things I learned. The point is… I got lazy.

I have the day off, I’m going to try and baby-step my way into making a decent theme. We’ll start completely bare-bones using Underscores as the started child theme. I’m making a post each step of the way and if I remember, I’ll take a GPSI test page to see how bad I’m doing with optimization each time.

Let’s See What I Can Break!

I don’t remember shit really about my current web design. Shouldn’t be a big deal, whatever this will break has probably been broken since I just randomly jumped around free themes for a bit.

Wish me luck

Okay! It’s Installed!

and I have to say…it’s looking good. Real good. I think I’m done for a bit. I’m going to take a nap and come up and start updating things.

We now have a baseline of how the site looks with about as much optimization that can be done. Desktop both shows these as 100, but desktop is easy. I’m looking at maintaining high mobile scores. Right now, Google is unable to list any opportunities for me. I guess I need a better server or CDN to get 100s on mobile.

I fingered it out. There was an api script that was loading, and that one script was causing a bit of slowness, not giving me the perfect 100s I assumed I’d get with a completely bare-boned theme.

cdn-cgi/bm/cv/669835187/api.js

This script is put on by Cloudflare as an anti-bot measure. I believe it to be worth it, so I’m turning it back on now that the mystery is solved. There, back added and now back to the 95-97 range.

Well I’m A Sleepy Boi

I added some CSS

.site-main{
	max-width:75vw;
	margin:auto;
}

Just so content doesn’t expend full width. I will review this later and see if this is the preferred way. I quickly chose those because it doesn’t interfere with the header in case I want a full width navigation bar which seems like…a pretty normal thing to do.

Header

Well, the theme starts with a menu with no styling. We were able to make it look like a typical menu with just a bit of CSS. Tip here, I used Coolors to get a color scheme then I named things like :

--darkgreen:rgb(38, 65, 60);

Which is useful cause now I just have to remember ‘darkgreen’ when I want to call the color like this –

color:var(darkgreen);

I picked 5 colors and gave theme variables that describe them in order to better help me memorize the variable names. That’s a big start to this whole theme building I think. By the way, I am self-taught and not a profession, I mostly solve problems that I made to beginning with. I just also know that no professions are around on my site, so I can say what I what with an heir of authority.

This color scheme is garbage. Oh, well. Did another fix, added flex to the container of the main nav and so now the menu items are aligned center…signed a left aligned box… It makes sense, it saves me 25 percent of the upper-space if I want a logo or something. This means I have to do something for mobile…probably going to take JavaScript

Guess Which Idiot Forget To Re Add Google Analytics To Thier Header?!

This guy! 🙂

Quick lesson on Google analytics, there is about a zillion ways to add it to the site, but essentially they all do the sme thing, take the tracking code or the GTM tag you get from google and plop it in your header. I did this by going to –

Appearance >> Theme Editor Selecting Header.php and going crazy!! This is a safe file to play around with…nothing can really go wrong editing it directly. Jamison has denoted all lies in a class call lie everything with this class can be disregarded and really says something about whoever does the copy on this page.

So With A Little CSS After A Nap

/*mobile menu */
@media only screen and (max-width: 1200px){
	
}


/* intial colors */

:root {
	--black:rgb(37, 35, 35);
	--blue:rgb(56, 97, 140);
	--white:rgb(255, 255, 255);
	--yellow:rgb(255, 231, 76);
	--pink:rgb(255, 89, 100);
}

/*intial text and links*/
body{
	background-color:var(--black);
	color:var(--white);
}
body a{
	color:var(--pink);
	text-decoration-style:wavy;
	text-decoration-thickness: .1em;
	text-decoration-color:rgba(255, 231, 76, .6);
	text-underline-offset: 5px;
	
}
body a:hover{
	color:var(--blue);
	text-decoration:wavy;
	text-decoration-color:var(--white);
}
body li a{
	color:var(--white);
	
}
body li:hover{
	
}
body li a:hover{
	color:var(--pink);
	text-decoration-color:var(--white);
	text-shadow:18px 15px 30px var(--pink);	
	
}
body a:visited{
	color:var(--blue);
	text-decoration:wavy;
	text-decoration-color:var(--white);
	text-shadow:2px 13px 24px;	

}
h1,h2,h3,h4,h5,h6{
	color:var(--blue);
}
.site-main{
	max-width:75vw;
	margin:auto;
}

.menu-main-navigator-container{
background-color: var(--blue);
}

#primary-menu{
	display:flex; 
	width:75vw;	
	justify-content:center;
}	
#primary-menu li{	

		margin:auto;
	
}
 #primary-menu li a {	
	 padding:20px 20px;
	 font-size:1.2rem;
	 font-weight:bold; 
	 background-color: var(--blue);
}
#primary-menu li a:hover {	
	 padding:20px 0px;
	 font-size:1.2rem;
	 font-weight:bold; 
	 background-color: var(--black);
	box-shadow:3px 5px 3px black;
	padding:20px 25px;
}

/* end initial stuff */


/* custom spans */


pre{
	background-color:black;
	color: var(--blue);
}

This is what we have so far. When we are done, maybe we will actually stick it in a file or something like a profession…or even add comments. It’s so basic right now, that I’m not too worried, and it’s subject to change. It’s not very mobile friendly, though, is it. I’ll need to get on that.

I updated it, it’s beginning to make less sense. 🙂 got a mobile query ready almost for the mobile menu shift.

I Just Realized Why I Gave Variables Names I Couldn’t Remember

It was so when I decide to maybe add a dark mode preference, I could change those variables conditionally. Now my variable name is black and change that to the color white…would be awkward. 🙁

You live you learn and if you decide to worry about it you use find and replace.

Mobile menus are a pain in the ass. We fixed how we want images to display though, so I got out of bed for something. I’m going to read. This will be the end of this post. I’ve read a few old books that I should do a book report on. Also look out for a new piece I’m writing about Hugh Grant. I lied at work and pretended I knew more about Hugh grant then I do….so….research paper.


Leave a Reply

Test Your email address will not be published. Required fields are marked *