[Koha-bugs] [Bug 7669] Search Results Multiple Cover Image HTML & CSS

[bugzilla-daemon at bugs.koha-community.org]

http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669

Jared Camins-Esakov <jcamins at cpbibliography.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
   Attachment #8065|0                           |1
        is obsolete|                            |

--- Comment #3 from Jared Camins-Esakov <jcamins at cpbibliography.com> ---
Created attachment 8152
  -->
http://bugs.koha-community.org/bugzilla3/attachment.cgi?id=8152&action=edit
Bug 7669: Add CSS classes to OPAC results thumbnails

Looks at the code for the images in the template I notices some were raw
images, some were encased in <div> tags, and no-images were in <spans>. I added
classes to the elements to make then more easily modified by the end user
through the OPAC CSS options.

Also, all images and no-images now have float:left (this was in the .thumbnail
class). I combines the thumbnail elements into the .no-image{} class. It does
not have div.no-image like the still active span.no-image, because that is an
element specific class and thus any settings in it override user settings. So,
it has to stay simply .no-image.

Images "<img>" now have a class thumbnail_image. This was in keeping with
consistent and unique element classes. thumbnail is used by all the <div>
elements.

Here are the new classes I have added, that are vendor/company specific:
/* New Classes for Thumbnail Images */
.thumbnail_image { /* specific class for the actual <img> tag */
}

/* specific classes for thumbnails */
.opac_thumb, .amazon_thumb, .google_thumb, .syndetics_thumb,
.openlibrary_thumb, .bakertaylor_thumb{
}

/* specific classes for no-image */
.amazon_no, .google_no, .openlibrary_no, .bakertaylor_no{
}

Example Code to see why:
/*examples how a specific class works*/
div.amazon_no{ /*Amazon no image [seem broken in code]*/
border: 1px solid #FFA500; /*amazon is ornage*/
}
.google_thumb, .google_no{/*Google no image*/
border-top: 2px solid #F00;
border-right: 2px solid #080;
border-bottom: 2px solid #FF0;
border-left: 2px solid #00F;
padding: 2px;
}
.openlibrary_no{
background: url(http://openlibrary.org/images/logo_IA-sm.png) right center
no-repeat;
color: #00F;
text-align: left;
}

Signed-off-by: Jared Camins-Esakov <jcamins at cpbibliography.com>

-- 
You are receiving this mail because:
You are watching all bug changes.