Article Blocks | World Anvil Codex

Articleblocks

Restructuring the Codex

We are currently moving articles around and changing the general structure of the Codex. Please come back later if you get lost!
An article block is a visual container that links to an article. It uses the article's cover images, excerpt, article templates, and creation date to create this widget.   If there is no image visible after adding a cover image, it is most likely disabled in the world configuration. To further customize the layout of the article blocks, use CSS.   The BBCode can be copied from the metadata section of the article editor or from the presentation view of the article at the bottom.   It is not possible to get an article block directly with the mention system. However, with the regular article mention, it is not difficult to create the article block BBCode:
Screencapture of text on how to transform an article mention into an article block BBCode.

Example

Articleblocks
Generic article | Oct 29, 2023

In this article you learn what a article block is and where you can get the BBCode from.


Comments

Please Login in order to comment!
Apr 28, 2020 06:37

Hello, none of my article blocks have the cover art. They just look look like plain quote boxes with the name/link inside of it. Also, when I hover my mouse over the article boxes or my text links, no windows pop up. I have to press the link. I would like my players to be able to read the linked article without leaving the page. Any help would be appreciated. Thanks, Ryan

Apr 28, 2020 21:18 by Ademal

Cover Art

Go to the article editor, then to its display tab. You can set the article's cover from there, which should fix that issue for you! If there's no cover set for that article, it wont use one.  

Tooltipster

Go to your world config. Then to the display tab. Further down under Global World Display Options you should find DISPLAY ARTICLE TOOLTIPS, make sure that's checked.   Test that to see what pops up on the blocks.   You can customize what appears in that box by filling out each article's "mouseover snippet box on the design tab.

Check out my summercamp by going here and checking out any of my gold-star articles!

Apr 29, 2020 03:03

Thank you for your quick reply, you got me half way there. I checked the DISPLAY BLOCK HEADERS and that solved my first problem. I should have been clearer, I am trying to get the article preview to pop up when I mouse over a link. I did check the DISPLAY ARTICLE TOOLTIPS and tried using a test phrase in the MOUSEOVER SNIPPETS box, a block link, a text link, nothing has worked. Is there some other box I haven't checked? I'm basically trying to do the mention links that Janet showed in the Youtube tutorial for forest goblins where the article pops up when she hovers over it.

Apr 29, 2020 04:29 by Ademal

Oh I see the issue. Had to go check your Guild Level.   So, the full fancy preview thing is, I believe, a Master+ feature. I meant to report to Dimitris before that it's not entirely clear how to enable it or what feature level it is. Sorry for the confusion!   What you can do as a Journeyman is populate the Excerpt text box below the Mouseover one. It only supports text, not a full bbcode display, but is handy for players who want to hover a link and get some quick info without opening up the article.

Check out my summercamp by going here and checking out any of my gold-star articles!

Apr 30, 2020 06:37

Thanks for sorting that out. And yes, I agree, some transparency would have saved some headache.

Jul 6, 2020 07:31

I think to help new users, a screenshot of where to find the link for the article block to accompany the guiding sentence ("on the right-hand side under the Links collapse") would help a lot.

Dec 17, 2020 21:20 by Mickey

I'm still learning so I apologize if it's obvious, but is there a way to edit the appearance of the articleblocks? I've figured out how to change the background colour using css but I'd like to remove the *article type/date edited* information. Is there a page with the css info that is somehow eluding me? Any help would be splendid!

Dec 18, 2020 01:30 by Ademal

If you target .user-css .article-panel .schedule and set it to display: none; then that'll do it.   It's impossible for us to cover every selector on the site, but if you want help finding the one you're looking for, the discord has a dedicated CSS channel with very helpful folks!  

Check out my summercamp by going here and checking out any of my gold-star articles!

Jan 27, 2021 12:57

I have a list of block articles that I want to display as a grid in one of my articles, the way they did in the "sample (as grid)" part of the article. I've tried using the code mentioned in the stylings part (in the article CSS part of the design tab of my article), but for some reason, it won't work. Can anyone help me with that? Is there some part of the code I need to edit or something else I'm doing wrong?

Jan 31, 2021 01:16 by Ademal

If you link an article you're attempting it in, I'll tell you the fix :)

Check out my summercamp by going here and checking out any of my gold-star articles!

Feb 1, 2021 15:38 Private

Here is the textual link: Harry Richards. Hopefully that's good enough. That world is currenly set to private, so let me know if that prevents you from viewing the article.

Feb 1, 2021 19:01 by Ademal

It will prevent it, yes, I have no special access to anyone's worlds so that link doesn't go anywhere for me.

Check out my summercamp by going here and checking out any of my gold-star articles!

Feb 18, 2021 21:57 Private

I still cannot find the problem. I've set both the world and the article to public, so could you please help me? I've tried everything I could think of. Harry Richards.

Feb 20, 2021 01:44 by Ademal

Hmm. Have you set the tag on the articles as well? For example, [tagged:#workflow|block|none] won't work if I don't have any articles tagged workflow

Check out my summercamp by going here and checking out any of my gold-star articles!

Feb 18, 2021 15:18

Hi I am trying to do a grid of three articles. But they get displayed on top of each other. I tried to add this in the Styling tab: .user-css.tagged-articles-list { display: grid; grid-gap: 20px; grid-auto-rows: minmax(0px, auto grid-template-columns: repeat(3, 1fr } But it doesn't affect anything on my world front page. What am I doing wrong? Am I missing a step? I can't link to my world as it is private.

Feb 18, 2021 16:14

Ah - I finally fixed it. I was missing a space in the first line of the styling CSS. If you could make these code examples copy-paste-able that would help immense. Have a great day!

Apr 29, 2021 05:12 by Virtom Shinjitsusayer

Wherever I use the LEFTBRACKET articleblock COLON XXXXX RIGHTBRACKET, it looks like a huge block, with different background color and a text saying Generic Article | Date centered under the name. It looks very out of place as I'm looking to have it on a list. All I'm trying to do is to have it look exactly like in the example here where it looks just like a regular url.

Apr 29, 2021 05:43 by Virtom Shinjitsusayer

So leaving this here in case someone else stumbles all over a pebble, you have to use the Textual Link instead of the Block Link for the URL looking one. The Guide to Articles Previews and Tooltips has an article link url there that through me off, i thought it wasnt the article block per se.   In the quest to make it a URL though, found the video on youtube for World Anvil CSS Tutorials Ep 3: Containers to be quite interesting as you could easily change the CSS on the articleblock link.

Jul 6, 2022 11:31

hi, this might be a stupid question but, if i want the tagged article block to be row where do i put the css ?

Mar 29, 2023 05:08

For anyone who wants to use the title with the horizontal grid styling, you can! You just need to make that header line span the number of columns you've created. In this document's example, that's three columns. So, you would do:   .user-css .tagged-articles-list-header { grid-column: span 3; }