What are we facing?

I have some products integrated in Visual Studio 2008 Shell (integrated mode) like Phalanger. I would love to have Aggiorno Add-in installed in VS 2008 Shell integrated mode, so I could use it along with the integrated products.

The Solution

Let's assume you have Visual Studio 2008 Shell Integrated mode already installed. Let's assume you have .msi file of Aggiorno which is the installer for the Aggiorno Add-in.

You’ll first have to run the following registry file, that you can download:

InstallOnVsIntegrated.reg (340.00 bytes)

Which contains the following code

 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Setup]
"Dbghelp_path"="C:\\Program Files\\Microsoft Visual Studio 9.0"

After you run it (in Vista you do a right-click on the file and click "Merge") you now can install Aggiorno Add-in on Visual Studio Shell, just run the installer.

In that way you will be able to see Aggiorno along with Phalanger coexisting happily.

Some external resources

• Visual Studio Shell overview.
• Phalanger.

What are we facing?

I have an ASP.NET Website using the built-in ASP.NET server controls, but now I want them to render code that use CSS styling and a more semantic markup. I downloaded the ASP.NET 2.0 CSS Friendly Control Adapters, but the download page doesn't give any explanation of how to make my already created ASP.NET code to produce CSS friendly code.

The Solution

Actually, there are two ways to do it. The first way is provided by Fritz Onion in the post Steps for adding a CSS Control Adapter. Since the big amount of steps needed, I would rather recommend you to read that post enterily. However if you are hunger for a simpler way to do it, Simone Chiaretta enumerates the following very few steps for changing the rendering of your code using the downloaded CSS Control Adapters

• Download the CSS Friendly Adapter from CodePlex: http://www.codeplex.com/cssfriendly.
• Reference the CSSFriendly.dll inside your web project.
• Create the ASP.NET App_Browser folder under your website root, and copy the CSSFriendlyAdapters.browser file in this folder.

Some external references

• Tip/Trick: Use the ASP.NET 2.0 CSS Control Adapters for CSS friendly HTML output by Scott Guthrie
• How To: Control Adapters

How can I entirely remove that Topic Bar (some folks call it "toolbar") about US Election 2008 from my Twitter page?

Possibly juggling with ways for setting the bases for a monetization model, Twitter launched the following Topic Bar about US Election 2008

Even if I click the "X", an E08 button remains.

The Solution

First of all, we have to recognize the piece of HTML that is displaying the Topic Bar:

<h1 class="elections-promotion"> ... </h1>

Gotcha!

The first attempt is a cross browser solution using your browser's user style definition. Take a look at this previous post about how to do find the user style for Firefox and Internet Explorer, or this for Opera, or this one for Safari

Now just add h1.elections-promotion { display:none !important } to your user style. No more Election Bar!

The second attempt consists in using the very useful Firefox addon called AdBlock Plus:

1. Install AdBlock Plus:in Firefox
2. Go to "Tools" menu option, then AdBlock Plus...
3. Click in Add Filter ...
4. Paste the following code twitter.com#H1(class=elections-promotion)
5. Enjoy a clean Twitter page!

Some external resources

• How do I remove the Twitter Election Toolbar?
• How to Remove the Twitter ‘Election’ info

What are we facing?

I want the simplest solution to have a drop shadow effect on an image using just CSS. What is the shortest piece of code for drop shadow?

The Solution

The shortest piece of code for making a drop shadow is found in the book CSS Mastery of Andy Budd et al.

The shadow is a constructed via an outer "div" element wrapping the image. For example:

<div class="img-wrapper"><img src="tiny-logo.gif" alt="Aggiorno" /></div>

The tiniest CSS code you need to do drop shadow is:

