Results 1 to 10 of 10

Thread: Tabbed Detail - highlighting tab on hover

  1. #1
    Join Date
    Jun 2009
    Posts
    23

    Default Tabbed Detail - highlighting tab on hover

    Hello,

    Couldn't find anyting on this. i am using the tabbed detail listing (2.5.7 version). I would like to highlight the tabs upon hovering the mouse over it. Any suggestions on how to do this? I was thinking that something must be adjusting in the styles.css file but I am not yet an expert on code writing for css.

    Any help you could give me would be appreciated.

    Thanks,

    rpersonal2

  2. #2
    Join Date
    Feb 2009
    Location
    Miami Beach
    Age
    38
    Posts
    89

    Default Re: Tabbed Detail - highlighting tab on hover

    Quote Originally Posted by rpersonal2 View Post
    Hello,

    Couldn't find anyting on this. i am using the tabbed detail listing (2.5.7 version). I would like to highlight the tabs upon hovering the mouse over it. Any suggestions on how to do this? I was thinking that something must be adjusting in the styles.css file but I am not yet an expert on code writing for css.

    Any help you could give me would be appreciated.

    Thanks,
    rpersonal2
    You would do it by styling a:hover. I don't remember code for the tabbed template offhand but when you are done it will look something like this:

    .menu li a:hover{
    background:url(images/menu_hover.jpg) top left repeat-x;
    color:#000000;
    }

    The menu_hover.jpg would be the image for highlight.

    Look at www.cssmenumaker.com/ for other examples.

    Aden

  3. #3
    Join Date
    Jun 2009
    Posts
    23

    Default Re: Tabbed Detail - highlighting tab on hover

    Thanks,

    I will give that a try and see if I can get it to work.

    rpersona2

  4. #4
    Join Date
    Sep 2009
    Posts
    49

    Default Re: Tabbed Detail - highlighting tab on hover

    Just wondering if you've got solution to the above as i'm trying to do same thing.

    Many thanks.

    ITSER.

  5. #5
    Join Date
    Sep 2009
    Location
    Bucharest, Romania
    Posts
    29

    Default Re: Tabbed Detail - highlighting tab on hover

    You can copy the css code from the file style_main.css inside the lazuli template directory and add to your own css file, or make a single file .. something like tabs.css , then add the line

    <link rel="stylesheet" href="{template_url}/path_to_your_CSS_directory/tabs.css" type="text/css" media="screen"/>

    somewhere between the <head> and </head> tags in your template main.html file.
    (i know OR has a shorter form for that, smtg like {load_css_name_of_your_css_file} .. but i'm not sure what is actually the correct form...)


    So, here it is the code you need, without modifications, taken from the style_main.css file.
    Code:
    #listing_detail_tabbed {
    	float:left;
    	width:100%;
    	height:100%;
    	margin:0;
    	padding:0;
    	font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	}
    #listing_detail_tabbed table {
    	width:100%;
    	border-collapse:collapse;
    	border:0 none;
    	}
    	#listing_detail_tabbed .tab a:link,
    	#listing_detail_tabbed .tab a:visited {
    		font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    		font-weight:normal;
    		text-decoration:none;
    		color:#666666;
    		cursor:pointer;
    		}
    	#listing_detail_tabbed .tab a:hover {
    		text-decoration:none;
    		}
    #listing_detail_tabbed_header {
    	width:100%;
    	}
    #listing_detail_tabbed_fieldslinks {
    	height:100% !important;
    	margin:0;
    	padding:0;
    	text-align:left;
    	}
    	#listing_detail_tabbed_mainimage {
    		width:100%;
    		text-align:center;
    		}
    		#listing_detail_tabbed_mainimage img#main {
    			width:480px !important;
    			border:0 none;
    			}
    		#listing_detail_tabbed_mainimage table {
    			width:100% !important;
    			border-collapse:collapse;
    			border-spacing:0px;
    			text-align:justify;
    			}
    		p#tabbed_thumbs {
    			text-align:center;
    			}
    		p#tabbed_thumbs br {
    			display:none; /* FORCING HTML HARDCODED */
    			}
    		p#tabbed_thumbs table {
    			width:100% !important;
    			border-collapse:collapse;
    			border-spacing:0px;
    			}
    		p#tabbed_thumbs td {
    			text-align:center;
    			vertical-align:top;
    			}
    		p#tabbed_thumbs img {
    			float:left;
    			width:100px;
    			margin:10px 0 0 40px;
    			border:0 none;
    			}
    .slideshow_img img#SLIDESIMG {
    	width:480px;
    	border:0 none;
    	}
    .tab-page { /* SEE ALSO "iexplorer.css" */
    	z-index:2;
    	position:relative;
    	clear:both;
    	top:-2px;
    	border:1px solid #3399CC;
    	padding:10px;
    	color:#000000;
    	background:#FFFFFF;
    	}
    .tab-pane {
    	position:relative;
    	display:block;
    	width:100%; /* width needed weird IE bug */
    	margin-right:-2px; /* to make room for the shadow */
    	}
    
    .tab {
    	z-index:1;
    	position:relative;
    	float:left;
    	display:inline;
    	width:74px;
    	height:16px;
    	top:0;
    	margin:1px -1px 1px 2px;
    	padding:2px 0px 0px 0px;
    	border:0;
    	text-align:center;
    	background-image:url(images/tabbed/tab.png);
    	cursor:pointer;
    	overflow:hidden;
    	white-space:nowrap;
    	}
    .tab.selected {
    	z-index:3;
    	width:74px !important;
    	height:18px !important;
    	top:-2px;
    	margin:1px -3px -3px 0px;
    	padding:2px 0 0px 0;
    	border-bottom-width:0;
    	font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	background-image:url(images/tabbed/tab.active.png) !important; /* firefox fix? */
    	background-repeat:no-repeat;
    	}
    .tab.hover {
    	font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	width:74px;
    	height:16px;
    	background-image:url(images/tabbed/tab.hover.png);
    	background-repeat:no-repeat;
    	}
    .tab-row {
    	z-index:1;
    	white-space:nowrap;
    	}

    I highlighted in red the text that you need to look at for the highlight efect, and in blue the lines that point to the images used. The images are inside the "template/lazuli/images/tabbed/ " directory.

    Ofcourse, you need to add your own images(if you don't like the ones included into the OR pack), and also to modify the css according to your style and needs.

    I used that on customizing my search fields and box .
    You can see what i made here . Ofcourse, in my case, what i did was just to modify some files, but all the credit goes to the developers that actually created those original files.

    If you wanna something else, you can check http://www.cssmenumaker.com as Aden recomended you already.

    Marin

  6. #6
    Join Date
    Sep 2009
    Posts
    49

    Default Re: Tabbed Detail - highlighting tab on hover

    worked as expected.

    Many thanks and God bless.

    ITSER.

  7. #7
    Join Date
    Sep 2009
    Posts
    49

    Default Re: Tabbed Detail - highlighting tab on hover

    Hi,

    Just wondering if you have any idea on how I can fix the firefox probles here in the code i.e.

    background-image:url(images/tabbed/tab.active.png) !important; /* firefox fix? */

    I just noticed the firefox problem.

    Thanks.

  8. #8
    Join Date
    Sep 2009
    Location
    Bucharest, Romania
    Posts
    29

    Default Re: Tabbed Detail - highlighting tab on hover

    The /* firefox fix? */ was a comment i added, since i was wandering why it was needed that fix (the word "!important" ) since my firefox was reading the tabs corectly. Probabbly was for some older versions of the browser.

    Sorry if that confused you, wasn't my intention.

    Anyway, i received your PM's and replyed.I have also sent you a link to some files. GL


    Marin

  9. #9
    Join Date
    Nov 2009
    Posts
    8

    Default Re: Tabbed Detail - highlighting tab on hover

    Has anyone got this to work on OR 2.5.8 using template open_realty_lite? Doesn't seem to work for me.

  10. #10
    Join Date
    Sep 2009
    Location
    Bucharest, Romania
    Posts
    29

    Default Re: Tabbed Detail - highlighting tab on hover

    Quote Originally Posted by jigass View Post
    Has anyone got this to work on OR 2.5.8 using template open_realty_lite? Doesn't seem to work for me.
    I'll give it a try when i get home (in about 3 hours) and let ya know.

    Marin

Similar Threads

  1. listing detail tabbed
    By bsa in forum General Help (CLOSED)
    Replies: 1
    Last Post: 04-13-2009, 10:04 AM
  2. Listing Detail Tabbed
    By tonynoriega in forum General Help (CLOSED)
    Replies: 8
    Last Post: 10-16-2007, 12:37 PM
  3. Listing Detail Tabbed - Javascript
    By tonynoriega in forum General Help (CLOSED)
    Replies: 0
    Last Post: 04-10-2007, 04:00 PM
  4. Listing Detail Tabbed
    By tonynoriega in forum General Help (CLOSED)
    Replies: 0
    Last Post: 04-01-2007, 10:14 PM
  5. Listing Detail Tabbed
    By tonynoriega in forum Installation/Configuration Help (CLOSED)
    Replies: 1
    Last Post: 03-23-2007, 11:51 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •