Skip to Main Content

go to Indiana University Indiana University


Archive for October, 2011

it2go Episode 26 – The InDesign Series

On this week’s episode, we’re discussing the InDesign series at IT Training. Learn all about what kinds of training is offered on this page design application.

Episode 26 – The InDesign Series

Quick Tip: Create a Signature in Outlook 2010

If you use Outlook on a daily basis, creating a reusable signature can save you a great deal of time. Rather than typing in your name, business, telephone number, web address, and other contact information at the bottom of each outgoing message, you can simply click on a button to add your signature information.

To create a new signature, follow these steps:
Read the rest of “Quick Tip: Create a Signature in Outlook 2010″ »

it2go Episode 25 – Special Request Workshops

On this week’s episode, we’re discussing IT Training’s special request system. Find out how you can get specialized training for your class, student group, or organization.

it2go – The IT Training Podcast

Social Media Protip: Filter Tweets Based on Source, Keyword, or Person Using TweetDeck

I caused quite the stir earlier today on my personal Twitter account when I announced:

Oh man... global filter in TweetDeck, why have I not discovered you before now! No updates from Foursquare OR Tumblr now!!

So I decided that I would share with you all. If you’ve been a long-time TweetDeck user like I have been, you may or may not have noticed the added feature called Global Filter. Read the rest of “Social Media Protip: Filter Tweets Based on Source, Keyword, or Person Using TweetDeck” »

Using the CSS content property to update text content across your site

You’ve fully completed the home page for a new website you’re working on, and you’re about ready to copy it dozens of times to flesh out the rest of the pages for your website. Right before you start duplicating that index.html page, you remember that you wanted to add copyright information to the footer.
It is also a bit of a wake up call that you could have remembered to put in the copyright information a month later and would have to, at that point, go into each of these of pages individually to fix the footer.
This tutorial is about a handy little css property that allows you to control the content inside of any given element in your xhtml documents. Since this can be handled in an external css stylesheet document, you’d be able to change the content across all the dependent xhtml files while only having to go to one place.
Prerequisite knowledge:
an intermediate understanding of XHTML and CSS
Say we have a page like this:
An example of a web page with a footer at the bottom
Note: this tutorial assumes you would know how to create a page like this, or any basic webpage for that matter.
The footer has a bit of contact information inside of it, but let’s say we also want to add the copyright information to the footer, next to the email address.
The code for the footer may look like this:


<div id="footer">
  <p>contact: email@example.com</p>
</div>

The css property we will be using to insert the desired additional text is the “content” property. There are a few quirks to get used to when using this property. For one, the property can only be used in a rule whose selector uses the either the “before” or “after” pseudo-selector. The content that you add using css will be placed within the targeted element, but whether the content will appear before or after the pre-existing content of the targeted element depends on which pseudo-selector you choose.
Since we want the copyright information to appear after the e-mail address, we will use the “after” pseudo-selector. Create an additional rule in your stylesheet as follows:


div#footer p:after
{
  
}

This rule will target only paragraphs within the footer, and place whatever the value of the content property is after the existing content within the paragraph. Let’s create this copyright information with the content property now:


div#footer p:after
{
  content: " - copyright 2011";
}

If you look at the page in a browser, you should see that the footer now says “contact: email@example.com – copyright 2011″. Every page on the website should now have the updated footer, and we didn’t have to lay a finger on any of the xhtml documents.
Success, right? Well let’s say that you wanted to use the copyright character entity instead of the text “copyright.” Naturally, you’d think to replace “copyright” with the &copy; character entity. You can go ahead and try it if you’d like.
What you’d see is that the text “&copy;” appears literally on the webpage. The next thing you might do is remember that each character entity name has an entity number value too, that can be used as a character entity reference as well. You could then look up copyright’s character entity value as 169, and try replacing &copy; with &#169; in that content property value.
Well, this would have worked if we were using &#169; in the xhtml content, but unfortunately, it does not work that way in the css. In order to get these character entities to work, we have to convert the entity decimal value to hexadecimal and use css escape syntax. If you don’t understand what is meant by all that, then no worries, the process is really straightforward.
First, do an internet search for “decimal to hex converter”; there are many of these resources on the web. In fact, you can simply type in “169 decimal to hex” to the bing search engine, and the answer should be at the top of the results, without having to go into any pages.
The hexadecimal equivalent of decimal value 169 is hex value A9.
Note: to differentiate hexadecimal numbers from standard [base ten or decimal] numbers, some resources might use the “0x” notation, e.g., 0xA9 for the hexadecimal value A9.
In order to use this in the css content property value, to prevent literally displaying “A9″ we need to use the css “escape” syntax to use it as a character entity. We do this with a backslash.
Replace &copy; (or “copyright” if you didn’t attempt to use the xhtml character entity name) with “\A9 “:

