Display format for links

Questions & Help
1

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
2

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
3

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

4

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
5

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.

6

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
7

@danzu
I’m trying to format an external link with specific content, the same way I did for my tags
For example, I changed my tags #bug to have a red background with ;

 a.tag[data-ref^="bug"]{ 
   color: #fff !important;
   background-color: red;
  	border: 1px solid #fff !important;
}.content

My question is : what is the proper syntax to style an .external-link that contains a specific string in its url ?

I tried with no avail:

.external-link [data-ref*="view.php?id="]{
 background-color: red;
}.content

Thank you for your help!

8

Remove the space from between .external-link and [

9

Thank you for your help, there was actually no space in my code, it was a typo in my post. See attached the portion of my custom.css, it it still not styling
Screen Shot 2023-11-06 at 8.37.51 AM

10

Tags have data-ref, but web links have href. Therefore, the rule’s head should be:

.external-link[href*="view.php"]{
11

That did it, thanks a lot!