• DevCenter
• Projects
• Reverb - Customize Index Panel Formatting

Reverb - Customize Index Panel Formatting

Description

I would like to edit the formatting of the index panel in my Reverb output. I found where to change the color of the index panel background by editing .ww_skin_index_background and where to change the font sizes of the index title, groups, entries, and links in skin.css, but can’t find where to edit the margins and indentation of these elements.

Is there code I can add to skin.css to change the margins and indentation on the index text or is that defined elsewhere?

Update 3/27/13

Take a look at Index.asp and connect.css. Specifically, this section in connect.css:

div#index {
}

2013-03-27 B

The index format in WebWorks Reverb is controlled via skin.css in the 2012.4 and later releases. Look for the following entries:

• ww_skin_index_list
  ww_skin_index_list_group
  ww_skin_index_list_entry

A sample index is now provided in the "Skin.html" file for testing/development of your "skin.css" file. You can learn more about that process by watching a recording of the August, 2012 Power Hour:

• Reverb - Toolbar/Look-and-Feel Customizations

  http://www.webworks.com/Recordings/2012/08/Power%20Hour%20-%20August%202012/

BenAllums

2013-04-10

Thanks for the help!

In connect.css, I was able to put more leading between the lines of text by adding line-height: 1.2em; to the div#index element. That helped with the line spacing.

I’ve attached an image for reference:

I would like to make the margins smaller for the groups, entries, and links so the multiple levels do not push the text so far over to the right. I’d also like to make the extra leading (padding?) above the group letters instead of below them, so they are closer to the following text they are associated with instead of the text above them. I haven’t been able to figure out how to adjust these settings, yet. I tried adding text-padding and text-indent settings to .ww_skin_index_group and .ww_skin_index_entry in skin.css, but that did not help. I also tried adding text-padding and text-indent settings to div#index in connect.css without any benefit. Do I need to use different code?

In Index.asp, I tried to comment out the title element so that Reverb_TEB_Admin_Test title wouldn’t show up, but that didn’t work. Is there a way I could do that?

2013-04-18

Scott,

Two recommendations for you:

1. Attend Study Hall. These sessions occur twice a month and are a great place to talk about these type of issues. You have a lot of formatting specific, fine detail questions. Hard to understand what you want via offline communication. Study Hall allows you to play with this real-time.

2. Check out the Inspection tools in FireFox (with FireBug) or in Google Chrome, Apple Safari. These tools allow you to click on elements and change their CSS formatting within the browser. You get real-time feedback about what your changes are affecting. This is a tool we rely on to develop Reverb skin designs ourselves. We'd be more than a little lost without them.

2013-05-08

Thanks for the help in Study Hall, Ben! I installed Google Chrome to use the developer tools and I wish I'd done that a long time ago.

I did not get the desired effect modifying the index classes in skin.css until I tried negative values. Here's the code that looks good in the output:

.ww_skin_index_group {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: -15px;
    margin-left: -20px;
}


.ww_skin_index_entry {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    margin-top: 15px;
    margin-bottom: -15px;
    margin-left: -30px;
}

The index looks good now. Thanks!