Headings for links on homepage

KeskusteluTinyCat

Liity LibraryThingin jäseneksi, niin voit kirjoittaa viestin.

Headings for links on homepage

1nonob
joulukuu 14, 2020, 4:33 pm

I am creating a series of links to topics, tags etc in my catalog. I figured out that I can add wording without a link so create a heading of sorts but I would love to have each heading display on a separate line. For example one line with species links, one line with technique links, etc. The catalog I refer to is not my personal one but one I am creating for a club. https://www.librarycat.org/lib/olympiabonsaiclub
Is there a way I can do that without coding?
As always thank you. I can't quite believe how fast I receive responses on this forum. You guys are great!

2kristilabrie
joulukuu 15, 2020, 8:36 am

Alas, if you're using the built-in "Links" format for your homepage, it's just the format you see. You'll need to go into the "Free HTML" option and add line breaks or other HTML to get what you want.

Googling for basic HTML tags you can use to format your text isn't terribly complicated, if you want to take a stab at it! I hope this helps.

3casvelyn
Muokkaaja: joulukuu 15, 2020, 10:05 am

If this format is what you have in mind: https://www.librarycat.org/lib/casvelyn, I can share the code I used to make the links and headers. It's just some fairly basic table HTML, so you can write the code in a .txt file (what Notepad uses, if you're on a PC) and then copy-paste the completed code into TinyCat. Once you have the table code, all you have to do is plug in the URL and display text for each link, and then add or delete rows depending on how many links you want.

4nonob
joulukuu 15, 2020, 7:01 pm

>3 casvelyn: That would be fabulous casvelyn. How can I get the code from you?

And wow what a lifetime reading list you have! I started my librarything account in 2006 when I was working as a children's librarian. When I left that job I lost the habit. I sure wish I'd kept up with it because it would be really fun to see a list of what I've read in the past 12 years (and before for that matter.)

5nonob
joulukuu 15, 2020, 7:01 pm

>2 kristilabrie: thanks! as always

6casvelyn
joulukuu 16, 2020, 6:16 pm

>4 nonob: I've put the code file on Google Drive here: https://drive.google.com/file/d/1wIAO3jz5HZkFps81idwAbZRSEBTt-aas/view. You should be able to download it; just make sure it downloads as a Text Document (.txt) because sometimes when you write code in a Word Document it introduces formatting that breaks the code.

I'm going to put some documentation in another comment here on this thread. I'm not an HTML expert by any stretch; I took an intro class about 10 years ago and I've been limping along ever since with a lot of trial and error (mostly error). So what I have here probably isn't the best or most efficient code, but it works, which is the important part.

I used to keep track of my reading in a paper notebook when I was a kid, so when I joined LibraryThing, it was pretty easy to add everything. I'm fairly certain I've missed stuff over the years, but the list is probably at least 95% complete. I'm a librarian in real life, so cataloging books is just second nature to me.

7casvelyn
joulukuu 16, 2020, 6:26 pm

Okay, so now for some documentation. I don't know how much background you have with HTML, so I'm going to start really basic and I'm sorry if I'm preaching to the choir. :)

So this is essentially the code to make a table. This particular bit of code is set up to be read as columns in the final product, which you can see here: https://www.librarycat.org/lib/casvelyn. However, HTML always looks at table code as a series of rows, not columns. So I suggest making a list of what you want the end product to look like in just plain text, to keep you on track as you're inserting the links. I do my text version in Excel because a spreadsheet is really just a table. It looks like this:



On the far left, I've numbered the rows. I've also numbered the rows in the code file, so that way it's easier to figure out where I am when I'm editing. This file has 49 rows right now, but you can add or remove them to fit what you need. I did end up removing the "scrolling parade of book covers" on my TinyCat, just because it made the page look too busy for my tastes, but you can totally keep both if you want.

8casvelyn
Muokkaaja: joulukuu 16, 2020, 6:42 pm

Okay, so I can't make the screenshot big enough to where you can read the text without it getting blurry. So I added some annotated code to the Google Drive here: https://drive.google.com/file/d/1caWsrUc7rl7Z7KVul8oANPvR_ZGZMhLY/view?usp=shari.... Essentially I explain what the different parts of the code are and what they do.

9nonob
joulukuu 16, 2020, 6:36 pm

>7 casvelyn: You are awesome. Thank you so much. I've only done a little html so this will be really helpful. I so appreciate it. When I get this built I will send you a link so you can bask in your helpfulness. :)

10casvelyn
Muokkaaja: joulukuu 16, 2020, 6:52 pm

So once you've got your code all formatted, you can put it in to TinyCat. When you're logged into your TC account, from the home page, go to:

- Settings
- Home Page
- The section labeled "Content to show underneath the search box"
- Select the "Free HTML" option
- Copy-paste the table code into the text box directly underneath the Free HTML option

Make sure to copy the entire document of code, from the table style="width:100%" at the very top to the /table at the very bottom.

Click the Save Changes button and return to the public-facing TC homepage to experience either the thrill of victory or the agony of defeat. :)

11casvelyn
Muokkaaja: joulukuu 16, 2020, 7:06 pm

>8 casvelyn: A couple additional notes:

If you look at the spreadsheet in >7 casvelyn:, there's some rows where a cell is labeled BLANK. So for example in Row 9, I don't want anything in column 1, but I do want things in the other columns. I just use the Comment tag as a placeholder. It's been so long since I wrote the original code that I can't remember for sure, but I want to say if I left that first cell completely blank, it would shift everything over to the left to fill the gap and things would end up in the wrong column on the public-facing side. Comments are your friend!

The row where every cell is SPACE is because I wanted some white space between sections in the final product. There's probably a better way to code that, but what I did was make a row where every cell contained some hyphens like so: ----- and then I used some extra code just on that row to make them the exact same shade of white as the TinyCat background, so it looks like a blank row.

12casvelyn
joulukuu 16, 2020, 7:02 pm

>8 casvelyn: You're welcome! Let me know if something doesn't work and I'll see what I can do!

13casvelyn
Muokkaaja: joulukuu 16, 2020, 7:15 pm

Oh and if you want to test the code without putting it in TinyCat, I usually use the TryIt Editor here: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic. Just copy-paste the code in the box on the left, click the Run button, and your code renders on the right. It won't be a perfect rendition as compared to TinyCat, because TinyCat automatically centers the text and uses a sans-serif font. But it will let you know if the code actually works.

And I usually do my code editing in Notepad++. It's a free program and I find it's easier to read and follow the code there than in regular Notepad. But you can totally just use the regular Notepad that comes with your computer--that's what I learned to code using and for something more simple like this it totally works.

14nonob
joulukuu 17, 2020, 8:31 pm

>13 casvelyn: It worked! Here's my catalog https://www.librarycat.org/lib/OlympiaBonsaiClub

I haven't tested every link but the ones I have worked great. Thanks again.
(and I'm a retired librarian so I get your library tendency. :) I spent my childhood with my comic library, checking them in and out to the neighborhood kids.

15casvelyn
joulukuu 18, 2020, 3:56 pm

>14 nonob: You're welcome! The links look lovely!