Title: CSS Files
Last modified: August 20, 2016

---

# CSS Files

 *  Resolved [scarletcarnival](https://wordpress.org/support/users/scarletcarnival/)
 * (@scarletcarnival)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/css-files/)
 * I think I’ve found most of the CSS for the plug-in in the front.css file.
 * –IGNORE START–The results of the default—on my installation at least—came out
   as Courier and just all over the place; it was nothing like the beautiful screen
   shots in the User Guide at all.
 * However, I’m having trouble finding the code for the search form. It has a ‘pre’
   tag surrounding the whole code that doesn’t seem to make sense to me. I’m not
   sure if that’s standard, but the search form comes out almost deformed looking
   rather than the nice, neat version shown in the user guide. I’d like to be able
   to find the CSS and code for this so that it can be style to look more like a
   library search page rather than a block of code on a page.
 * It doesn’t matter which Theme I use either. The results are the same insofar 
   as the style of the output is concerned. I am sure it’s something I’ve done wrong
   or missed.–INGORE END–
 * In short, I’d like to better understand how the plug-in pages/shortcodes are 
   styled so that this can be used for a high quality front end for a small library.
   Eventually, I’ll be trying to figure out how to style a front end search page
   with results coming in on a different page. Following the user guide didn’t seem
   to have the same results. But first, I’d like to get the CSS worked out so that
   the search form and the results can match the overall Theme of the site.
 * Thank you again for a great plug-in and the assistance you’ve provided.
 * [http://wordpress.org/extend/plugins/weblibrarian/](http://wordpress.org/extend/plugins/weblibrarian/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [scarletcarnival](https://wordpress.org/support/users/scarletcarnival/)
 * (@scarletcarnival)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/css-files/#post-3600966)
 * Alright. I figured out the problem with the `pre` issue. **My fault entirely.**
 * My followup to this still is in regard to the CSS, I believe. And it comes to
   that final part of my question above.
 * How does one style the shortcodes in order to provide a more fluid and professional
   styling of the search form? At the moment, they are all bunched up together and
   there is no way, that I can tell, to spread them out or change their appearance
   so that it appears more like a library search page (or even like the beautiful
   screen shots in the User Guide).
 * Thanks again!
 *  Plugin Author [Robert Heller](https://wordpress.org/support/users/robertpheller/)
 * (@robertpheller)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/css-files/#post-3601048)
 * What are you using for a web browser? I believe there is a problem with IE9 and
   IE10 — appearently these browser don’t understand or implement ‘display: table*;’
   CSS codes. There is not much I can do about that — I don’t have access to machines
   with any version of IE on them, since all of my machines run Linux (CentOS 5),
   so I use Firefox.
 * The short codes use span and div tags, using class names starting with “weblib-“:
 *     ```
       .weblib-item-long {
         display: table;
       }
   
       .weblib-item-row {
         display: table-row;
         padding: 8px 0px;
         width: 100%;
       }
   
       .weblib-item-left {
         width: 90%;
       }
   
       .weblib-item-right {
       }
   
       .weblib-item-center-head {
         font-weight: bold;
         text-align: center;
         display: table-cell;
         padding: 2px;
       }
   
       .weblib-item-keyword-list {
         text-align: center;
         display: table-cell;
         padding: 2px;
       }
   
       .weblib-item-left-head {
         font-weight: bold;
         text-align: right;
         display: table-cell;
         padding: 2px;
       }
   
       .weblib-item-left-content {
         text-align: left;
         display: table-cell;
         padding: 2px;
       }
   
       .weblib-item-author {
         text-decoration: underline;
       }
   
       .weblib-item-title {
         font-weight: bold;
       }
   
       .weblib-item-content-block {
         display: table;
       }
   
       .weblib-item-content-element {
         display: table-row;
       }
   
       .weblib-item-element {
         display: table-cell;
         vertical-align: top;
         padding: 2px;
       }
   
       .weblib-item-info {
         width: 100%;
       }
   
       .weblib-item-index {
         font-size: 150%;
         padding: 0px 4px;
         text-align: left;
         width: 5%;
       }
   
       .weblib-item-brief {
       }
   
       .weblib-item-holdbutton {
       }
   
       .weblib-item-thumb {
         padding: 0px 4px;
         width: 48px;
         height: 72px;
       }
       ```
   
 * The styling (by default) organizes things as a table. Rather than using table,
   tr, td, and th tags to implement the display as a table I used spans and divs,
   with dislay table and table element styles. This way if someone wanted a *different*
   display arangement, they would not have to rewrite the short codes, but could
   alter the style sheet to imlement the different display arangement. Everything
   works just fine with Firefox, but appearently IE9 and IE10 are broken…
 *  Thread Starter [scarletcarnival](https://wordpress.org/support/users/scarletcarnival/)
 * (@scarletcarnival)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/css-files/#post-3601050)
 * I’m using Safari.
 * Excellent. This is precisely what I was looking for here. Thank you again.
 * I’m sure I’ll have more questions, but I’ll use a different thread.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Files’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/weblibrarian_ffffff.svg)
 * [WebLibrarian](https://wordpress.org/plugins/weblibrarian/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/weblibrarian/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/weblibrarian/)
 * [Active Topics](https://wordpress.org/support/plugin/weblibrarian/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/weblibrarian/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/weblibrarian/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [scarletcarnival](https://wordpress.org/support/users/scarletcarnival/)
 * Last activity: [13 years, 2 months ago](https://wordpress.org/support/topic/css-files/#post-3601050)
 * Status: resolved