.img-wrapper {
       background: url("shadow.png") no-repeat bottom right;
       clear: right;
       float: left;
.img-wrapper img { margin: -8px 8px 8px -8px; }

Displaying the pretty drop shadow you wanted:

Some external references

• Easy CSS drop shadows
• Simple fluid drop shadows

What are we facing?

I liked the post about Rollover Image for links using pure CSS but I would like to have just one image, not two: one for the "regular state" and another for the "hover state". There could be a delay between loading the first image and the second image, causing flickering. Is it possible doing that with just pure CSS? Am I being too demanding?

The Solution

Fortunately, CSS provides the power to do that. It is called the Pixy-style rollover. Let's use the same example of the previous post.

Here is the same image but merged vertically:

Using the following link code:

<a href="http://www.aggiorno.com/try.aspx" id="pixy"><span>aggiorno</span></a>

And using the following CSS

  a#pixy {
       background:transparent url(“Aggiorno-sprite.jpg”) no-repeat scroll center top;
       display:block;
       height:110px !important; 
       width:110px;
  }
  a#pixy span { display:none; }
  a#pixy:hover { background-position:center bottom; }

You then will get the link showing the top part of the image when regular state. In hover state, the bottom part is displayed. Hover it and believe your eyes:

Some external references

• CSS Sprites: Image Slicing’s Kiss of Death

What are we facing?

I want to achieve a button like effect for some of my links. For instance, it's a matter of positiong the "Download" link more prominent and catchy. I want that link to behave like a button when I hover it. Another option is to have a clickable image with change a little bit when hovering. Of course, I want that effect made entirely in CSS. Is it possible?

The solution

Yes, there is a way, let's based the following example of rollover with images on the Stuart Robertson's post about it.

Choose a image for the regular state of the link (no hovering state):

Just for simplicity, do a silly change to that image to produce a rollover image

Build the link wiht a "span" element with a meaningful description inside. Never forget those image based browsers.

<a href="http://www.aggiorno.com/try.aspx" id="rollover"><span>aggiorno</span></a>

We are almost there. Now the following style for achieving the rollover effect:

  a#rollover { background-image:url("Aggiorno-regular.jpg"); 
               height: 110px; width:110px; display:block; }
  a#rollover span { display:none; }
  a#rollover:hover { background-image:url("Aggiorno-rollover.jpg"); }

This style set background image for the regular state of the link, hides the span content and shows the rollover image when hovering. Our baby now looks like (hover it):

Some external references

• CSS rollover buttons
• Roll Over, Rollovers -- CSS Style by Eric A. Meyer

What are we facing

I want to provide my links with tooltips, those little boxes that pop up when users hover the mouse over the links. How do I implement tooltips with pure CSS?

The Solution

The trick is made by inserting the text for the tooltip in a "span" element inside the "a" element. Then, use some CSS to hide it and to show it as a pop up when you hover. The good thing about this technique is that the tooltip text is inside the HTML markup, hence is visible to web crawlers. Let's see some examples.

A pretty good CSS code can be found in Pure CSS Tooltips, which gives the following style

a.info{
     position:relative; /*this is the key*/
     z-index:24; background-color:#ccc;
     color:#000;
     text-decoration:none} 
