1 Topic by rkguy (edited by rkguy 2014-06-27 19:18:53)

  • Registered: 2014-06-26
  • Posts: 12

Topic: Customizing Theme.css ? [SOLVED]

I see in the Theme.css file it states

"/* Use the following CSS code if you want to use data attributes for inserting your icons */"

It looks like I can throw in a share on facebook, or twitter, etc. icon into the gallery but where do I copy and paste the code? Somewhere else in the Theme.css file or do I have to make a new css file with that code in it?

For example it shows this under the /* Use the following CSS code if you want to use data attributes for inserting your icons */ line:

.jb-bb-button.jb-bb-btn-facebook:before
{
    content: "\e00f";
}

Do I have to modify this in some way and where do i put it?

Can I use this same method to add something like a "Return Home" button? I want to give the user the option to use full screen mode outside of our site and then return to our site after viewing.


Thanks

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Customizing Theme.css ? [SOLVED]

If you want to change any of the icons in the gallery, then please see the Theming Guide for details.
The \e00f entries are characters in a custom font. You could replace or add icons to the stock Juicebox font (as described in the Theming Guide) and then change the entries in the 'theme.css' file to match your new icons.

Can I use this same method to add something like a "Return Home" button?

This sounds like you might want to make use of the Back Button. You can set the backButtonUrl (the URL the browser will be redirected to when the Back Button is clicked) to any URL you like (absolute or relative to the web page containing the gallery's embedding code).

  • Registered: 2014-06-26
  • Posts: 12

Re: Customizing Theme.css ? [SOLVED]

Nothing seems to be working....is it because I used the Juicebox Light - Lightroom plug-in to do my galleries?

Ryan

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Customizing Theme.css ? [SOLVED]

A Juicebox gallery created by the Lightroom plugin uses the same 'jbcore' files as a Juicebox gallery created by JuiceboxBuilder-Lite and the same procedure would be used to change icons in both Juicebox-Lite and Juicebox-Pro.
I'll try to help further if I can but I'll need some more information.
What exactly are you trying to do, how far into the procedure do you get before you get stuck and what seems to be the problem?

Please bear in mind that the Custom Icons support section will allow you to change existing icons in a gallery but will not allow you to create a completely new button with new functionality.
If this is what you are looking to do, then please see this forum post which may help.

  • Registered: 2014-06-26
  • Posts: 12

Re: Customizing Theme.css ? [SOLVED]

Thanks Steve

At this stage of our site design the expand gallery button does not appear...

So for example right now you click "Portfolio > Dimensional" you get this page:

http://signsvictoria.ca/#!/dimensional

and the gallery does not have an "expand gallery" button.

I'd like to either force the "expand gallery" button to appear or add a button that will take them here:

http://signsvictoria.ca/dimensional/

Once there I want to have another button that will give them the option of going back to the main portfolio page here:

http://signsvictoria.ca/#!/portfolio

I'd also like to give them the option of sharing the photos on facebook, pintrest, googe+, etc. but that's not critical at this stage.

As far as what seems to be the problem...it's me... :) ... I haven't done any web design work in probably 10+ years and things have changed a lot. I simple don't know how to modify/add the correct code to the correct file(s).

Also, our site takes a long time to load so I'm concerned that all the modification I've been doing are either incorrect or have made the code too cumbersome thus slowing it down. :(

thanks Steve
Ryan

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Customizing Theme.css ? [SOLVED]

the gallery does not have an "expand gallery" button.

This is due to the way your gallery is embedded in your web page. You are loading your gallery's 'index.html' page into an <object> tag in your main page (which is essentially the same as loading a gallery into an <iframe>) and this will automatically disable the Expand Button. This is noted in the 2) Using an iframe section here.

I'd like to either force the "expand gallery" button to appear or add a button that will take them here:

If you were using Juicebox-Pro, you could use the Back Button to link directly to a page.
However, as a Juicebox-Lite user, you could turn your Gallery Title into a link by using HTML formatting as documented in this FAQ:
How do I add HTML formatting to the Gallery Title or Back Button?
For your Dimensional gallery, you could enter a Gallery Title in JuiceboxBuilder-Lite's 'Customize' section such as:

<a href="http://signsvictoria.ca/dimensional/">Click to open gallery on its own page</a>

Once there I want to have another button that will give them the option of going back to the main portfolio page here:

As well as the Back Button and the Gallery Title, you can also add links to image titles and captions:
How do I add HTML formatting to image captions and titles?

I'd also like to give them the option of sharing the photos on facebook, pintrest, googe+, etc. but that's not critical at this stage.

Social Sharing is possible with Juicebox-Pro. Please see here for details.

Also, our site takes a long time to load

Your web pages are quite complex and load 4 external CSS files and 12 external JavaScript files (not counting the Juicebox files).
Depending on the size of all these files, they may take some time to load and for your page to initially be rendered in visitors' browsers.

7 Reply by rkguy (edited by rkguy 2014-06-30 22:54:30)

  • Registered: 2014-06-26
  • Posts: 12

Re: Customizing Theme.css ? [SOLVED]

Thanks Steve

However, as a Juicebox-Lite user, you could turn your Gallery Title into a link by using HTML formatting as documented in this FAQ:
How do I add HTML formatting to the Gallery Title or Back Button?
For your Dimensional gallery, you could enter a Gallery Title in JuiceboxBuilder-Lite's 'Customize' section such as:
<a href="http://signsvictoria.ca/dimensional/">Click to open gallery on its own page</a>

I gave that a try in the Dimensions gallery and it works in Chrome & Firefox but in IE it says: Juicebox Error: Config XML file not found ???

OH! wait....never mind. I had to clear IE's cache.

Thanks Stephen

  • Registered: 2014-06-26
  • Posts: 12

Re: Customizing Theme.css ? [SOLVED]

is there an easy way to add a little "Home" icon to the gallery? Maybe next to the "Hide Thumbnails" icon?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Customizing Theme.css ? [SOLVED]

Your Gallery Title is currently missing its closing </a> tag at the end of the link.

is there an easy way to add a little "Home" icon to the gallery?

This is what the Back Button was designed for (but it is a Pro-only option). The Back Button icon can be seen in the top-left corner of this demo gallery.
With Juicebox-Lite, you could perhaps overlay a custom image link on top of your gallery (in the web page containing the gallery's embedding code) using HTML and CSS.

Maybe next to the "Hide Thumbnails" icon?

It is not possible to add a custom button to the Button Bar (in either Juicebox-Lite or Juicebox-Pro) or to include the Back Button as part of the Button Bar.

10 Reply by rkguy (edited by rkguy 2014-07-02 19:08:24)

  • Registered: 2014-06-26
  • Posts: 12

Re: Customizing Theme.css ? [SOLVED]

Thanks Stephen

I've fixed the closing </a> tag and managed to add in two icons: "enlarge image" and "return to portfolio".

http://signsvictoria.ca/#!/dimensional

Is there some way of adding our logo somewhere on the gallery? The reason i ask is when then go to the enlarge image page there's nothing that indicates they are still on our site....in fact they may think they're on the juicebox website because of the logo in the bottom right corner.
It would be great too if it only showed up when they went to the elarged view but I'm guessing that's either a Pro feature or requires some tricky [programming.

Thanks again for all your help Stephen

Ryan

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Customizing Theme.css ? [SOLVED]

Is there some way of adding our logo somewhere on the gallery?

Please see the Adding a Logo support section for suggestions on how to incorporate a logo into a Juicebox gallery.

in fact they may think they're on the juicebox website because of the logo in the bottom right corner.

If you would like to remove the Juicebox branding from your gallery, you could purchase Juicebox-Pro. Pro galleries do not have the Juicebox badge/link in the lower-right corner.

It would be great too if it only showed up when they went to the elarged view but I'm guessing that's either a Pro feature or requires some tricky [programming.

This is not something that could easily be implemented just by setting a configuration option but it might be possible with the Juicebox-Pro API.
You could run some custom JavaScript code when the gallery is expanded using the onExpand(expanded) event.

jb.onExpand = function(expanded) {
    if (expanded) {
        // Gallery has been expanded. Do something.
    }
    if (!expanded) {
        // Gallery has been closed. Do something else.
    }
};

12 Reply by rkguy (edited by rkguy 2014-07-03 17:34:12)

  • Registered: 2014-06-26
  • Posts: 12

Re: Customizing Theme.css ? [SOLVED]

Thanks Stephen

Looks like these are all Pro options.

I thought I had found a work around by adding our logo to the top left corner on a separate "enlarged.html" page...

http://signsvictoria.ca/dimensional/enlarged.html

It works on Firefox....BUT...on Chrome and IE the logo appears and then gets covered up.

Ryan

- - - - - I managed to fix it but adding in: style="position: relative; z-index: 100;"

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Customizing Theme.css ? [SOLVED]

I'm glad that you have successfully been able to add a logo to your gallery.
Thank you for posting back to let me know.