So many thoughts. So little time.

Category Archives: Code

3 Things ExpressionEngine can do that WordPress simply cannot

I’m a programmer who uses the ExpressionEngine CMS to run some pretty data-intensive websites.

Data intensive!

WordPress is a great platform, don’t get me wrong. (This page and most of my other personal pages are all WordPress sites.)

But if you’ve got data, you want something like ExpressionEngine. Here’s why.

If/Then statements.

Anywhere on any template for any page that I want to assign that template to, I can have conditionals that decide how things are going to work depending upon conditions in the data retrieved.

Say a field is empty.

I can simply say

{if fieldname ==””}do this{/if}

and

{if fieldname != “”}do that{/if}   (…Or even more simply, {if fieldname}do that{/if}!)

(WordPress has one major field that you write inside of. You can add custom fields. What happens to the page when those have content (or do not) is not easily controlled.)

URL Segments

I can test segments of the URL and insert their data into paths or anywhere I want, like for instance, as part of an if/then statement!

Just today I had the situation where I used that where nothing else would have been easy. Most of my pages have a “Go to top” link. I had a search result page with a long special URL generated by the built-in search engine.

I was able to construct that link I needed in EE with:

<a href=”{path=template_group/template_name}{segment_3}#top”> – Ta Da!

That would have been a bit of work in WordPress.

Embedding Code

In EE, I can easily embed an entire code routine to insert its contents anywhere on a page I like. I can send that code routine variable data so it is customized – even as far as which database table it pulls from, or which category or field it pulls its data from. This is so powerful it is crazy. And is super convenient for universal, across-the-site things like headers and footers. WordPress can do such things up to a point with functions (relying on the “hooks” that are made available by the theme), but it is not as easy to automate nor to send modifying data calls into.

Maybe I’m just so used to ExpressionEngine and not savvy enough at PHP and function writing so as to be comfortable with child themes and such to write similar capabilities into WordPress, but to get such power on a page-template by page-template basis, I need ExpressionEngine to make it all approachable!

That’s all for now on this, but those are my three biggies!

Moodle Server Setup (also Joomla via Joomdle) on Amazon EC2 and GoDaddy

Amazon EC2 MoodleServer

The first part of this is largely a composite of two wiki articles at the Moodle.org Wiki started separately by Jamie Pratt and Brian Lockwood that taken together finally explained everything I had to do in order to get Moodle working on an Amazon EC2 server:
 
 

Rent an ec2 instance

You can set up an account with Amazon Web Services and rent out a ec2 instance here The Amazon Web Service Console

I used an instance of the Amazon Linux AMI based on Elastic Block Store. Using an instance based on an Elastic Block Store gives you more options for backing up your disks later. The “Amazon Linux AMI” is based on CentOS and is a pared down version of linux with only the bare essentials included, that should be more secure. You can use the yum command to install anything extra necessary on your server.

Attach an ‘elastic ip’ and open necessary ports on firewall

Again through the The Amazon Web Service Console :

  • I created and attached an elastic ip address to the ec2 instance I had launched with the Amazon Linux AMI.
  • I opened ports 22 and 80. For my purposes I did not intend to make the server accessible through https so these were sufficient.

You then start up the SSH server (launch an Instance), which opens to a linux terminal. In the Plugins section, there is also an SFTP/SCP file transfer tool among other things, but you’ll be doing most of your work in the terminal and console now.

Setting up a web server on Amazon Linux AMI

Make sure all your currently installed packages are up to date.

   sudo yum -y update

You use yum to install all the software you need on your server. You can use the following command to install apache, mysql and php and the php extensions and all dependencies required by Moodle with this command :

sudo yum -y install aspell aspell-en aspell-fr aspell-es cvs git httpd memcached mysql mysql-server php php-cli php-gd php-intl php-mbstring php-mcrypt php-mysql php-pdo php-pear php-pecl-zip php-pspell php-soap php-xml php-xmlrpc php-zip php-zts unzip zip zip.so

Start server services and have them start up automatically on a reboot

Configure the new services to start automatically. sudo /sbin/chkconfig httpd on sudo /sbin/chkconfig mysqld on sudo /sbin/service httpd start sudo /sbin/service mysqld start

To ensure that utf8 is used by mysql

edit /etc/my.cnf to read as follows Back up my.cnf first with:

