Book Navigation the right way

By jbrauer on 8 Sep 2006 at 01:47 UTC

I'm stuck trying to figure out the right way to handle and theme the book navigation links.

The problem is that pages with long titles wrap in odd ways and can make the page hard to read.

I solved the problem (the wrong way) by modifying theme_book_navigation in book.module. I now have a simple table with up to three cells. Each of the links built for navigation of the book has an enclosing

<td>...</td>

tags around the actual link. The result works passably but will be wiped out in the next upgrade when book.module gets overwritten. Question is, how should it be done correctly?

Comments

I like to post and then answer my own questions....

jbrauer commented 8 September 2006 at 02:10

Well, actually I don't, but after posting here the .css of the forums gave me the clue. The handbook pages could (IMHO) use the same fix... at the very least my site has it. The following CSS makes nice book links:

.book-navigation {
  border: 0px;
  border-top: 0px;
  border-bottom: 0px;
  padding: 0.1em 1em;
  margin: 0px 0px 0.5em 0px;
  background:  #F0F3F7;
}
.book-navigation .page-links {
  border: 0px;
  border-top: 0px;
  border-bottom: 0px;
}
.book-navigation:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  border-top: 0px;
  border-bottom: 0px;
  font-size: 0px;
  height: 0px;
}
.book-navigation .page-previous {
  float: left;
  border-top: 0px;
  border-bottom: 0px;
  width: 40%;
  text-align: left;
  margin: 0px;
}
.book-navigation .page-next {
  float: right;
  width: 40%;
  border-top: 0px;
  border-bottom: 0px;
  text-align: right;
  margin: 0px;
}
.book-navigation .page-up {
  width: 20%;
  float: left;
  border-top: 0px;
  border-bottom: 0px;
  text-align: center;
  margin: 0px;
}

------------------------------------
Adding Understanding