CSS Tips & Tricks: text-transform your Post Titles

This is a simple method to change the case of your sentences, without altering the case of your typing. Some folks like to have their titles show in a specific way, this guide should help you do this easily 🙂

Note: The instructions for this instructional are designed for a self-hosted WordPress site, built with the wordpress.org software. Users who are on wordpress.com must subscribe to WordPress premium or business to use this feature.

Why would you want to do this?

Some bloggers will want to have their sites display the titles of their posts in all caps as it fits in with the aesthetics of their blog’s style; others prefer to have it all lower case, as if it was written by ee cummings, known for writing many of his notable works in lower case.

However, when most of us are writing or typing, we try to follow standard sentence case as possible, meaning that the first letter of every sentence is capitalised and the rest is in lower case. This is an easy way to preserve the “traditional” typing style but let the display look different.

How do you do this?

Step 0: Before we begin, how does this all work?

How we do it is by using the CSS property of “text-transform“. This converts anything within that particular section of code to the style you choose.

There are three main choices you will be using for this property –

  • uppercase – This is the one THAT yOu wIll use To make your text all shouty and all caps.
  • lowercase – THIS IS WHERE YOU WILL HAVE EVERYTHING lower case, a la eE cUmmInGs
  • capitalize – this iS wHEN you wANT to have eVeRy fIRSt leTtEr caPitaliZeD, without changing the state of the rest oF the teXt

If you want to simply make a single portion of text, say a paragraph, changed in this way, leaving everything else, you would change the code for that paragraph to something like –

<p style="text-transform: uppercase;">When this is decoded, it will be shouty!</p>

when this is decoded, it will be shouty!

 

Step 1: Find the style for your title text

Note: The screenshots that I am using in the initial steps are from Safari on Mac, but the procedure to get this information is the same as long as you have a modern browser like Chrome, Firefox, Opera or even Internet Explorer version 11 or higher.

Also, there is no way that I know of to view the source of a page while using a tablet or a phone, so you do need to have access to a full computer to do the first step.

This is where you will need to use your browser to find out what the underlying code is for your site. In the case, I’m going to change the look of my title to all uppercase text.

To get the relevant code to change, you go to the page you want to change and right click on the text that you are wanting to change the look of. From the menu that pops up, you select “Inspect Element”

css1

On the bottom of the window, a new screen will appear – this is known as a variety of things – Developer Console, F12 Tools, Firebug, etc. When you click on Inspect Element, the console will automatically highlight the piece of the page you right-clicked on. When you hover over code, in some browsers, it will highlight what you’re hovering over –

css2

In this example, the main code is the link in the title header, but if you look immediately above, you will see the actual controlling style for this bit of text, the header code –

<h1 class="entry-title">

Breaking this down – H1 = Header, level 1; class=”entry-title” means that this bit of code belongs to the “entry-title” CSS class for assigning styles.

We will need to know this step when we go into the WordPress Dashboard.

Step 2: Change the CSS

So, we know what code to change, but how do we change the code? This is easy – just go into the CSS Editor in WordPress and update the code.

To get to the editor, hover over or select Appearance from the dashboard menu, then select Edit CSS.

css3

If you have not used the CSS Editor, that means you’ve either simply changed things in a configurator when you downloaded your theme, or have directly modified the CSS files for your theme. The CSS Editor is a thing of beauty for three reasons –

  1. You only change the styles for the items you want
  2. You can preview all of the changes prior to committing them
  3. Updating your theme should not break changes you’ve made to it in the past. This is something that I’ve learnt about previously.

To change your post title text, you enter code similar to this in your CSS Editor –

.entry-title {
     text-transform: uppercase;
}

The editor will change colours for you when you have valid arguments like this –

css4

You’ll see that I’ve use another feature of the text-transform property for my blog by using “none” to preserve the text as I typed it originally instead of making it all caps as my theme had done originally. The editor will also auto-format the text to be neat, I didn’t do the spacing on the second line 🙂

All that’s left to do now is to preview the changes by first pressing preview –


css5

Your changes will now appear in a new tab, with an advisory that this is just a preview –

css7

If you’re satisfied with the changes and how they look, then go back to the original tab and click on Save Changes. If you’re not satisfied, you can either change the CSS or just navigate away from the page and the changes will be discarded.