cp /etc/my.cnf /etc/mycnf.original
Then edit to read:
[mysqld]
# Settings user and group are ignored when systemd is used.
# If you need to run mysqld under different user or group, 
# customize your systemd unit file for mysqld according to the
# instructions in http://fedoraproject.org/wiki/Systemd
character-set-server=utf8
collation-server=utf8_unicode_ci
datadir=/var/lib/mysql
socket=/var/lib/mysql/mysql.sock
# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0

[mysqld_safe]
log-error=/var/log/mysqld.log
pid-file=/var/run/mysqld/mysqld.pid

Check that mysql restarts with

service mysqld restart

In order to make sure php is included when httpd comes up, make sure you have a file called /etc/httpd/conf.d/php.conf whose contents are like the following:

<IfModule prefork.c>
LoadModule php5_module modules/libphp5.so
</IfModule> <IfModule worker.c>
LoadModule php5_module modules/libphp5-zts.so
</IfModule>
AddHandler php5-script .php AddType text/html .php
DirectoryIndex index.php

Once you have got zip.so, put it in /usr/lib/php/modules, Also you need to add

extension=zip.so

to your php.ini (in /etc)
 

Fetch moodle

cd /var/www/html git clone git://git.moodle.org/moodle.git

This should put all of moodle in a directory called moodle in the correct folder /var/www/html. It takes a while but you get %age feedback.
 
Alternatively, download Moodle (and Joomla — and Joomdle that integrates the two, for that matter), upload the zip files using WinSCP, and unzip them using unzip. I always re-name the files first to shorter names for easier typing. Moodle unzips into a moodle folder already – you can unzip Joomla into the HTML root. This is far faster than using GIT or using WinSCP for file and folder uploading.
 

http://www.cyberciti.biz/tips/how-can-i-zipping-and-unzipping-files-under-linux.html 

