Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Styling a lightbox link?

    What code would I need to style these links? I want to add color and maybe a border...

    <a href="http://www.mydomain.net/docs/DataSheet.swf" class="lightwindow page-options" params="lightwindow_iframe_embed=true" title="Product Datasheet">

    Here's the default lightbox stylesheet if that helps:

    Code:
    #lightwindow_overlay {
    	/* REQUIRED */
    	display: none;
    	visibility: hidden;
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100px;
    	z-index: 500;
    	/* REQUIRED */
    }
    
    #lightwindow {
    	/* REQUIRED */
    	/* Of Note - The height and width of this element are set to 0px */
    	display: none;
    	visibility: hidden;
    	position: absolute;
    	z-index: 999;
    	line-height: 0px;
    	/* REQUIRED */
    }
    
    	#lightwindow_container {
    		/* REQUIRED */
    		display: none;
    		visibility: hidden;
    		position: absolute;
    		/* REQUIRED */
    		padding: 0 0 0 0;
    		margin: 0 0 0 0;
    	}
    
    	/* IE6 needs this or it messes with our positioning */
    	* html #lightwindow_container {
    		overflow: hidden;
    	}
    
    	#lightwindow_contents {
    		overflow: hidden;
    		z-index: 0;
    		position: relative;
    		border: 10px solid #ffffff;
    		background-color: #ffffff;
    	}		
    
    #lightwindow_loading {
    	/* REQUIRED */
    	height: 100%;
    	width: 100%;
    	top: 0px;
    	left: 0px;
    	z-index: 9999;
    	position: absolute;
    	/* REQUIRED */
    	background-color: #f0f0f0;
    	padding: 10px;
    }
    
    	#lightwindow_loading_shim { 
    		display: none;
    		left: 0px; 
    		position: absolute; 
    		top: 0px;
    		width: 100%; 
    		height: 100%;
    	}
    
    	#lightwindow_loading span {
        	font-size: 12px;
    		line-height: 32px;
    		color: #444444;
    		float: left;
    		padding: 0 10px 0 0;
    	}
    
    	#lightwindow_loading span a,
    	#lightwindow_loading span a:link, 
    	#lightwindow_loading span a:visited {
    		color: #09F;
    		text-decoration: none;
    		cursor: pointer;
    	}
    
    	#lightwindow_loading span a:hover,
    	#lightwindow_loading span a:active {
    		text-decoration: underline;
    	}
    
    
    	#lightwindow_loading img {
       		float: left;
       		margin: 0 10px 0 0;
    	}
    
    
    /*-----------------------------------------------------------------------------------------------
    	I liked the Navigation so much from http://www.huddletogether.com/projects/lightbox2/
    	I mean let's face it, it works really well and is very easy to figure out.
    -----------------------------------------------------------------------------------------------*/
    
    #lightwindow_navigation {
    	/* REQUIRED */
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	display: none;
    	/* REQUIRED */
    }
    	/* We need to shim the navigation for IE, though its more of a sub-floor */
    	#lightwindow_navigation_shim { 
    		/* REQUIRED */
    		display: none;
    		left: 0px; 
    		position: absolute; 
    		top: 0px;
    		width: 100%; 
    		height: 100%;
    		/* REQUIRED */
    	}
    
    	#lightwindow_navigation a,
    	#lightwindow_navigation a:link,
    	#lightwindow_navigation a:visited,
    	#lightwindow_navigation a:hover,
    	#lightwindow_navigation a:active { 
    		/* REQUIRED */
    		outline: none;
    		/* REQUIRED */
    	}
    
    	#lightwindow_previous, 
    	#lightwindow_next {
    		width: 49%;
    		height: 100%;
    		background: transparent url(/art/lightwindow/blank.gif) no-repeat; /* Trick IE into showing hover */
    		display: block;
    	}
    	
    	#lightwindow_previous { 
    		float: left;
    		left: 0px;
    	}
    
    	#lightwindow_next { 
    		float: right;
    		right: 0px;
    	}
    
    	#lightwindow_previous:hover, 
    	#lightwindow_previous:active { 
    		background: url(/art/lightwindow/prevlabel.gif) left 15% no-repeat; 
    	}
    
    	#lightwindow_next:hover, 
    	#lightwindow_next:active { 
    		background: url(/art/lightwindow/nextlabel.gif) right 15% no-repeat; 
    	}
    	
    	#lightwindow_previous_title,
    	#lightwindow_next_title {
    		display: none;
    	}
    	 	
    #lightwindow_galleries {
    	width: 100%;
    	position: absolute;
    	z-index: 50; 
    	display: none;
    	overflow: hidden;
    	margin: 0 0 0 10px;
    	bottom: 0px;
    	left: 0px;
    }
    
    	#lightwindow_galleries_tab_container {
    		width: 100%;
    		height: 0px;
    		overflow: hidden;
    	}
    
    	a#lightwindow_galleries_tab,		
    	a:link#lightwindow_galleries_tab,
    	a:visited#lightwindow_galleries_tab {
    		display: block;
    		height: 20px;
    		width: 77px;
    		float: right;
    		line-height: 22px;
    		color: #ffffff;
    		text-decoration: none;
    		font-weight: bold;
    		cursor: pointer;
    		font-size: 11px;
    		color: #ffffbe;
    		background: url(/art/lightwindow/black-70.png) repeat 0 0 transparent;
    	}
    	
    	* html a#lightwindow_galleries_tab,		
    	* html a:link#lightwindow_galleries_tab,
    	* html a:visited#lightwindow_galleries_tab {	
    		background: none;
    		background-color: #000000;
    		opacity: .70;
    		filter: alpha(opacity=70);
    	}
    
    	a:hover#lightwindow_galleries_tab,
    	a:active#lightwindow_galleries_tab {
    		color: #ffffbe;
    
    	}
    
    	#lightwindow_galleries_tab_span {
    		display: block;
    		height: 20px;
    		width: 63px;
    		padding: 0 7px 0 7px;
    	}
    	
    	#lightwindow_galleries_tab .up	{
    		background: url(/art/lightwindow/arrow-up.gif) no-repeat 60px 5px transparent;
    	}
    
    	#lightwindow_galleries_tab .down {
    		background: url(/art/lightwindow/arrow-down.gif) no-repeat 60px 6px transparent;
    	}
    
    	#lightwindow_galleries_list {
    		background: url(/art/lightwindow/black-70.png) repeat 0 0 transparent;
    		overflow: hidden;
    		height: 0px;
    	}
    
    	* html #lightwindow_galleries_list {
    		background: none;
    		background-color: #000000;
    		opacity: .70;
    		filter: alpha(opacity=70);
    	}	
    
    	.lightwindow_galleries_list {
    		width: 200px;
    		float: left;
    		margin: 0 0 10px 0;
    		padding: 10px;
    	}
    
    	.lightwindow_galleries_list h1 {	
    		color: #09F;
    		text-decoration: none;
    		font-weight: bold;
    		cursor: pointer;
    		padding: 10px 0 5px 0;
    		font-size: 16px;
    	}
    
    	.lightwindow_galleries_list li {
    		margin: 5px 0 5px 0;
    		list-style-type: none;
    	}
    
    	.lightwindow_galleries_list a, 
    	.lightwindow_galleries_list a:link, 
    	.lightwindow_galleries_list a:visited {
    		display: block;
    		line-height: 22px;
    		color: #ffffff;
    		text-decoration: none;
    		font-weight: bold;
    		cursor: pointer;
    		padding: 0 0 0 10px;
    		font-size: 11px;
    	}
    
    	.lightwindow_galleries_list a:hover, 
    	.lightwindow_galleries_list a:active {
    		background: #000000;
    		color: #ffffbe;
    		border-left: 3px solid #ffffbe;
    		padding: 0 0 0 7px;
    	}
    		
    #lightwindow_data {
    	/* REQUIRED */
    	position: absolute;
    	/* REQUIRED */
    }
    
    	#lightwindow_data_slide {
    		/* REQUIRED */
    		position: relative;
    		/* REQUIRED */
    	}
    
    	#lightwindow_data_slide_inner {
    		background-color: #ffffff;
    		padding: 0 10px 10px 10px;
    	}
    
    	#lightwindow_data_caption {
    		padding: 10px 0 0 0;
    		color: #666666;
    		line-height: 25px;
    		background-color: #ffffff;
    		clear: both;
    	}
    
    	#lightwindow_data_details {
    		background-color: #f0f0f0;
    		padding: 0 10px 0 10px;
    		height: 20px;
    	}
    	
    	#lightwindow_data_author_container {
    		width: 40%;
    		text-align: right;
    		color: #666666;
    	 	font-style: italic;
    		font-size: 10px;
    		line-height: 20px;
    		float: right;
    		overflow: hidden;
    	}
    	
    	#lightwindow_data_gallery_container {
    		font-size: 10px;
    		width: 40%;
    		text-align: left;
    		color: #666666;
    		line-height: 20px;
    		float: left;
    		overflow: hidden;
    	}
    	
    #lightwindow_title_bar {
    	height: 25px;
    	overflow: hidden;		
    }
    
    	#lightwindow_title_bar_title {
    		color: #ffffbe;
    		font-size: 14px;
    		line-height: 25px;
    		text-align: left;
    		float: left;
    	}
    
    	a#lightwindow_title_bar_close_link,	
    	a:link#lightwindow_title_bar_close_link,
    	a:visited#lightwindow_title_bar_close_link {
    		float: right;
    		text-align: right;		
    		cursor: pointer;
    		color: #ffffbe;
    		line-height: 25px;
    		padding: 0;
    		margin: 0;
    	}
    	
    	a:hover#lightwindow_title_bar_close_link,
    	a:active#lightwindow_title_bar_close_link {
    		color: #ffffff;
    	}
    
    /*-----------------------------------------------------------------------------------------------
    	Theme styling stuff
    -----------------------------------------------------------------------------------------------*/	
    
    #lightwindow p {
    	color: #000000;
    	padding-right: 10px;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just look at the classes in that link
    Code:
    lightwindow page-options
    You could use
    Code:
    .lightwindow {
    
    }
    or
    Code:
    .page-options {
    
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Didn't realize you could have multiple classes with one link, etc. Duh!

    Thanks for the assistance!


  •  

    Posting Permissions

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