css6

And there you have it!

Over to you

Is this something that you can see yourself using in your blog? If so, show off your site so others can see!

Are there other CSS or HTML Elements that you are looking for help on? Leave me a comment and I will look into it and a post will arrive as a surprise in the future! 🙂

One final Note – Be aware of this when you’re trying to copy text that may be affected by text-transform. Some browsers will copy the text as it was entered into the code and not as it was displayed.

From my testing so far, the only browser family that will ignore the text-transfor when copying text that has been transformed is Internet Explorer. I’ve tested this in both IE11 and IE12 Microsoft Edge and text is copied as it was entered. Chrome on Mac and Windows, along with Safari will copy the text as it is displayed.

 

How To: Use TunnelBear

bear

Living in the US, I have access to pretty much any TV program that I want to get. At least, those that are aired here. There are lots of programs that air overseas and never make it to the USA (for example, The Killing Season, an ABC series talking about Kevin Rudd’s time as Prime Minister), or if the come over here, get changed around (take The Slap, a fantastic ABC series which was re-made by NBC)

Naturally, there are ways that you can get these shows from slightly less legitimate sources, but that has risks of its own like viruses and potential legal issues. If you know what you’re doing, it’s a solution to get a copy to keep for all time if you so desire. You can also use these files on other devices, but it’s not as easy as some other solutions.

Enter TunnelBear. I first heard about it during the 2012 Olympics when it’s very easy to get frustrated with the host broadcaster here in the US – NBC – when they can’t even figure out how to show the ceremonies live. I used it in order to access the BBC broadcast of the closing ceremonies, as shown here, NBC with volleyball and the BBC with the closing ceremonies –

oly - 1

How does it work?

To save a whole long technical explanation, what TunnelBear does is tells a server that you’re located in another country, like I did above in the example of watching BBC One’s Olympics live while NBC is showing replays

A TunnelBear comes with initial access to up to 13 countries – Canada, France, Germany, Ireland, Italy, Japan, The Netherlands, Singapore, Spain, Sweden, Switzerland, the UK and the USA. You’ll note that my initial example of the ABC, from Australia, is not included.

That’s because in order to access Australia, you do need to pay for your TunnelBear. It’s not very much to pay – US$5 per month, or $50 per year. By paying, you actually get unlimited data for that time period, and access to all 14 countries (which grew from just 2 back in 2012!)

So, how do you get started?

Go to the TunnelBear website, and click Download –

tb1

 

On the download page, select your flavour of operating system. TunnelBear is compatible with Windows Vista through 8.1; Mac OSX Snow Leopard v. 10.6.8 and higher; iOS 7 and higher; Android 4.01 Ice Cream Sandwich and higher; and, more recently, Google Chrome via Extension.

tb2

After downloading, you’ll go through the installer for Windows. For Mac, it’s a normal install of dragging into the Applications Folder. While installing in Windows, watch for the messages. They’re not your usual install messages 🙂

The first time you launch TunnelBear, you’ll be asked if you have an account or not.

tb3If you have an account, all you have to do is enter your username and password and go. For a New account, here is all you’re asked for –

tb4

Your first name, email, a password and your Twitter Username. You’ll need to verify your email address to use TunnelBear.c I’ll get back to the Twitter name in a moment. First, let’s take the quick tour:

tb5

Step 1; Select a country and turn on the TunnelBear

tb6

Step 2: Use your browser as normal. The only difference is that you’re privately browsing from the country you chose in step 1!

tb7

Step 3: If you wish, turn on Privacy and block trackers like Facebook Like plugins, etc. You’ll also be asked to give them a like on Facebook and a follow on Twitter. Do that if you wish to do so 🙂

This is what TunnelBear looks like when you have a basic account. Remember them asking for your Twitter username? Here’s why –

tb8

 

With a basic account, you only get 500MB of data which resets each month. You can go through that quickly. Very quickly, like maybe an hour of TV programs. If you send a tweet to the TunnelBear team, you get a free 1GB of data for the month. It’s a great solution for someone who is a light user – for example, only using TunnelBear to listen to BBC Radio 5 Live Sports Extra – whose programmes are mostly geoblocked due to rights restrictions.

tb9

 