You’ll need the following to convert Amazon’s private key file that you saved to your hard drive to the .ppk version WinSCP uses (See http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/putty.html#putty-getting for reference):

Get all three of these if you want to integrate Moodle with a Joomla CMS:

There are more sophisticated git commands, see git docs in moodle docs for more info. Also, you may give the apache user ownership of the site, this way, when you install, the script will be able to create the config.php file. If you leave the owner as root, you will have to paste the suggested config.php into /var/www/html/moodle

To give apache ownership do:

chown -R apache:apache /var/www/html/moodle

Create the database, database user and access rights

run

mysql_secure_installation

Answer all the questions conservatively. (e.g. You will not need test databases or for root to have any other mysql access than local.) This will create a root mysql pw for you. Mysql users are nothing whatsoever to do with you unix users.

run

mysql -u root -p

<password you set above>

In mysql you need to

1. make a database. The name can be anything you like. I used moodledb

2. make a database user. The name can be anything you like. I used moodledbuser.

3. give that user rights to access the database from the localhost.

4. No db access is required by anyone from any other host than the localhost
 
Now you are in mysql and all the commands are mysql commands and could equally be run on a windows instance of mysql. Do not forget the “;” after each command.

create database moodledb;

grant all privileges on moodledb.* to moodledbuser@localhost identified by ‘<put a pw here>’;

quitTEST the above by doing

mysql -u moodledbuser -p <password>

If you get connected OK then you can go on and quit.

Create moodledata folder

mkdir /var/www/moodledata

The default root folder for apache is /var/www/html and so moodledata is not accessible from the web. Next, give the apache user all the access rights to moodledata. This is better than chmod 777 which some users seem to do.

chown apache:apache /var/www/moodledata


Install Joomla and Joomdle if you want to integrate the Joomla CMS with Moodle:

http://www.joomdle.com/wiki/Prerequisites 

http://www.joomdle.com/wiki/Installation

USING VI/VIM

 

https://www.washington.edu/computing/unix/vi.html 


Alternatives to AWS hosting

Godaddy has a built-in Joomla installer if you want to use Joomdle to combine Moodle with Joomla. Reportedly a Moodle installation with between 10 and 50 students works fine on their shared hosting, though you’d want at least VPS for more than that. They have an economy VPS for $29.99/mo and their normal VPS server goes for $39.99/mo. Their dedicated servers start between $200-$250/mo for a fair size school, and upwards after that.

The best way to install Moodle is to upload the zipped moodle file and un-archive it in GoDaddy’s File Manager. Upload the zip to the folder you want (one, perhaps, that a subdomain is pointing to) and un-archive it there, and it will place a moodle folder inside of that.
Then in the MySql control panel, create a new database that will hold Moodle’s DB. Keep the login and server address info handy as you’ll need it during the installation of Moodle.
Furthermore, in GoDaddy, you need to change the php5.ini setting for allow_url_fopen to “on” if you want to employ Joomdle:
php5ini
edit button
allow_url_fopen_off
allow_url_fopen_on
Once that is edited and saved, you need then to re-start the web processes so it will re-start PHP and read the new settings:
systemprocesses
 end web
I also encountered an issue where my PHP 5.3 was not being recognized, even though the “Programming Languages” control panel showed that to be selected. (Moodle saw 5.2.17). It turned out the culprit was in the “File Extensions” control panel – the .php extension had to be pointed to the 5.3 version manually. Then it worked just fine.

Review of using AWS/EC2 for Moodle – prognosis is not sounding good, as the I/O requirements of Moodle are a bit much for EC2 compared with other solutions (VPS or rented/owned hardware server)

Grant responded:

Hi Ian, just noticed your follow-up from a month ago.

We have stopped using Amazon for anything except backups using s3cmd to safely backup critical folders to S3. (Moodle only)

One thing I have learned about Moodle is it extremely dependent on I/O due to database reads/writes. (not ideal on AWS)

Secondly, these pay by hour cloud providers may work but really aren’t worth the headache and investment (look at Ian’s efforts thus far and mine)… If you must, I recommend getting a larger installation and simply reducing the hours of operation. Tell your students the system is offline between midnight and six, or whatever you can pull off.

Medium 30 x 24 = 720hr @ $130.00 (3.75GB Ram / 2EC 1 Core)

Medium 30 x 18 = 540hr @ $97

Large 30×24 = 720hr @ $260 (7.5GB Ram / 4EC 2 Core)

Large 30×18 = 540hr @ $195

Based on my experience the rates/performance are to high even when operating at reduced hours.

Unfortunately Moodle and AWS simply don’t match up.

Anyone with a budget under $20/month

Find a dedicated VPS if your lucky and use nginx and caching

Anyone with a budget of $20 – $50/month

Find a dedicated VPS with higher specs or entry level dedicated server.

Anyone with a budget of 50+/month find a dedicated server on special. You will be the only one using the server, meaning no one else is using resources. This is a common issue in cloud/vps environments.

Anyone with a budget of 100+/month do not rent a server, buy one!

You can typically find colocation hosting in USA data centers for 50+ and up per month. A decent spec. rented server might run $200-$300 monthly. Typically you can build and run the same spec. server for about half that cost. Which is what we do now!

Plus when you build it, you can tailor your server to your needs. I am hinting at I/O and ram.

Server Example: ($1750)

i5-2400 (4C @ 3.4Ghz) / 32GB RAM DDR3 1333 / 4 x SAMSUNG 830 128GB SSD / Adaptec RAID 6405 with 512Mb Cache (Raid 10)

Colocation Example ($711 / year)

100mbps / 10 IP / Power / Control Panel

I consider the above a budget server yet extremely powerful. I dare you to configure something on Dell’s website that comes close. In Raid10 with the adaptec raid card this server will be able to handle extreme I/O of Moodle’s read/writes requirements.

Total cost about $2500 for the first year which puts us around $200 monthly or less then the Large EC2 instance with 7.5GB of ram and 4EC. Plus we own the server and expect to keep it in production for 2-3 years. Also in the future we may turn this into a dedicated MySQL server depending on how everything plays out.

If your using Moodle, why bother with AWS?

Ian, are you still fighting with AWS and Moodle?

Positioning Content Precisely using CSS

In the Headway grid layout system, blocks align at their top margins to sit together in a row – taking advantage of the CSS section-based layout system. This is a very good thing. However, it means that if two items are in close proximity in the grid, but one under another, the lower block item will be asked (not politely) to be on a different row, which pushes that lower block down under the blocks on the upper row. Disconcerting!

Sometimes you can adjust the horizontal spacing between blocks to communicate clearly to the grid rendering engine what your intention is (which row you wish your block to be on, shared with which other blocks.) That’s a nice thing that helps a bit to make you feel more in control. But, that doesn’t make all possible layouts, well, possible!

The way around this – and to take TOTAL CONTROL over your blocks – is to use the positioning capabilities built into CSS. These positioning capabilities allow you to grab hold of a block and position it ANYWHERE on the page that you wish!!! So, if the row/grid system is saying, “You sit down there, under us!” to a block you want to sit alongside them, your block can rise to the occasion and show them just what’s what!

Here, in a nutshell, are the primary CSS tools used to position items:

(From http://www.w3schools.com/cssref/pr_class_position.asp

http://www.w3schools.com/css/css_positioning.asp)

position: (well, that one was easy!)

Property Values & Description

static Elements renders in order, as they appear in the document flow. This is default. (BORING!)

absolute The element is positioned relative to its first positioned (not static) ancestor element (WE LIKE!)

fixed The element is positioned relative to the browser window (WE LIKE!) (but…) (IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.)

relative The element is positioned relative to its normal position, so “left:20px;” adds 20 pixels to the element’s LEFT position. “left:-20px;” subtracts 20 pixels from the element’s LEFT position. (WE LIKE A LOT!)

inherit The value of the position property is inherited from the parent element (Not in IE7 – Not used easily in IE8 as !DOCTYPE must be set. OK in IE9. Avoid, I say.)

The related, very useful and important settings:

margin:

Especially margin-left and margin-top when used in position:relative mode. Set in pixels (px). However, see top and left below.

z-index:

Allows layering – must be applied to all items involved in the layering. Requires position: to be set to one of the above values.

top: and

left:

Sets position from corner of browser (absolute – first ancestor usually is the browser html tag, or the top-left corner at 0,0) OR from corner of any element the item is sitting inside of in the ID/Class hierarchy (relative). Use instead of margin-top or margin-left for more flexibility with all modes. Set in pixels (px). Can also be set as a percentage.

Now that you have the most important modifiers, here’s some CSS:

#block-ID {
position:relative;
left: some number in px or percent;
top: some number in px or percent;
z-index:level in the layer hierarchy - lower numbers are under higher numbers
}

OR

.block-type-whatever .custom-class .item-number-class {
position:relative;
left: some number in px or percent;
top: some number in px or percent;
z-index:level in the layer hierarchy - lower numbers are under higher numbers
}

You can play with position:absolute; or position:fixed (note caveats above for fixed)

Watch the video from the Tips and Tricks section to see how to use the arrow keys in Firefox or Chrome’s Inspect Element to make positioning fun! (…And grab the numbers and settings you want!) Note how I used margin-left and margin-top in that, but you can get the same result with left: and top: in relative mode. Total crazy control over the whole page in absolute mode!! Negative numbers are allowed in all cases.

This video shows how to use the keyboard in Chrome or Firefox’s Firebug to nudge items around and get the values you want, which you can then paste into your own CSS stylesheet or use in Headway. See at the bottom after item 24.

So, I hope you’re “getting it” that where the grid and row system sends your blocks is of little consequence as pertains to WHERE YOU CAN PLACE THOSE BLOCKS!!!! You can place them anywhere. This is like layout on steroids.

I hope this was helpful. I’ll make another video going deeper into this if people ask for one.

25 Cool Blogger and Web Developer’s Tricks and Tools in Firefox and Chrome

1 } Press and hold the back or forward buttons in the browser to see a list of pages you’ve been on, then select from that list to jump to a page rather than hitting the back or forward button repeatedly.

