Display format for links

As I see it there are 4 types of link in LogSeq:

  1. Block link
  2. Page link
  3. Asset link
  4. Web link

Is there a way to make each type of link display differently within LogSeq?

1 Like

You can. Those links can be formatted differently using CSS. I recommend trying themes in the marketplace to see how each them is presenting them, then decide which one suits you. Otherwise, you can customize the presentation by creating your own CSS in custom.css file.

2 Likes

Thanks @danzu can you point me at some template css so I have something to work with?

Hey Tony, I hope this is not too late. Here is the a list of example CSS. Under each of those CSS rules you can apply CSS properties to modify the look and feel of the element.

  1. Block reference
.block-ref {
    border-bottom: 1px solid;
    border-bottom-color: var(--transparent);
    /* border-bottom-color: rgba(var(--chinook), 1); */
    border-radius: 0;
    display: inline;
    /* font-size: inherit; */
    padding: 0 4px;
}
  1. Page reference
.page-ref {
    color: var(--ls-link-ref-text-color);
}

  1. Asset link (pdf)
.asset-ref-wrap[data-ext=pdf] {
    display: inline-flex;
    align-items: center;
}
  1. Web Link
.external-link::before {
    content: "🌏";
    margin-right: 5px;
}
.external-link {
    border-bottom: 1px solid var(--external-link-color);
    color: var(--external-link-color);
}
1 Like

Hey @danzu thanks for that, I’ve used simple css on websites, but I’m pretty confused by this code much of which I’ve never seen before - can you recommend a reference site that will clarify what each line means, and where I have to put colour codes?

Also will my css play nicely with Themes?
I’m using the Cobra Theme.

Alternatively a theme that will do what I want for links?

Basically I need to know from a link’s appearance if it’s going to take me to another page in LogSeq, take me to an asset, or if it’s going to open a browser tab.

I recommend CSS Tutorial (w3schools.com) where you can progressively lookup those CSS properties. I use it every time because I am not a UX developer, and I can remember most of them :).

First, logseq ships with a default set of CSS properties. And logseq theme makers can customize to meet their need. Therefore, the sample customization above may appear differently on each theme.

To easily identify link type, I would recommend adding a unique icon for each link type, which will overtime facilitate the identification of similar links. Would that work for you?

Side note, I am using the Oxford blue theme at the moment.

1 Like