a.info:hover{z-index:25; background-color:#ff0} 
a.info span{display: none} 
a.info:hover span{ /*the span will display just on :hover state*/
     display:block;
     position:absolute;
     top:2em; left:2em; width:15em;
     border:1px solid #0cf;
     background-color:#cff; color:#000;
     text-align: center}

Let's see how it looks (hover the mouse over the links):

• homeIn this page you will have to understand and get in love with aggiorno in just five seconds
• productsTake a look at the Aggiorno software, the web productivity you always wanted
• downloadGet a fully featured demo version for 30 days!
• buyYou know you need Aggiorno, save all that maintenance time
• aggiorningsWhat Aggiorno can do for you?
• blogAll that valuable content for you!
• contactWe are listening, please talk to us

If you want a simpler way to do it, Kollermedia.at provides a shorter code

a.info2 span
  {
      display: none;
      padding: 2px 3px;
      margin-left: 8px;
      width: 130px;
  }
  a.info2:hover span
  {
      display: inline;
      position: absolute;
      background: #ffffff;
      border: 1px solid #cccccc;
      color: #6c6c6c;
  }

Let's see how it looks (again, hover the mouse over the links):

• homeIn this page you will have to understand and get in love with aggiorno in just five seconds
• productsTake a look at the Aggiorno software, the web productivity you always wanted
• downloadGet a fully featured demo version for 30 days!
• buyYou know you need Aggiorno, save all that maintenance time
• aggiorningsWhat Aggiorno can do for you?
• blogAll that valuable content for you!
• contactWe are listening, please talk to us

Some external references

• Pure CSS Popups by Eric Meyer

What are we facing?

I want to help my website users with orientation on links navigation. I want to provide them visual clues of links already visited by them so they don't do unnecessary backtracking. Can I do that with CSS?

The solution

Before going ahead, please visit this link and return back to mark as visited the following links to that same page.

A first option is using the "radical" sign (√). The following example (thanks Mike Davidson) explains it:

a:visited:after {     
     content: "\00A0\221A";     
     font-size: 75%;
  }

How it looks.

A second option is a really simple implementation. The following code draws a line through the visited links

a:visited { text-decoration: line-through; }

How it looks.

A third option is using coloring the visited links while hovering in order to avoid cluttering in your page. For instance:

a:visited:hover {  color: red; }

How it looks (hover over me).

Some external references

• The ways to style visited links
• Control Visited Link Colors With CSS

What are we facing?

I want to briefly highlight a specific section of my page once it loads. I may have a page with lots of pieces of news, or segments. Users may land to one of those pieces with a properly crafted URL. How do I do highlight without using JavaScript?

The Solution

Using the CSS3 pseudo selector called ":target". Keep in mind that this pseudo selector is currently only supported by the latest versions of Firefox, Safari and Opera.

I will follow the enlightening steps for yellow fade of Emil Stenström.

OK, each section, or piece of news can be inside a HTML block element (a “p” or “div” for instance) which will have a unique “id” attribute. Now, to see how this magic starts to happen, append “/#” plus that “id” to your site URL, if you tell the browser to navigate to this newly crafted URL, it will load the page, and will set the view starting in the block using that “id”, scrolling is already done.

In this Capsule I have implemented those steps: the preceding paragraph is a “p” element with an “id=’fade’”. To do the fading, I just added the following CSS code:

        :target
        {
            background: url( "fading-with-yellow.gif" );
        }

Test it!Here you can download the image fading-with-yellow.gif which is a copy of Emil’s.

Some external references

• Ajax: The “Yellow Fade” Technique
• Web Interface Design Tip: The Yellow Fade Technique

What are we facing?

Internet Explorer 8’s Webslices are becoming popular in media. The magic relays on the fact that they seem to be an evolution of RSS and it is based on hAtom microformat.  Given the potential big acceptance of webslices, is there any other browser beyond Internet Explorer implementing Webslices? Is there some help for constructing Webslices?

The Solution

Firefox 3 now has an extension for supporting Webslices by means of an Add-on called WebChunks. The nice thing about WebChuncks is that it works on pages originally intended for IE8 WebSlices, for instance ebay and  StumbleUpon. We are yet to see this kind of support in other browsers, and to see if Firefox is going to support it natively, but there good precedents for it.

On the other hand, how do you a Webslice? 

Let’s say you identify that the next piece of code is going to be of the interest of the user to get updates of its changes:

<div class="myClass">
  <p class="content" id="title">    
    Content
  </p>
</div>

Using Aggiorno, you can get the following code in the Webslice format:

<div class="hslice myClass" id="myID">
 <span class="entry-title" style="display: none">Web Slice to display</span>
 <span class="entry-content">
  <p class="content" id="title">
     Content 
  </p>
 </span>
</div>
 

Voila! You get a simple webslice! You are done by adding 

• a unique id for the block element
• the “hslice” class for telling the browser that this block element is a Webslice
• a block element with “entry-title” class and the title inside
• a wrapper block element for the content

There are more attribures to make it more powerful, take a look at the IE8 reference.

Some external references

• Webchunks extension for Firefox 3 Tutorial
• Galzblog on Webchunks
• Aggiorno for creating Webslices