2 } F5 reloads/refreshes the page. Much easier than groping for where they’ve moved the reload button to this time with your mouse! (And a fun key to pound upon – easy to reach!)

3 } CTRL-F5 forces the cache to be emptied and the page loaded entirely afresh.

4 } CTRL-clicking a link will open that link in a new tab.

5 } CTRL-NumberKey will open the tab corresponding to that number.

6 } CTRL-Tab will move through the tabs sequentially. CTRL-Shift-Tab moves you backwards through them.

7 } Similarly, CTRL-Page-Down moves you forward through the tabs, and CTRL-Page-Up moves backwards through them.

8 } CTRL-W will close the current tab

9 } CTRL-T opens a new tab

10 } CTRL-N opens a new window entirely

11 } Still new to many people are the basic keyboard shortcuts for undo, cut, copy, paste, select all, bold and italic. So, here they are:

Undo – CTRL-Z
Cut – CTRL-X
Copy – CTRL-C
Paste – CTRL-V
Select All – CTRL-A
Bold Selected Text – CTRL-B
Italicize Selected Text – CTRL-I

12 } Clicking at the beginning of where you’d like to make a selection (or end!) and then holding down the Shift key and clicking at “the other end” will select everything between those clicks for you.

13 } The “End” key takes you to the end of a line. The “Home” key will take you to the beginning of a line. CTRL-End goes to the end of the document, while CTRL-Home goes to the top of it.

