Cosmetic Questions

  • Heya all;
    This is more a cosmetic question. I managed to get the links for the navigation centered thanks to a previous thread I read through. However, I wanted to know if there was a way I could replace the links in the navigation CSS with images, like on webcomic sites like this.
    How would I go about this? I tried the CSS route, but that just added a background image where I want to make the entire image replace the text link itself.
    Thanks ahead of time for the help! I left the CSS example up since it captures the “spirit” of what I wanted to do, haha.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter orribu

    (@orribu)

    So I’m doing some research…full disclosure, I’m not a developer by any sense of the word, so the PHP is intimidating. I know I’m doing something wrong, but I can’t tell what. I know CSS is for looks alone.

    Here’s the CSS I used:

    /* comic navigation */
.comic-nav-hlist-wrapper {
    text-align: center;
    font-size: 0; /* fixes inline-block spacing issues */
    margin: 5px 0 10px 0;
    padding: 0;
    clear: both;
    float: none;
}
 
.comic-nav-hlist {
    font-size: 16px;
    list-style: none;
}
 
.comic-nav-hlist > li {
    display: inline-block;
    margin-right: 10px;
}

li.link-last{
background: url('https://twistedfates.net/wp-content/uploads/Navi_Latest.png') no-repeat;
	display: inline-block;
	height: 64px;
	width: 64px;
	
}
li.link-next{
background: url('https://twistedfates.net/wp-content/uploads/Navi_Next.png') no-repeat;
	display: inline-block;
	
	
	height: 64px;
	width: 64px;
	margin-left: 16px;
}
li.link-prev{
background: url('https://twistedfates.net/wp-content/uploads/Navi_Last.png') no-repeat;
	display: inline-block;
	height: 64px;
	width: 64px;
	margin-right: 16px;
}

li.link-first{
background: url('https://twistedfates.net/wp-content/uploads/Navi_First.png') no-repeat;
	display: inline-block;
	height: 64px;
	width: 64px;
	
}
/*End Comic Navigation*/
Viewing 1 replies (of 1 total)
  • The topic ‘Cosmetic Questions’ is closed to new replies.