- This topic has 5 replies, 2 voices, and was last updated 13 years ago by
.
-
Posts
-
I’m trying to do some styling on a new using we are going to use the Events Calendar on. I am styling locally to match this page: http://events.unc.edu. It is going well, but I have run into a problem with the nav arrows on the top left calendar area. I am using the default events widget and I want to change the mini-ajax-arrow-sprite.png to match the old site. The old site (http://events.unc.edu) uses some white static images, but I see on the new site it is using this combined image… can I change that and make the arrows smaller so they fit in the rest of the styling on the new site (http://events.sites.unc.edu)? Could y’all point me in the right direction?
Hi Jeff, let me see if I can help point you in the right direction. So this is the main CSS for the arrow:
.tribe-events-widget-nav a {
position: absolute;
top: 0;
display: block;
font-weight: normal;
text-decoration: none;
font-size: 16px;
width: 16px;
height: 16px;
overflow: hidden;
background: url(images/mini-ajax-arrow-sprite.png) -16px -16px no-repeat;
}
…and then the next and prev links use specific code to align the sprite:
.tribe-events-widget-nav a.next-month {
right: 0;
background-position: 0 -16px;
}
So the first thing you would want to do is either use a different sprite or use individual images for each of the links. Then, just change the width and height and you should be good to go.Does that help?
How does one make a different sprite? I’ve never done that before. Can I just edit the one that is included to have the right background, sizes, etc? Maybe point me to some info on sprite images? Sorry for being such a newbie…
Hi Jeff,
Just do a search for CSS sprites, there’s tons of articles out there on it. Here’s a pretty good one: http://css-tricks.com/css-sprites/
I hope that helps!
- The topic ‘Customize mini-ajax-arrow-sprite.png images.’ is closed to new replies.