14 } Holding the Shift key and hitting “End” selects from where you are to the end of the line. Shift-Home does the same but from where you are to the beginning of the line. CTRL-Shift-End selects everything from where you are to the end of the document, and CTRL-Shift-Home selects everything from where you are to the top.

15 } Firefox’s Firebug and Chrome’s Inspect Element tools will allow you to edit HTML and CSS elements live in the browser and see immediately what the results will look like. Once you have the code working the way you like it, copy what you’ve come up with and paste it into your actual web programming software or CMS templates.

16 } If you set the CSS settings for an image or other object to position:relative; then you can move in negative directions using the margin settings and employ the z-index for layering/overlapping things. You also can watch the position of the image move to where you want it by double-clicking on the setting and hitting the up and down arrows to sequence through numerically on the setting you’ve double-clicked upon.
(See the video below this article for a demo)

17 } Chrome has an add-on called Pendule that adds many very useful functions to Chrome and are great additions to the capabilities of the Inspect Element tool. [Addendum: Additionally, here’s a link to Chris Pederick’s web developer tools for both Chrome and Firefox browsers so that those aren’t left out here! http://chrispederick.com/work/web-developer/ Thanks to Ron Amatriain for his comment suggesting this!

18 } Chrome’s Inspect Element tool, when arrived at via right-clicking on a spot on your page and selecting “Inspect Element”,  will zap you right to the section of HTML where that element’s code exists, so you don’t have to first open the editor and then use the magnifying glass (like Firebug’s selector tool) to get to the element. Currently in Firefox, the right-click on an element and selecting “Inspect Element” brings up a differently formatted viewer, where you have to click the HTML or Style buttons to see all the info for that element. However, selecting “Inspect Element in Firebug” performs the same feature as Chrome does.

19 } Both Chrome and Firebug have a very powerful selector tool that helps you find where in the HTML your code is sitting. Additionally, clicking on a DIV or any other element in the code will expose its CSS settings for you to play with or add to in the right-hand column.

20 } Both Chrome’s Inspect Element tools and Firefox’s Firebug will open their toolbox when pressing the F12 key. They also respond with “Inspect Element” tools when pressing CTRL-Shift-I.

21 } Both Chrome and Firefox will allow you to view the browser window full-screen using the F11 key. This removes the tabs, bookmarks and other toolbars, the URL window and all menu items. The Firebug and Inspect Element tools remain! The above-mentioned CTRL keyboard shortcuts still work to move through the tabs or close them, and CTRL-clicking a link still opens the link in a new tab.

22 } WordPress and several other CMS platforms having built-in editors often have a full-screen option that further empties the clutter out of your way for writing or coding. WP has this for both their visual and HTML raw code editors. Talk about uninterrupted focus! The WordPress HTML editor will allow you to insert a link and an image or media item, but that’s about it. The Visual editor has bold, italics, ordered/unordered lists, block-quote, insert media and  link make/break, but that’s it (though I’ve installed Syntax Highlighter Evolved and the sister Syntax Highlighter TinyMCE Buttons, and the PRE and CODE buttons appear even in this sparse editor!) Again, the CTRL-key combo shortcuts still work for navigating through your tabs, so you don’t have to leave this environment to switch to the page after saving your code or writing to view the results on a refreshed (F5) page.

Getting your writing done in the HTML editor in WordPress and a few others is cleaner code as hitting the return key does not insert “&nbsp;” place holders between paragraphs – just auto-generated paragraph tags. Clean!

(EXTRA: Many people don’t realize that in WordPress the HTML editor will insert <p>paragraph enclosures</p> around paragraphs written there – oh, yes it does! Check out your page’s source! But it can and usually will figure out when you’ve placed code in there and it doesn’t do that to your code.)

23 } ALT-left-arrow will take you back to a previous page, while ALT-right-arrow will take you forward one page. Same as hitting the back or forward buttons, but faster than a mouse can do if you’re typing already.

