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.
2
  • 1
    Have you tried right-click>Inspect to see what its classes are? Jul 9 '20 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. Jul 9 '20 at 13:17
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%;
}
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. Jul 9 '20 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 Jul 9 '20 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. Jul 9 '20 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.