content: " - \A9  2011";

Note: there are two spaces between “\A9″ and “2011″ and that is because the space following the hexadecimal value is part of the escape syntax. The space prevents ambiguity in situations where the designer wants the character entity to appear next to the content without any space, and the first character of that content just so happens to be a hexadecimal digit (i.e. 0-9 and a-f or A-F). If we wanted “©2011″ (that is, no space between © and 2011) then we would use “\A9 2011″ instead of “\A92011″ because the browser can’t tell you don’t mean \A and 92011, or \A92 and 011, \A920 and 11, and so on.
Well, everything works, but before you leave here to try this on your own project, there are a couple important items to consider.
First, the content property and the :before and :after pseudo-selectors do not work in versions of Internet Explorer before IE8, so if this content you will generate with this css technique is pivotal to the accessibility of your site, then it may be a good idea to hold off until more users have migrated away from those earlier versions of IE.
Second, and somewhat related to the previous concern, is the idea of semantics. Css is meant to be used for presentation and style only. All content and structure is intended to be kept in xhtml. This being said, when we use the content property, it is usually to enhance the page, rather than to add essential content.
Along this same vein, you may have already noticed that you cannot drag-select the text generated with the content property, because as far as the actual document goes, that content does not actually exist– it is merely presentational elements from css, and so it most definitely will not be used in any semantic application, like use in “pagerank” for Google’s search engine, accessibility with screen readers, and so forth.
As long as you are aware of these caveats, then go ahead and find clever uses of this unique and powerful css property.

Creating a Gmail-Like Experience in Outlook: Using Macros to Help Organize Incoming Mail in Outlook

This is the first of a couple of articles about how to create specific functionality from Gmail in Outlook using various tools and features. Today’s article begins by re-creating one of the keyboard shortcuts that is used frequently in Gmail.

Before I get started, a little bit of fair warning. This article is not for beginning users of Microsoft Outlook or for users who only use one incoming mail folder. It requires a decent understanding about how to organize email, work with the Office 2010 interface, and knowledge about how to create and modify a macro. Information about how to create a macro can be found in the workshop Excel 2010: Basic Automation Using Macros and more in-depth Visual Basic for Applications information can be found in the workshop Excel 2010: Advanced Macros and User Defined Functions.

At this year’s Statewide IT Conference, I attended a session by Martin Wagner called INBOX ZERO – Master your email inbox using GTD principles. I’ve since streamlined my mail management, turned off Outlook’s email reminders, and generally become more efficient at managing my email.

But there was a catch…

Being a long-time Gmail user, I wanted to get more Gmail-like functionality added into Outlook.
Read the rest of “Creating a Gmail-Like Experience in Outlook: Using Macros to Help Organize Incoming Mail in Outlook” »

Steve Jobs Passes Away

Steve Jobs passed away on October 5, 2011, after a six-year battle with cancer. Over the last few days there have been a multitude of online tributes to the brilliant visionary. I came across this YouTube video this morning, and I decided I had to post it on the IT Training blog. Jobs narrated this video clip as part of Apple’s Think Different campaign in the late 1990s. While I am not one of those individuals who always think outside of the box, I certainly know plenty of others who fall into this category. Therefore, I am posting this clip as a tribute to Steve and all others who find themselves “thinking differently.”

it2go Episode 24 – Conference Review and New On The Blog

On this episode of the it2go podcast, we’re discussing the results of the IT Training conference, and seeing what’s new on the blog.

Episode 24 – Conference Review and New On The Blog

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.