Cargo home Twitter Devlog

Replacing a text link with an image

Last Updated: Nov 11, 2013 06:49PM PST
CSS can be used to replace the text in your text nav with images. Create projects, pages, and links in your website normally, giving each one a title and turning them on in your project list.
 
Then, target each link individually with a new image to replace that text:
 
 #menu_123 a {
   display: block;
   height: 30px;
   width: 30px;
   background-image: url(url_of_image_here.png);
   text-indent: -9999px;
   overflow: hidden;
}
Change 123 to the PID of the relevant link. Add more CSS selectors as necessary - one for each link that you want to change. Additionally, the example above assumes that the image is 30px wide and 30px tall; modify those dimensions as necessary.
 
You'll also need to upload an image into a page or project in order to grab its URL and place it in the background-image property.

If you are using a Feed-based design ( Feed, Turing, ozFeed, nonFeed, xFeed ), target #menu_123 instead of #menu_123 a .



If there are other text links you'd like to change, ( like the "Next" / "Index" links in the project header), those can also be targeted the same way. They do not require a PID. Instead of targeting "#menu_123 a", use the relevant selector from the list below:

Project header links:
#content_container .project_header .project_index a
#content_container .project_header .project_next a

Thumbnail pagination:
.pagination a.next_page
.pagination a.prev_page

Slideshow navigation:
#content_container a.slide_next
#content_container a.slide_prev
tickets@cargocollective.com
http://assets0.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete