Topic: Question about Theme.css

I have figured out how to customize this css file to get the look I want. But I have over a dozen galleries that should use this modified stylesheet. I want to have a single copy of theme.css that all galleries reference rather than a separate copy for each gallery. Is this possible? Thanks.

Re: Question about Theme.css

Yes. You can point towards a shared theme CSS file from within each gallery's embedding code using the themeUrl option (noted in the Embed Options section of the Config Options page).
The themeUrl value can be an absolute URL (starting with http:// or https://) or a relative path (relative to the web page containing the gallery's embedding code).
For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222",
        themeUrl: "my_themes/custom_theme/theme.css"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Re: Question about Theme.css

Thank you for your answer. But if I understand how things work, this code will be regenerated each time I modify the gallery, say to add an image or modify a caption. And I'll have to edit the code again. Sort of defeats the whole purpose.

Re: Question about Theme.css

If you edit a gallery using JuiceboxBuilder-Pro, then the only thing you need to update on your web server is the gallery's 'config.xml' file (which holds the gallery's configuration options and image data). (You'll also need to update the 'images' and 'thumbs' folders if you add any new images, though.)
There is no need to update the gallery's embedding code (unless you change the gallery's background color or dimensions) so you can leave this in place on your web server with no need to overwrite it with a version that does not contain the themeUrl.

If you use the gallery's own 'index.html' page (generated by JuiceboxBuilder-Pro) to display the gallery on its own web page (rather than embedding the gallery in an existing web page alongside other content) and are in the habit of uploading the entire gallery folder to your web server after editing, then you can modify the template file that JuiceboxBuilder-Pro uses to generate the 'index.html' page so that the themeUrl is present in every gallery you create and edit.

Open the following file in a plain text editor and add the themeUrl to the embedding code:
Windows: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\index.html
Mac: /Applications/JuiceboxBuilder-Pro.app/Contents/Resources/template/index.html

For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '%%WIDTH%%',
        galleryHeight: '%%HEIGHT%%',
        backgroundColor: '%%COLOR%%',
        themeUrl: '/my_themes/custom_theme/theme.css'
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

The leading slash in the themeUrl above denotes your root directory (i.e. the themeUrl is a relative path always starting at your root directory) so such a themeUrl would work in any page throughout your website without modification.

Re: Question about Theme.css

Thanks-I will try this.

Re: Question about Theme.css

Great! Just give me a shout if you run into any problems and I'll try to help you out.

Re: Question about Theme.css

I tried what you suggested but am denied permission to edit index.html in the template folder. I am logged on as administrator.

Re: Question about Theme.css

You'll likely need to run whatever editing program you use as an administrator (as well as being logged  on as an administrator).
Rather than just double-clicking your editing program's shortcut, right-click it and select 'Run as administrator'.

Incidentally, after opening your editing program via 'Run as administrator' you may not be able to drag and drop the 'index.html' file into the program. You may need to use the program's 'File -> Open' functionality to open the 'index.html' file instead.

I hope this helps.

Re: Question about Theme.css

I have got this working except for one thing. The three icons at the top right of the gallery screen - hide thumbnails, etc. - display simply as squares and not the icons that used to be there. The buttons work, however.

Re: Question about Theme.css

The icons for the gallery's Button Bar are characters in a custom font and the font files are inside the 'jbcore/classic/fonts' folder. The 'theme.css' file contains relative links to the font files (inside the 'jbcore/classic/fonts' folder) and the image files (inside the 'jbcore/classic/img' folder) and relies on the 'fonts' and 'img' folders being in the same directory.

Just pop the 'fonts' and 'img' folders (from the 'jbcore/classic' folder) into the same directory as your custom 'theme.css' file and all should be well.