1

In Lightning, in the Opportunity related list of an Account, this is what I see:

enter image description here

I am creating my own component and I want to style my reference to an Opportunity (the blue text) just like it is done in the standard Account layout.

In particular, I want to know what I should do to:

  1. Get the font size right. It is not body_small or heading_small, but something in between.
  2. Get the permanent subtle underline. I cannot find any styling element that can do that.
Improve this question
2
  • 1
    Have you tried right-click>Inspect to see what its classes are?
    – AvailableName
    Jul 9, 2020 at 13:13
  • Yes I have. There is some textUnderline and h3 involved, but so far I have not been able to accomplish the desired result.
    – Sander de Jong
    Jul 9, 2020 at 13:17

1 Answer 1

Reset to default
5

The dots are created by

a[force-hoverableLink_hoverableLink] {
    border-bottom: 1px dotted;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
}

And the size is defined in

.slds-form-element__static {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    display: inline-block;
    font-size: var(--lwc-inputStaticFontSize,0.875rem);
    font-weight: var(--lwc-inputStaticFontWeight,400);
    color: var(--lwc-inputStaticColor,rgb(8, 7, 7));
    width: 100%;
}
Improve this answer
3
  • Thanks. The size is right now, after I applied <div class="slds-form-element__static"> But what do I need to do with the hoverable link part? What do I put where? I know a bit about CSS, but I am no expert.
    – Sander de Jong
    Jul 9, 2020 at 13:51
  • I cannot put the a[...] in the css file, as that gives me the error: Invalid usage of attribute selector "force-hoverableLink_hoverableLink". "force-hoverableLink_hoverableLink" is a template directive and therefore not supported in css rules
    – Sander de Jong
    Jul 9, 2020 at 14:04
  • In my HTML I used the <lightning-formatted-url> tag. I replaced it by an <a> tag and in my CSS I put a:link { border-bottom: 1px dotted; text-decoration: none; display: inline-block; vertical-align: middle; } And now it's perfect.
    – Sander de Jong
    Jul 9, 2020 at 14:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .