WordPress.org

1. Anonymous
   Unregistered
   Posted 3 years ago #

   I finally got my theme the way I wanted it in WP, except for one thing; the CSS sprites that work on the rest of my pages refuse to function properly in the PHP-based WP page. Instead of rolling the image up like they should, the entire button disappears. The link is still there, but the images are not. Is there some PHP call or code that I need to insert to get the sprites to work? They're sort of important, so I need to get them working.

2. chaoskaizer
   Member
   Posted 3 years ago #

   any specific link? code?

3. Anonymous
   Unregistered
   Posted 3 years ago #

   sorry. The site is http://www.hillsdalesigmachi.org/news

   When you rollover, all you get is blank images when the images should roll up to reveal the hover image.

4. Anonymous
   Unregistered
   Posted 3 years ago #

   I've found a tutorial for applying the sprite technique to WordPress categories, but since my site is not entirely hosted by wordpress, it is of no use for me.

5. Anonymous
   Unregistered
   Posted 3 years ago #

   Here is the CSS code that I use for the navigation on the rest of the site. (which works everywhere but on the WP page) This code is a bit different than some other sprite code, because the image starts at the top, and then rolls down. (most other code I've seen starts at the bottom and rolls up)

   .nav_container {
   	width: 875px;
   	padding-top: 0px;
   	margin-right: auto;
   	margin-left: auto;
   	float: none;
   	position: relative;
   	left: auto;
   	right: auto;
   	z-index: auto;
   }
   
   #navMenu{
   	display: inline;
   	padding: 0px;
   	width: 700px;
   	margin-right: auto;
   	margin-left: auto;
   	float: none;
   	height: 45px;
   	left: auto;
   	right: auto;
   	Z-index: auto;
   }
   
   #navMenu li{
   	float: left;
   	display: inline;
   }
   
   #navMenu li.first{
   	float: left;
   	display: inline;
   	width:25px;
   	height:40px;
   	padding:0px;
   	background-image: url("Images/LeftEnd.png");
   }
   
   #navMenu li.last{
   	float: left;
   	display: inline;
   	width:25px;
   	height:40px;
   	background-image: url("Images/RightEnd.png");
   }
   
   #navMenu li.spacer{
   	float: left;
   	display: inline;
   	width:165px;
   	height:45px;
   	background-image: url("Images/alphakappaseal.png");
   }
   
   a.navNews, a.navNews:active{
   	display:block;
   	float:left;
   	width:110px;
   	height:45px;
   	background-repeat:no-repeat;
   	background-image: url("Images/News.png");
   }
   a.navNews:hover{
   	background-image: url("Images/News.png");
   	background-position: 0 90px;
   }
   a.navNews:active{
   	background-image: url("Images/News.png");
   	background-position: 0 45px;
   }
   
   a.navRush, a.navRush:active{
   	display:block;
   	float:left;
   	width:110px;
   	height:45px;
   	background-repeat:no-repeat;
   	background-image: url("Images/Rush.png");
   }
   a.navRush:hover{
   	background-image: url("Images/Rush.png");
   	background-position: 0 90px;
   }
   a.navRush:active{
   	background-image: url("Images/Rush.png");
   	background-position: 0 45px;
   }
   
   a.navAlumni, a.navAlumni:active{
   	display:block;
   	float:left;
   	width:110px;
   	height:45px;
   	background-repeat:no-repeat;
   	background-image: url("Images/Alumni.png");
   }
   a.navAlumni:hover{
   	background-image: url("Images/Alumni.png");
   	background-position: 0 90px;
   }
   a.navAlumni:active{
   	background-image: url("Images/Alumni.png");
   	background-position: 0 45px;
   }
   
   a.navAbout, a.navAbout:active{
   	display:block;
   	float:left;
   	width:110px;
   	height:45px;
   	background-repeat:no-repeat;
   	background-image: url("Images/About.png");
   }
   a.navAbout:hover{
   	background-image: url("Images/About.png");
   	background-position: 0 90px;
   }
   a.navAbout:active{
   	background-image: url("Images/About.png");
   	background-position: 0 45px;
   }
   
   a.navLogin, a.navLogin:active{
   	display:block;
   	float:left;
   	width:110px;
   	height:45px;
   	background-repeat:no-repeat;
   	background-image: url("Images/Login.png");
   }
   a.navLogin:hover{
   	background-image: url("Images/Login.png");
   	background-position: 0 90px;
   }
   a.navLogin:active{
   	background-image: url("Images/Login.png");
   	background-position: 0 45px;
   }
   
   a.navDonate, a.navDonate:active{
   	display:block;
   	float:left;
   	width:110px;
   	height:45px;
   	background-repeat:no-repeat;
   	background-image: url("Images/Donate.png");
   }
   a.navDonate:hover{
   	background-image: url("Images/Donate.png");
   	background-position: 0 90px;
   }
   a.navDonate:active{
   	background-image: url("Images/Donate.png");
   	background-position: 0 45px;
   }

6. Anonymous
   Unregistered
   Posted 3 years ago #

   I believe after tinkering with it that the CSS code isn't being read properly for some reason. Does anybody have any tips on how to fix this?

7. Anonymous
   Unregistered
   Posted 3 years ago #

   This is absolutely bizarre.

   I changed the values in the code where it moves the images from positive to negative, and they're working now. Maybe there's a bug in WP that caused it to be reading it backwards?

Topic Closed

This topic has been closed to new replies.