placeonthe.net

A site to share technological guides, news and scripts

ztype and elements

by

It’s not often that I get around to playing games. Knowing myself, I can easily get sucked in to them and the time I would then use for tinkering with something else, improving my skills elsewhere gets poured in to a good ol’ game of Counter-Strike or the like.

However my friend Brian asked about a typing game that we were shown back at the Open Cloud Academy. It didn’t take me long to find it again: ZTYPE – the game is simple but fun, and more importantly a bit of a learning experience too.

The aim of the game is simple: you are a spaceship and you must shoot down the enemy spaceships by typing the corresponding words to them.

The number of words per level increases, their difficulty increases and your skill of typing faster and more accurate becomes a greater necessity. This is all great and fun, however the real learning part for me was stripping away various elements on the web site. I found the flashing side panel, the ads and links distracting.

I set about looking to see how I could remove them using Chrome’s dev tools. Using the Elements tab within Inspect, I am able to see the various styles and source code breakdown. Hovering over the different elements can often highlight the related class, table or element on the page as shown below:

By selecting the specific class or <div> section within the code, I am then able to toggle various features of it. In this case I decided to hide it completely.

However this can be extremely useful when troubleshooting WordPress theme elements and issues, trying to identify what part of the code or theme is interacting with a specific section of the page. By right clicking on the element, I was able to hide it from the browser.

Going through all the different elements, and identifying everything apart from the game itself, I was able to clear up the screen so I was left with just the game.

As mentioned, these tricks do not only relate to improving your experience with this game, but can also transfer to removing unwanted content while viewing a site, troubleshooting design issues and adjusting and testing CSS code when designing your page.

I would definitely recommend playing around with the Elements tab within the Chrome browser just that much more. It’s a great feature to have and an amazing ability to utilize in order to adjust the look and feel of a site which would otherwise have ads and content that is unnecessary for our needs.

editing css within wp

by

I frequently use websites such as Stack Overflow and the Unix & Linux section of Stack Exchange. I like the way these websites format their code and this style is something I’ve also seen on several tech websites, when displaying either CLI input/output or parts of code are being shown.

The style and behavior of a website along with its content can be edited in a number of ways, one of the more popular choices being Cascading Style Sheets, or CSS for short. Using CSS practically all visual aspects of a website can be altered to suit the needs of the creator.

I did some research on the style I was looking for when I came across a few great articles, including CSS Style Pre Tags by Jeff Starr. The page is a detailed guide explaining how to create custom <pre></pre> tags with its properties changes using CSS. With some trial and error, I was able to implement and edit some of the examples presented on the website. The following describes my process of implementing this on my website:

Attempt No. 1

My first attempts were to try and edit the styles.css file of the theme. I hoped to achieve this by going to Appearance > Theme Editor > styles.css

I have tried to vary the CSS content for .pre / pre / code / .pre code, however it didn’t work at all in the way I had wanted. Since then I have removed the added line from styles.css.

Attempt No. 2

A bit of forum research indicated that a better option is adding custom CSS to the theme is a better choice. This feature can be located from the Dashboard: Appearance > Customize > Additional CSS

Using this option allowed me to paste in my custom CSS and see changes take place immediately on the website.

Even though the guide provided some examples, it was not quite what I was looking for. I wanted something similar to what he had used in his guide with <span style="code">, but implementing it with WordPress’ <code> tags. I had to do some digging through the article’s source code to find the location of the style.css file to get the <code></code> style working.

The 2nd attempt using the Theme customization has worked better and would be my recommendation to start editing and implementing style changes. Making changes within the Theme Editor may have severe consequences on the look and functionality of your website. I’m also adding my CSS customization for anyone who is interested:

pre {
	width: 100%;
	padding: 5;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 15px;
	line-height: 20px;
	color: white;
	background: #2E3436;
}

code { 
	padding: 3px; 
	color: white; 
	background-color: #2E3436; 
 	border-radius: 1px;
	vertical-align: middle;
}