1 (edited by RupertSnigg 2019-01-29 23:25:26)

Topic: Hyperlink text colour [SOLVED]

I have created a gallery in Pro and need to link certain image captions to a specific web page. I have done this successfully by editing the .xml file. However the caption does not really show the user that it is a hotlink, apart from the tiny dotted underline below the linking text. Is it possible to make the text more like a "conventional" hyperlink (colour, underline on mouseover)? Can I do this in the xml file?
I dont want to mess up your css file when I don't really know what I'm doing!

EDIT: It would appear that the css for the page that the gallery is embedded on is altering the appearance of the hyperlinks in the gallery. I dont really want to alter the site template, so it looks like I need to edit the .xml file?

Re: Hyperlink text colour [SOLVED]

A link in an image caption will take on the gallery's textColor (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) and will be underlined by default (like the link in the image caption for the first image in this demo gallery).

You can style an individual link using HTML formatting (inline CSS) as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

If you enter your image caption directly into JuiceboxBuilder-Pro's interface, then you can use something like:
<a href="index.html" style="color: #0000ff; text-decoration: underline;">Link</a>
If you edit your gallery's 'config.xml' file in a plain text editor, then you can use a <caption> such as:
<caption><![CDATA[<a href="index.html" style="color: #0000ff; text-decoration: underline;">Link</a>]]></caption>
(JuiceboxBuilder-Pro will automatically add the <caption> and CDATA tags for you.)

Otherwise, you could set the styling for all links within your gallery at once using CSS (either in your gallery's embedding web page or in your gallery's 'jbcore/classic/theme.css' file).
Try adding something like the following to the end of your gallery's 'jbcore/classic/theme.css' file.

.juicebox-gallery a {
    color: #0000ff;
    text-decoration: underline;

Be sure to clear your browser's cache after making any changes to ensure that your browser is using the most recent versions of your gallery files (instead of older cached versions).

I hope this points you in the right direction.

Re: Hyperlink text colour [SOLVED]

Many thanks for your explanation Steven. I have now  sorted it and it works well.

Re: Hyperlink text colour [SOLVED]

That's great!
Thank you for letting me know.