24 } Shift-Enter will often insert a soft-return via a “break” <br /> tag rather than a full </p> paragraph closure with a new <p> paragraph on the next line. Makes for tighter, truly single-spaced lines of text or other elements when that is what is needed or desired.

This
is
an
example (hitting Shift-Enter)

This is a new paragraph (hitting Enter)

25 } Sometimes viewing the raw source code for a page is the best way – especially if you use find/search on the page. So, for the final ones, you get a two-fer: CTRL-U brings up the source code, and CTRL-F brings up the Find search box.

That’s enough to keep you busy for a while! Use the shortcuts often and they will become new habits that can really save you time and wrist-agony in the long run!

Here is a video that demonstrates the keyboard arrow keys trick in Firebug and in Chrome’s “Inspect Element” tools:

Best watched full-screen at 720p, either from here or at YouTube.

Have fun!

Terry

CSS – How To Create Colored Link Website Navigation-Bar WordPress “Breadcrumbs”

Thanks to WordPress automatically adding new CSS classes of its own to the navigation structure since WP3.0, color-indicated “breadcrumb” navigation is now possible, not only via the navigation bar, but using widget menu links or even links within an article! Dynamic Navigation Link Coloration is easy, now!

Here are the new classes we’re getting to play with in the navigation now:

li.current-menu-item a { }
li.current_page_item a { }
li.current_page_ancestor a { }
li.current_page_parent a { }
li.current-post-ancestor a { }
li.current-post-parent a { }
li.current-menu-ancestor a { }
li.current-menu-parent a { }
li.menu-item-object-category a { }
li.menu-item-object-post a { }
li.menu-item-object-page a { }
li.menu-item-type-taxonomy a { }

Note that some of the above use underscores, and others use hyphens.

“Parent” usually indicates that a parent had been assigned when creating the page, while it refers to the category when referring to a post. It gets pretty hairy – when selecting a post from a category archive menu item, the resulting page displays “current-post-ancestor” “current-menu-parent” AND “current-post-parent” as that menu item’s new classes, each presenting a different opportunity for coloring that category-archive menu item’s link! (I present how it is done with category archive links in the video.)

“current-menu-ancestor” is more to do with drop-down menus (sub-menus), indicating all of the higher menu item(s) in the hierarchy. “current-menu-parent” is the immediately higher menu item in a sub-menu, mostly useful with two or more levels cascading sub-menu items.

Make your code affect only the first element using the greater-than “>” sign.

I first read about WordPress adding these new classes at this site: http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category/

But, frankly, it took me a while to comprehend what on earth the author was driving at (and how to actually USE that information!)

Here we have a video that explains some things, and I’ve included example code below.

And the Addendum #1 recorded almost immediately after watching the first one:

The order of items is important, as they “cascade”. It is important to always remember that CSS ALWAYS reads from top-to-bottom on both the HTML page and in your CSS definitions, sequentially taking in each of your design items one after the next, with ones lower on the page superseding higher ones. Thus, the initial “fallback” items are at the top. On the web page itself, the same rule holds – it reads from top-to-bottom, so you always have to find relevant “selectors” that come BEFORE the class, ID or element that you want to ultimately affect.

And here are the code examples. (The videos cover how to get the best selectors for your theme.)

/* Table of Contents */
/*-------------------------------------------------------------*/
/* Navigation Background Color */
/* Default colors for all navigation bar links */
/* Current Page Ancestor - the parent page's link on the nav bar */
/* Current Page Item */
/* Sub-menu Current Menu Item */
/* Sub-Menu Current Page Item */
/* Highlight Category Article Posts Link on Single Pages (but not Blog Posts link) */
/* Highlight Main Blog Posts Link on Single Pages */
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/* Navigation Background Color */
 .yourBestSelectors(NavBar) {background:white !important; }
/*-------------------------------------------------------------*/
/* Default colors for all navigation bar links */
 .yourBestSelectors ul li a { color:gray !important; font-weight:bold !important; }
 .yourBestSelectors ul li a:hover {color:red !important; }
 .yourBestSelectors ul li a:active {color:blue !important;}
 .yourBestSelectors ul.sub-menu li a { color:green !important; font-weight:bold !important; }
 .yourBestSelectors ul.sub-menu li a:hover { color:red !important; }
 .yourBestSelectors ul.sub-menu li a:active { color:blue !important; }
/*-------------------------------------------------------------*/
/* Current Page Ancestor - the parent page's link on the nav bar */
 .yourBestSelectors ul li.current_page_ancestor a {color:orange !important; }
