BragIt
How to Tweak the Plug-in

How to manually change certain aspects of the visual appearance

Although many things can be adjusted from within the plug-in inside Lightroom, it does not provide a graphical interface to every conceivable aspect of the visual appearance. Although it would be theoretically possible to provide such GUI controllers for everything, it would not only be hard work, it would be an unwieldy and cluttered interface.

Some people have asked for ways to change certain things, and since the license for the payed version of the plug-in permits you to modify it, BragIt provides instructions herein describing how to make certain changes. There are basically two things that might be reasonable to change: the navigation buttons and some settings in a style sheet.

IMPORTANT: BragIt provides absolutely NO SUPPORT for customizations such as those described here! The information is only provided to those who wish to customize the plug-in a bit to fit your special preferences. It is only relevant to those who are willing to spend time and effort and are keen on experimenting. It is NOT meant as a vehicle for the average user who just wants the thing to work out of the box. If you have any difficulties with any part of information given here, then skip the whole idea of customization beyond what the graphical user interface provides!

How to change the navigation buttons

  1. Make a backup by copying 'BragIt_html_slideshow.lrwebengine' to a safe place outside the folder where it currently resides (see the ReadMe file for locating it).
  2. Open 'BragIt_html_slideshow.lrwebengine' as a folder.
    On Windows it already is a folder, so just open it.
    On a Mac you open the file by control-clicking it and choose 'Show Package Contents'.
  3. Navigate to 'resources/misc/'

Here you will see 5 icon files in GIF format that all start will 'butt'. The files named 'buttLeftGreen.gif' and 'buttRightGreen.gif' are used for "active" buttons to navigate to the previous and next photo. The files just named 'buttLeft.gif' and 'buttRight.gif' are "passive" buttons used at the same positions as the green ones when you are at the beginning or the end of the slideshow, in which case the buttons are not clickable since you can't go further in that direction.

You can design your own buttons and name them exactly the same as these files. Of course, a button doesn't need to really be green even though it is named 'buttRightGreen'. However, they MUST all be EXACTLY 25 × 25 pixels! And be named exactly as these files, with exactly the same file extension!

The file named 'buttStopRed.gif' is the middle button that takes you back to the index page. Just as the other buttons, you can make your own in any color, or no color, and save it with the same name, as long as the gif file is exactly 25 × 25 pixels.

How to change the the dotted lines and some other visual things controlled by a style sheet

  1. Make a backup by copying 'BragIt_html_slideshow.lrwebengine' to a safe place outside the folder where it currently resides (see the ReadMe file for locating it).
  2. Open 'BragIt_html_slideshow.lrwebengine' as a folder.
    On Windows it already is a folder, so just open it.
    On a Mac you open the file by control-clicking it and choose 'Show Package Contents'.
  3. Navigate to 'resources/css/'
  4. Open the file 'master.css' in a plain text editor.

    IMPORTANT: This editor must be a text editor that only edits plain text without styles, and it must be able to read files with Unix line feeds, and it must be able to store in the same text encoding as the original file.

  5. Make changes according to some suggestions given below.

    IMPORTANT: This file contains many settings that are critical for a functioning plug-in. If you do arbitrary changes to the file, you will most likely render the plug-in useless. And even if you think it works, there is no guarantee that the html files look nice in all or most browsers. Therefore, cake great care when making any changes! Minor syntax errors such as an omitted ";" can easily render the plug-in useless. There are actually only a few settings that might be reasonable to change. Errors won't destroy your photos, but you will definitely need a good backup of the plug-in!

    To change the dotted line below the title on the index page of thumbnails:

    Search for '.thumbPageTitle', and study the line 'border-bottom: 1px dotted;'. To remove the dotted line (making it invisible), change 'dotted' to 'none'. Other conceivable settings are: dashed, solid, double, groove, ridge. You can increase the thickness by choosing another value than 1px. You can also make it colored by adding a color. Example: '2px solid maroon'. (For the full syntax, see http://www.w3.org/TR/CSS21/).

    To change the dotted lines above/below the Collection Description:

    Search for '.collectionDescription'. You can make the same changes here as described above for the title.

  6. Save the file using the same text encoding and line endings as the original.

    When a file is saved, it is saved in a certain text encoding and with a certain character for line endings. The text encoding of the file is 'Western (ISO Latin 1)' which is the same as 'ISO 8859-1', and the line endings are Unix LF. Since most (or all) characters in this file are regular us-ascii, it shouldn't be so critical which encoding is used, but it is safest to keep the original. As for line endings, I think the system is pretty liberal about it, but it's best to keep the original.

Back to main page

Last updated: 2010-01-02 at 14:46:08 - CET