This question is answered. Helpful answers available: 0. Correct answers available: 1.


Permlink Replies: 30 - Pages: 3 [ Previous | 1 2 3 ] - Last Post: 24 Feb 21, 23:28 Last Post By: RobM
RobM

Posts: 3,815
Registered: 4-Aug-2006
Re: Hydrogen Hyperlinks
Posted: 24 Feb 21, 23:26   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
Here is a more flexible way, in total this now shows how to add a new section containing a jAlbum variable:

Keep the changes to the script.js file
In index.htt replace the block of code from line 216
var item = $jA("<div>", {"class": "item"});
to
dropThumbs.append(item);
with
var item = $jA("<div>", {"class": "item"});
var animateBox = $jA("<div>", {"class": "animate-box bounceIn animated"});
var a = $jA("<a>", {"class": "image-popup fh5co-board-img", "href": slides[i].slide});
var slide = $jA("<img src='" + slides[i].slide + "' alt='" + slides[i].name + "'>");
var desc = $jA("<div>", {"class": "fh5co-desc"});
var text = slides[i].comment == undefined ? "" : slides[i].comment;
var keywordsDiv = $jA("<div>", {"class": "fh5co-keywords"});
var kwds = "";
if(slides[i].keywords != undefined) kwds = " keywords: " + slides[i].keywords;
kwds = kwds.replaceAll(",",", ");
desc.append(document.createTextNode(text));
keywordsDiv.append(document.createTextNode(kwds));
a.append(slide);
animateBox.append(a);
item.append(animateBox);
item.append(desc);
item.append(keywordsDiv);
dropThumbs.append(item);

In the style.css file delete the line with
white-space: pre-line;
and add a new section
#fh5co-board .item .fh5co-keywords {
  padding: 20px;
  float: left;
  line-height: 24px;
}
You can add it anywhere, but just after the line, at 7699,
 #fh5co-board .item .fh5co-desc{
...
}
might be best.

If you want the keywords to be in a different colour then, in the skin's 'styles' folder open the style you are using, say 'dark.css' and at the end of the file add a newline and then
#fh5co-board .item .fh5co-keywords {
  color: #ff0000;
}

Change the colour attribute to whatever you want. The example shows red text.

If this is too complicated, and if you want to use this method, attach your Hydrogen skin here and I will update it for you.

Edited by: RobM on 24-Feb-2021 22:27
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums