Pages

Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Monday, November 25, 2013

Using CSS only to Change backcolor of GridView or any table rows onmouseover

 I just learned a technique of applying a hover effect to an HTML table’s rows with the help of CSS, without using a single line of JavaScript, C#, VB, … etc. code.. all you hace to do is to define a new class with :hover selector.. 

Row Number 1
Row Number 2
Row Number 3

Let's suppose you have the following styles in your CSS file:
.tableClass
{
font-family: Tahoma;
      font-size: 9pt;
      font-weight: normal;
      color: #3d3d3d;
}
.tableRow
{
color: #3d3d3d;
      background-color: #daf1f2;
}
.tableAlterRow
{
background-color: #ece9ea;
      color: #3d3d3d;
}

To give the hover effect onmouseover, just add your styles to the following:

.tableClass tr. tableRow:hover,
.tableClass tr. tableAlterRow:hover,
.tableRow:hover,
.tableAlterRow:hover
{
   background-color:#199dbf !important;
   font-weight: bold;
}



Easy, right ;) !?

Saturday, September 10, 2011

Tricks for Coding Pages to be Printing Friendly

One day @work, I was asked to make a printOut page version to allow the user to print a Report out of a page filled with lots of data, placed in different sections and tables.. I had to find a way to make the page as much user friendly with its search area and other query controls and to look as a properly designed and arranged report.  
Designing suchpage is actually a joyless task with lots of obstacles, but I must fight to keep my face straight with my managers..

How to Fix Lightbox Effect for Blogger

Last week, I noticed a link to the updated Blogger interface at the top of the page. To tell the truth, I didnt like it at first.. and I couldn't work with it.. I changed it back to the old interface many times.. till I finally got used to it... I also used the new template designer to update My blogger design: colors, Background, Font..  etc.

Anyways, I then started to make a new post when I suddenly noticed... LIGHTBOX EFFECT IS NOT WORKING :O

yah it's normal as I have updated theblogger template , so I must re-followed the steps to add the LightBox effect from my previous post "How to add Lightbox effect to Blogger".. but it was still not working :(

here in this post I will show you How I fixed it using the same Script and CSS files in my previous post.
LightBox Effect



Thursday, August 18, 2011

How to add Lightbox effect to Blogger


in this post i will show you the steps to add The Lightbox effect to Blogger (blogspot) blogs that is useful when your post has many images or images with large sizes, it helps people to save time browsing images in an impressive way.

LightBox effect