CSS Me

I was bored in work, and just days after migrating this blog to hosted WordPress.com, I decided to move it back to a self-hosted one at sarkymarky.com, which in hindsight was a good idea as it’s cleared all the shit from the site.

Anyhoo, I was stuck on what to put on this crap, so while actually doing some work in CSS, I had a little bit of an idea… why not CSS myself. Wow Mark, you have too much spare time.

So I set up a little Text widget in the footer and started writing, which is always a struggle for myself as I’m relatively modest, yes seriously :p

I use the Monokai theme in Sublime Text, Brackets and VSCode and since the footer on this theme is black, let’s run with it.

Add some DIV tags to seperate the content, a little padding to make it a little more legible and wrap the selector, property and values in span’s and ta-dah!

Now let’s copy the colours from Monokai, and drop them into CSS.

And boom.

If you don’t have a dark background, here’s the Visual Studio scheme.

Yop Poll WordPress plugin: Changing class of button and add FontAwesome

Since moving over to a new theme on the works web site, it’s been my mission to change the INPUT and BUTTON tags to match, and sometimes it’s just not possible without massive duplication of CSS.

In this morning’s example, I wanted to get rid of the styling imposed by Yop Poll and put Twitter Bootstrap’s btw classes in it’s place, and I’m not in the mood for a little thing like a lack of customisation or specifying classes beat me.

We want to look at this section.
jQuery(document).ready(function(){
runOnPollStateChange_%POLL-ID%();
});

The id button is #yop_poll_vote-button-%POLL-ID% in the template so the jQuery script is:

jQuery( "#yop_poll_vote-button-%POLL-ID%" ).removeClass( "yop_poll_vote_button" ).addClass("btn btn-default");

Ta-dah! But we’re not going to stop there. We use FontAwesome, it would be nice to have that as well wouldn’t it? Well let’s do it, using the same ID, we can just prepend to the HTML in the button.

jQuery("#yop_poll_vote-button-%POLL-ID%").prepend('<i class="fa fa-check-square-o"></i>');

And if you are going to ask how to put the icon AFTER the text then you should be ashamed of yourself and step away from WordPress!

And in the words of Jimmy Saville (whoops, probably triggered someone there), “how’s about that then.”

Ooooo new feature… what can we do with it? Oh.

It’s amazing what you can do with technology these days, and it’s equally amazing on how little amuses the innocent and what goes through the minds of development teams when a new feature is added.

An example today is a new version of a mobile app the company is developing, and they’ve just added electronic signatures to the app, anyone who has tried to get your signature to look anything resembling reality with post deliveries will know how painful this is.

So after 30 seconds of trying signatures out, the development team decide to get creative. And draw stick men, and then of course the obligatory cock and balls.

Hemingway Rewritten WordPress Theme accent colour

I’m a big fan of the Hemingway theme, and I’ve only just noticed that there’s a new version by Anders Noren called Hemingway Rewritten, which adds lots of little features. But strangely, the Customizer option for the accent colour has been removed.

Cue a few minutes looking for that default green colour and creating a custom CSS file to a nice red.

Go to Appearance > Edit CSS and paste this into the box.

Simple search and replace #c0392b with your open colour for your own theme.