Although Trinity has technically had a Twitter account since 2007, we launched our “official Twitter presence” today.
But who knew what an ordeal it would be when the Director of Communications asked me to put the icon on the home page? Wow! Talk about some serious coding!
The problem is that each section on the main navigation bar is a separate .gif file, including the hover states.
The goal was to place the Twitter icon in the right corner, above “Support Trinity”, but since that area is part of the hover state, it was tricky to make sure that its linked still worked, while also placing the Twitter icon on top and ensuring that its link also worked.
After a couple of hours, I finally did it! I had to create a new div tag and style it in the base CSS file, then insert it in the navigation (.ascx file), with the link reference inside of the div tag, so that the entire nav bar didn’t link to Twitter! ☺
After checking it in three browsers (Firefox, IE, and Safari), I noticed that while the link worked in Safari, the actual image did not appear. Ah! The importance of “position” in styling!
So now it all works! Welcome to Twitter, Trinity!