/*-------------------------------------------------------------*/
/* Current Page Item */
 .yourBestSelectors ul li.current_page_item a {color:yellow !important; }
/*-------------------------------------------------------------*/
/* Sub-menu Current Menu Item */
 .yourBestSelectors ul.sub-menu li.current-menu-item a {color:gray !important; }
/*-------------------------------------------------------------*/
/* Sub-Menu Current Page Item */
 .yourBestSelectors ul.sub-menu li.current_page_item a {color:yellow !important; }
/*-------------------------------------------------------------*/
/* Highlight Category Article Posts Link on Single Pages (but not Blog Posts link) */
.yourBestSelectors ul li.menu-item-1905 > a {color:#1a91a1;}
/*-------------------------------------------------------------*/
/* Highlight Main Blog Posts Link on Single Pages */
.yourBestSelectors ul li.current_page_parent.menu-item-1820 a {color:#1a91a1; font-weight:bold;}

Those last two examples are handy when landing on a page that is arrived at via a widget menu item or an on-page link reference. Naturally, the menu-item-## will change from theme-to-theme. Analyze your page source to get that info.

(The videos also cover using Firefox’s Firebug, or alternatively Chrome’s and other’s “Inspect Element” right-click menu item, which work very similarly. The videos additionally expose the fact that using Child Themes are not for the rich and famous only. Anyone can – and should – edit their theme’s CSS styles this way.)

Sometimes you have to force the color changes using the !important command inserted before the semi-colon of each color. (That’s an exclamation mark before the word “important” there.) Especially in cases where the definitions were applied to an ID rather than a class, you’ll need that !important item to override its settings. Basically, whenever something that should be working isn’t working, try this, but also look for missing commas, semicolons, or selectors and/or elements like I managed to miss LIVE on both videos at one point or another…

Note the ancestor code is at the top of this CSS definitions section, followed by the page item and category menu items. You’ll sometimes find that matters a lot.

So, how do you determine what .yourBestSelectors are? That can be tricky! For that, view the videos!

I will tell you that targeting IDs as opposed to classes is easier, since you don’t have to worry about the context. By definition, an ID is only supposed to appear once on a page, so it is always unique, whereas a class is permitted to be used in multiple locations on the same page, so it needs some information accompanying it to give the reference as to which instance you are using it in.

Also, you can combine a couple of items that will have the same settings using commas. Be aware, however, that things like two ID-defined items may both need the ID, as in a situation I just encountered:

Didn’t work correctly:

#block-22 ul.special-nav li.current-menu-item, li.current_page_item a {
    color:lightBlue !important; text-weight:normal;
    }

Worked correctly:

#block-22 ul.special-nav li.current-menu-item,
#block-22 ul.special-nav li.current_page_item a {
    color:lightBlue !important; text-weight:normal;
    }

This example needed to override the current_page_item setting that affected other nav-bars, but couldn’t affect this special one. If I didn’t include the second #block-22, it would override the default use of the class. Who would have guessed! Both classes are legit for the same menu item! Well, that’s why they call them “Cascading Style Sheets”!

Here is the code that was included in the child theme for the twenty-eleven theme mentioned in the video:

/*
 Theme Name: Twenty Eleven Child Test
 Theme URI: http://terrybritton.com
 Description: Child theme for the Twenty Eleven theme
 Author: Terry Leigh Britton
 Author URI: http: //terrybritton.com
 Template: twentyeleven
 Version: 1.0
 */
@import url("../twentyeleven/style.css");
li.current-menu-ancestor > a, li.current_page_item > a, li.current_page_ancestor > a {
 color: #1A91A1 !important;
 }
 li.current-menu-item > a {
 color: orange !important;
 }
 li.current-post-ancestor, li.current-menu-parent, li.current-post-parent a {
 color: lightBlue !important;
 }

The “Early Morning” Child Theme for the Thematic parent theme by cozmoslabs.com can be found here:
http://www.cozmoslabs.com/

To make life easier on yourself, if you have a theme that supports adding custom classes to your individual blocks , one thing you should do first is name your navigation bar or widgetized menu with a custom name and assign it an allOneWord custom css class under the block’s config. Headway by Headwaythemes.com makes that quite easy to accomplish. (That’s my affiliate link, if you want to purchase it through me!) I probably am going to have a review here about Headway soon.