Once you send your tweet, you will get an email confirming that they have received the tweet, and you’ll see the extra GB in your allowance.

What’s Next?

Well, now that you’ve got your bear up and running, with your 1.5GB of data after tweeting the worker bears, it’s time to get browsing. Watch the latest episode of Dragon’s Den on the BBC iPlayer. Maybe you want to El Hormiguero on Antena 3 from Spain, or The Mentalist on the French Netflix (don’t worry, it’s in English, just any text on-screen is in French).

IMG_1017

Really, it’s all up to you now!

There is one other feature to mention. It’s something that you get when you upgrade to a paid bear. It’s the IntelliBear.

tb10

 

What the IntelliBear does is lets you set either a whitelist or a blacklist of sites – you can tunnel all sites (default), set up a list of sites which will be forced through TunnelBear (which is useful if your only purpose for TunnelBear is for one country, or for a work purpose, or set up a list to exclude from the bear.

As you can see I’ve excluded my site, Snoskred and Lumosity (a bit of a legacy from when I was having issues connecting). For the most part, the only reason I lock sites out of the bear is because if I change IPs, the site will boot me out sometimes. Otherwise, everything else goes through the bear. 🙂

Over to you…

Do you use TunnelBear or any other VPN-style service (Hola extension, VyprVPN, or DNS changes like UnblockUS)? to access content from other countries? Leave a comment to let everyone know what you’re using! 🙂

 

 

 

Using AVCVideoCap to Record a Program via FireWire

In my last post, I showed you what you needed to record TV shows from your cable box. This post is an extension of that last one, which will focus on the piece of software that is included in the Apple Firewire SDK called AVCVideoCap. This is a free piece of software that is easy to use, but can seem daunting at first (especially since there are no instructions included).

Before beginning, I will note that the application will not appear in your applications stack. You will need to find it using Spotlight. After finding it, it would be a good idea to pin this application to your dock for easy access in the future.

Now, to begin recording a program, make sure that the cable box is connected to your computer prior to launching AVCVideoCap. This is what the screen will look like when you open it with the box attached –

avcvc1

In order to record a program, click on the cable box from the list above, and then click on Capture from Device. This will initiate the capture process; you’ll be asked to name your capture –

avcvc2

Then set parameters for length of recording, delayed recording and channel, if necessary. I have not tried the tune channel function as all the programming that I have captured so far is from my box’s hard drive and not being recorded from a live TV broadcast. I suspect that, having tried the ‘tune channel’ function in AVCBrowser, it will not work.

avcvc3

A very important note! The scheduling software seems to think this is the extent of all of time –

avcvctime

What this means is that in order to schedule a recording for the future, you have to take your computer back to the past…by 7 years or more! I’d highly recommend that if you are using Time Machine (highly recommended), you disable it or disconnect the drive when you go back in time. Otherwise, weird things could happen…

Once you click OK, it will start recording, and the screen will change. While recording, you will not be able to review what the hard drive is recording. One thing that I have been doing and this has been allowing me to have error-free recordings is to use an application like Caffeine to disable the screensaver and sleep mode on the computer for a length of time.

avcvc4

Now, what you will see is the status of the recording – if it’s a scheduled recording, it will tell you how long it is until the recording will begin. While recording, this line will report how long you have left in the recording period. Below there, you will see some technical information about the recording. Optimally, the only field you will want to have any numbers beside 0 in is the captured frames. Overruns and dropped frames mean that you will lose bits of data in the finished recording.

Then, you have the file name for the program you’re recording. Below that is another very important line.

This line is the “EMI Status” – this is where you will see the Copy Control Information for the program that you are recording. If this says anything other than “Copy Freely”, the program will look like it’s recording, and disk space will be used. However, when you go to play back the file, nothing will play.

The channels most likely to use “Copy Once” are going to be the premium movie channels (your HBOs, etc.). Some other channels will use this, but most of your basic channels will be Copy Freely. You’ll also see that services like Pay Per View and Video on Demand are “Copy Never” meaning that while you can view the content, you cannot save it to any format that enforces the copy protection schemes.

If you need to stop recording, you can always use the “Abort Capture Now” button, which will stop the recording immediately. This is useful if you are attending the recording and the show finishes prior to the end of the scheduled time. Otherwise, the program will automatically stop recording when the timer hits zero, and will generate the file for you.

Over to you

Is there a piece of software that you would like a text how-to done on? If so, let me know in the comments, and I’ll try to put something together. 🙂

How to capture recordings from your Cable Box

Recently, I was tasked by Snoskred to look into providing her with a program that we both like to watch, and just one more in a line of programs that she’s gotten me into, but that’s something for another day. 🙂

In the past, it worked out really well for me to grab things off of the TV with an analog capture device, but that was in the mid-2000s, just as HD was in its beginning phases, with a low number of people actually with those kinds of TVs. Even as recently as last year, I did use an analog device to capture this video which was downconverted from 1080i HD to 480i Letterboxed SD –

Sure, it works, but it’s not of the highest quality. Realizing that my MacBook Pro was one of the final ones with a Firewire cable on it, I wondered how easy it would be to do it.

With the right equipment, it’s easier than you think. 😀

Equipment –

Here’s what you’ll need to capture video in HD from a cable box –

  • The correct Firewire cable for your computer and box
  • Capture software
  • Conversion software
  • Editing software to cut commercials

Getting the correct Firewire cable –

The cable box is fairly easy. If you live in the US, an FCC regulation requires that all cable boxes manufactured after a certain point have a Firewire output built into it. Almost all boxes have a 6-pin output for Firewire. Somehow, I knew that inherently. What I did not know was which size to get for my MacBook Pro.

MacBook Pro Ports

These are the ports on it – from right to left we have: MagSafe V.1, RJ-45 (Gigabit Ethernet), Firewire, DisplayPort, 2x USB 2.0, SD Card and Headphone/Microphone 3.5mm

Looking at the size, my assumption based on the options (4, 6, and 9-Pin), this must be a 4-pin port. I go to order it and 5 days later it arrives in the post. I connect it to the box and I go to connect it to the computer.

It’s too small. Damn.

Some frantic googling later, I discover that the MacBook actually has a 9-pin connector. I then purchase a new cable and it arrives on the next Friday; I take it out of the bag, look at the connector and look at my MacBook…and it fits!

That’s the cable sorted.

Capture Software

This is actually quite easy if you have an Apple product. All I had to do was go to the Apple Developer site and download Firewire SDK 26 from there, which was free.

One thing to note is that you will need an Apple ID to access the downloads. If you have an iOS device, or use iTunes for your music, you have an Apple account.

Once you install the SDK, making sure that if you’re using Yosemite or later you allow “untrusted” developers’ apps to be installed (despite this being from Apple Computer), there is a piece of embedded software called AVCVideoCap.

I will do a separate post on how to use AVCVideoCap, but one important thing to know is that when you first launch the application, you will need to find it through Spotlight; I would then recommend either placing an alias on your desktop or pinning the icon to your dock.

Important! When you are recording something, you must watch it on your box at the same time; you can of course watch something else if you have another input or a smart TV, but the box must stay on the program in order for it to correctly capture the program..

Step 3 – Converting the file.

After your recording is completed, you will be left with an .m2t or .ts file. This is what’s known as a transport stream. This is the file I got from a 5-minute recording –

1.01 GB for just over 5 minutes of video.

No, this is not a misread on the file size. Since this is literally the raw output for the channel, it’s at full bitrate which is in the range of 5-8 Megabytes per second. A 60-minute recording will take 12 GB of space on your hard drive, etc.

You can see where this is going, and it’s not a friendly situation to share the file with your friends. Or, for that matter, to sites like YouTube if you are using a Digital Video camera that doesn’t support SD cards.

You’ll need to have some software to convert this monstrosity of a file to a more consumable size. Not only that, very few programs can read transport streams – VLC will, but not much else can handle it.

That’s where Handbrake comes in. I’ve used Handbrake to convert files from DVD to digital, and even to transcode movies to a more manageable format for my iPad.

This is something that is fairly straightforward. The only things that I will do when I do a conversion in Handbrake from the raw to an intermediate file is to downsize the image from 1920×1080 (full 1080i) to 1280×720. This helps reduce the file size greatly.

If you’re using a newer computer, you can expect this to take about the length of the program that you recorded or less. On an older computer, it can take upwards of 2-3x the length of the program due to it needing more processing power than the computer may have.

In the end, you’re left with this –

Keen-eyed folk will notice that the filename is different. That's because this is actually the original file I tested out to see if this scheme will work.

You’ll notice how much smaller this file is compared to the source file – from nearly 1 GB down to under 70MB, or a 94% savings in size! Typically, my intermediate file will be in the 1.5-2GB range.

Step 4 – Trimming the Fat

Since PythagoraSwitch is a 5-minute program, there isn’t any need to cut things from there for the most part. However, the show that I am recording for Snoskred is an hour-long program with about 19 minutes of commercials per episode, I needed to get something to delete the advertising from the program. 🙂

In one of the YouTube tutorials that I watched, the person recommended a program called MPEGStreamClip to edit your videos. So, I downloaded it. And it didn’t work. The video kept stuttering and the program was totally unusable.

This time instead of just going to Google and picking whatever comes up, I think…there has to be something on Reddit…and I find /r/videoediting which has a quick list of editors by price. Of them, I chose Avidemux, which I can tell is modern since it has both 32-bit and 64-bit versions.

Avidemux is very easy to use even for a complete novice like myself. The keyboard shortcuts are straightforward (i.e. you can do things with single keystrokes) and it gets the job done quite efficiently.

In the end, if you have the correct equipment, this is a great way to preserve any TV shows that you may have been keeping on your DVR for ages and want to keep. 🙂

Offline Blog Editors: w.bloggar

One of the neatest programs to take the blogging world by storm (somewhat) has been Windows Live Writer, a program from Microsoft that allows you to create drafts, and publish to your blog from just about anywhere, no browser needed. I almost got to the point of downloading it, but then I thought of a program that was already on the computer.

The program is one that had laid dormant for quite a while, but is now again in part-time development – w.bloggar, a piece of freeware developed by a guy in Brazil, who has had this around for quite a few years now. It was the first offline editor that I had used (mostly because it worked with Blogger, and allowed me to quickly edit posts without having to deal with Blogger’s old system of constantly having to republish the blog every time you made a post.

There are obviously other offline editors out there (most notably WLW, which I have not used, but almost downloaded before digging this program out of the archives), but w.bloggar is the one that I’ve used almost exclusively, unless you want to count EditPad as an offline editor (which is just as valid) 😉 .

Getting started

When you download the program (if you want to use a portable version, that is available as well as a full version that can work with either Internet Explorer or Mozilla with an installer), you can go ahead and install it, or just run if if you downloaded the portable or zip versions. Now, since I’ve already got it installed and set up, I will just jump to getting your blog set up on here.

The program works as an extension of your blog; when you first start up the program, you may be shown this screen –

If you do start with that screen, then you’ll need to click on the little button next to the drop-down box and select new. This will bring up the new account wizard –

As you can see, you don’t even need to have a blog to get started with w.bloggar, but for the case of this tutorial, I’ll show you how to go about making a new account for a blog you already have (it’s fairly self-explanatory, so the screenshots will just be a guide).

The first screen you’ll see after selecting that you want to add your current blog as a new account is one where you can select which blogging platform you’re using (the program supports a whole host of them), along with setting an alias for the blog you’re setting up. For this tutorial, I’ll use my testing blog and aptly call the account Sephy Test.

In the next screen, this is where you put in the information about your blog – since I like to keep my test blog’s address somewhat quiet, I’ll leave the sample stuff in there for the shot. Anyway, simply put in the address of your blog (only the domain name, i.e. www.sephyroth.net), and then in the Path box, put the directory that you have WP installed on, followed by xmlrpc.php (so, if your blog is in the /blog/ subfolder, then you’d put /blog/xmlrpc.php; if it’s in the root, then /xmlrpc.php). You can also adjust the port you use, turn on encryption, and choose if you want to use UTF-8 encoding.

The next screen is quite simple – just put in your username and password for your blog – if you want to save it, go ahead, otherwise you can leave the box unchecked.

And, that’s it – you’ll now be in the editor window, ready to make a post to your blog! (well, of course, now I have this post in there as a draft, but you know what I mean. 😉

Touring the editor window

Now, let’s take a quick tour of the editing window. The first few buttons on the first toolbar are fairly obvious, through to the spellcheck.

After that is one of the features that I didn’t even know about until starting to write this (in fact, there’s a lot of hidden stuff in here – so if you decide to get it, do some exploring!); as a matter of fact, it’s quite a handy feature – custom tags. This button allows you to put in your own HTML tags that you use frequently (i.e. for me, one making a centre-aligned paragraph would be useful because of all the pictures I post).

Then you have a control area – Options, a pseudo-logout button, which brings you back to the w.bloggar start window. Next is your blog list – if you use Blogger, this is a very handy tool – it will retrieve your full list of blogs, and you’ll be able to select the blog you want to work on. The next button (the one with the red checkmark on it) is the Blog Properties button, if you click it, you will be brought to this window, where you can make custom settings for previewing, how you upload your images (yes, you can upload images properly to WP – with thumbnails!), and media information –

The other buttons of importance on the first row are the next one – go to blog site, which loads the blog in either IE or your default browser (a simple option you can switch in the options), and the Posts button – if you click on the down arrow next to Posts, you’ll be able to edit the last number of posts, or choose a post number to edit (if you know the number of the exact post you want to edit, that is 😉 ). The Template button that you see at the end, before the Help button is grayed out because you can’t edit the template for WP blogs, only for Blogger blogs that use classic templates.

If you select a number of posts to edit, you’ll see this dialog, from which you can select a post to edit (by the way, it doesn’t have to have been made in w.bloggar to edit) –

The second row of buttons is a standard formatting bar, with a couple of buttons that are important at the end – first is the upload button, which allows you to upload a file to your blog. There’s also the Post and Post & Publish buttons – Post is used to save a post as a draft on your blog’s site, and Post & Publish is used to publish the post to your blog.

This is what the Upload dialog looks like –

Now, in the main body of the screen, you have your basics, like post title, and categories (which are culled from your category list; if you want to use more than one category, click the ellipsis to bring up your tag list and tick as many boxes necessary. The tabbar that is there is used to create options – More is for if you want to have a jump in your post, and preview allows you to look at your post in what should be your blog, but so far I’ve had issues with getting it to work properly with WordPress.

One of the features accessible from the More panel is the Advanced options. This is where you can set your trackback and comment settings, along with text filters (if enabled), and edit the date and time.

Using these advanced options has created an interesting problem – if you choose to edit the time of your post, WordPress will read that as having been posted at the time you set, GMT. For example, if I set a post in w.bloggar to have a timestamp of 4 PM, my blog would think that it was published at 10 AM, or 6 hours behind server time. However, if you use the current date & time option, it will publish the post at the time it currently is on your blog.

The status bar has the usual stuff – date, lock info, insert/overwrite status, and a couple of other things – first, the WordPress logo is clickable – that will bring you to the account properties, where you can adjust the settings from the original setup, and the notes brings you to the Media page from the Blog options dialog

Using the Editor

It’s simple to use the editor in w.bloggar – it’s just like using any other plain-text editor (EditPad, or the WordPress “code” view), where you need to insert the HTML code manually, but the program does give you a generous helping hand, by way of the Format and HTML menus, along with the HTML toolbar.

You’ll notice that the HTML toolbar and the HTML menu have the exact same layout, save for the Custom Tags item appearing in the menu and not the toolbar as it is already in the main Toolbar. If you want to try a preview of how it would look on your site, you can try the Preview tab, but it has some pitfalls, as this is what a preview of this post looks like in there –

As always, your mileage may vary with your platform, but so far I’ve had issues with WordPress, and when I used this for Blogger, they didn’t have the customised CSS functionality that I remember.

Give it a go!

If you’re interested in giving w.bloggar a go, check out the download page – there you’ll find links to download all the versions of the program. It is Windows-only, with a selection of languages available. If you’re adventurous, you could always use the first stable version, but then you’d lose a lot of the additional functionality of the newest versions, including uploading files. 😉

I have to say, by the way, that I’m actually pretty sold on this program again – it’s simple to use, there isn’t that much of a learning curve, and the best feature of all – I’ve had it running for quite a while, and done a lot with the program today, and it’s only using 17 megs of virtual memory, and 25 megs of RAM; I bet Windows Live Writer can’t live up to that. 😉