Skip to main content

Questions tagged [css]

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.

Filter by
Sorted by
Tagged with
5 votes
4 answers
29k views

Changing colors of lightning-button

How can I change the colors of lightning-button? I tried doing this in my css: .my-button { background-color: #14a6bc; color: #ffffff; } and applying that class to my <lightning-button&...
BlondeSwan's user avatar
  • 1,098
53 votes
8 answers
38k views

Target inner elements of standard Lightning Web Components with CSS

Say we have a LWC with the following template in a component named example: <template> <lightning-textarea class="test"></lightning-textarea> </template> And some css to ...
Benjamin Vogler's user avatar
36 votes
6 answers
4k views

Why do we still need to hack the Sidebar? Usecases - Workarounds - Alternatives

Since it seems to me, that a lot of people still need sidebar workarounds, I would be interested to learn about the use-cases, experienced challenges and (most important) possible strategies to avoid ...
Uwe Heim's user avatar
  • 28.4k
46 votes
2 answers
11k views

Changing the color of a custom button

Is there a way of changing a custom button color? Not a button on the visualforce page but rather the ones created under custom and links on an object. Thanks. -K
Kenn K's user avatar
  • 885
2 votes
3 answers
26k views

Overwrite standard lightning web component css by class name

I'm trying to set max-height property to slds-scrollable_y class inside lighting-datatable web component via css with: .slds-crollable_y{ max-height: 10rem !important; } But it's not working. Is ...
molinet's user avatar
  • 925
5 votes
2 answers
3k views

Not able to import CSS in LWC No MODULE named markup:

I have created a Lightning web component named commonStyleSheets and deleted html, JS file and kept only CSS file as shown in the below image. Now if I import it by using 'c/commonStyleSheets' in ...
gs650x's user avatar
  • 2,680
2 votes
1 answer
2k views

Show/Hide CSS Ignored When Inside an SLDS Grid Column

I'm just trying to get a simple show/hide experiment running using the code below. It runs fine when the code is outside the SLDS grid. However when I place the div inside a grid column, the console ...
Jay's user avatar
  • 676
18 votes
4 answers
37k views

Styling lightning:combobox drop down to not hide inside modal and extend modal length?

I am using the lightning:combobox standard component, and created a little UI that I then put in a modal window. It looks fine except for this issue.... I the drop down hides inside the modal ...
Tyler Dahle's user avatar
  • 2,719
8 votes
1 answer
4k views

Dynamically Adding/Removing CSS in Nested Div

I'm trying to hide a div dynamically. This works for me. But when I try to do a nested div. It suddenly doesnt work anymore. Am I missing something? Component(Working) <ui:button label="Toggle" ...
cloudforce's user avatar
8 votes
2 answers
20k views

how do we access the image files from static resource in css?

I am trying to display images from a static resource in a css property. .PDF { width:50px; height:50px; background-image: url("{!URLFOR($Resource.FileTypes, 'png/pdf.png')}"; } What i ...
Prady's user avatar
  • 12.3k
3 votes
2 answers
7k views

how to overwrite app.css styles with lightning components [duplicate]

I have read different posts that with winter 17 ,custom lightning components will have precedence for styling over app.css styling , however i am still facing issues where my modal hides behind the ...
user2945545's user avatar
6 votes
4 answers
25k views

Upload custom font on Marketing Cloud [duplicate]

I'm facing some issues with the upload of a custom font on Marketing Cloud. My clients purchased this new custom font and they would use it in cloud pages and email. I have only the css file and the ...
Alessia Annella's user avatar
4 votes
3 answers
1k views

Issue with VF Pdf

I was able to display tabular report in vf pdf format.this report contains large no of pages. using for displaying table body, but table header is coming in first page. i need to display header in ...
Venkatesh's user avatar
  • 682
3 votes
1 answer
1k views

How to set the page layout using css conditionally - Napili Template Salesforce Community

I want few pages to be accessed by guest profile to follow different styles and some for authenticated users. Header image to be varied for two different users. How can I achieve this? If I change the ...
ləːnə's user avatar
  • 289
2 votes
3 answers
3k views

FontAwesome CSS - not able to use in lightning component

I am trying to use some FontAwesome icons like this: .THIS ul.ks-cboxtags li label::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; ...
mvk1991's user avatar
  • 555
1 vote
1 answer
902 views

Can I change styling on Salesforce standard LWCs?

There I times when I want to change the styling of standard Lightning Web Components, such as lightning-button (to change the button colour), lightning-accordion-section (to change the section title ...
Phil W's user avatar
  • 36.8k
0 votes
1 answer
12k views

Override background image/color in the community using the Napili template

I've been testing the customization capabilities of communities with napili template. One of the very basic things I cannot easily do is, branding. I can update the logo, but not the background. It ...
Sakthivel Thandavarayan's user avatar
12 votes
2 answers
49k views

Set CSS class dynamically in Lightning web component

How would I translate that from Aura to LWC? <aura:iteration items="{!v.contacts}" var="contact"> <div class="{!contact.isActive ? 'slds-tabs--path dimmed' : 'slds-tabs--path'}">...<...
Robert Sösemann's user avatar
9 votes
2 answers
2k views

Site.com CSS not recognizing media queries

Site.com strips out the media query definition from a CSS file when you try to import it, and if you try to manually edit the CSS file by adding the media query, you cannot save the file. Instead you ...
Sean Russell's user avatar
8 votes
5 answers
10k views

Custom Fonts Not Working?

I am trying to apply a custom font to my Napili Template using Community Builder. I followed the steps laid out in Use Custom Fonts in Your Community. Here's my css definition: @font-face { font-...
Adrian Larson's user avatar
  • 150k
7 votes
2 answers
14k views

How can i use var() in css in LWC?

This is what I'am trying to do: HTML: <li class="navBar2" style="--lwc-beforeColor: #0ec2df"></li> .css .navBar2{ height:29px; background-color: var(--lwc-beforeColor); } But ...
Akshay_SFDC's user avatar
6 votes
1 answer
1k views

How to let the end users override CSS of managed package's LWC?

I am rewriting a complex Visualforce component into LWC. It's an activity timeline / Gantt chart that's part of a managed package. The old version let the end users override the bar colo(u)rs with a ...
eyescream's user avatar
  • 24.1k
5 votes
4 answers
17k views

Overriding Salesforce CSS with custom CSS

I wish to change the CSS styling of standard salesforce pages with my own styling. I have created a custom sidebar component named CustomCSS and attached it to the left sidebar. I have then enabled ...
codeinprogress's user avatar
4 votes
0 answers
2k views

[LWC][CSS]slds-backdrop is not covering full device height behind slds-modal in Salesforce mobile app

We are using slds-modal in our LWC, which is working fine in desktops and large devices. Means behind the modal we are showing the slds-backdrop screen and it covers everything behind the modal box to ...
Rohit Bhamdare's user avatar
4 votes
2 answers
21k views

Using media queries in Lightning component

I am using style attribute to use media queries in lightning components something like this: <style> .legendBox { background: none!important; min-height: 50px; padding: 5px 0px; ...
user20757's user avatar
  • 171
3 votes
1 answer
8k views

How to control the height of datatable dynamically in LWC?

I wish to control the height of a datatable based on the number of records present. If there are less than 10 rows, the height of the datatable should be just enough to show all rows. There should ...
Koustubh's user avatar
  • 1,173
3 votes
1 answer
3k views

Freeze vertical columns in horizonal scrolling visual force page (like excel freeze pane)

let's say have 20 columns total. I want to fix till 5 columns. (means only important ID, etc will be fixed while doing horizonal scrolling) How can I achieve it in Visual Force Datatable ?
kitokid's user avatar
  • 1,738
3 votes
1 answer
3k views

No MODULE named markup when importing CSS from a LWC

This is related to my other thread here. So once I removed the HTML and JS files leaving just the CSS and XML files my consumerComponent is consuming the CSS from myComponent alright. I can see that ...
Arthlete's user avatar
  • 4,917
2 votes
2 answers
4k views

Add CSS classes and repeating header to Visualforce PDF

I have a Visualforce page that renders as a PDF. It displays a table of data and an image on the header on each page: <apex:page renderAs="pdf"> <head> <style type="text/css" media=...
jonathanwiesel's user avatar
2 votes
2 answers
6k views

Can I change the color of a VF table cell dynamically?

I have a picklist called Status, displayed in a Visualforce table with fields like .. Closed Open Critical <div id="col1"> <apex:column > <apex:facet name="header">...
MnZ's user avatar
  • 3,170
2 votes
1 answer
5k views

How to include and use an external CDN in Lightning Web Components? [duplicate]

I'm trying to use an external javascript library in my lightning web component, this include two external CDNs one css and one js. How can I load them in my component?
Matteo Mattiussi's user avatar
2 votes
2 answers
7k views

Responsive Lightning Components

In creating reusable components for communities I have come up against a bit of a challenge with layout. Let's say I am designing a simple table. When a user places this table in a main layout column, ...
dsharrison's user avatar
  • 3,992
1 vote
2 answers
1k views

Use standard stylesheet with custom for Chatter VF page

I am designing a custom styled vf page that will show the user's chatter feed. I am trying to use the chatter:feedWithFollowers component but all the styling goes away when I use the ...
DevelopHawaii's user avatar
1 vote
2 answers
5k views

CSS required to make lightning:checkboxGroup items display horizontally

What CSS would be required to make the items in a lightning:checkboxGroup display horizontally rather than the default of vertical?
Robs's user avatar
  • 9,386
1 vote
1 answer
13k views

MIME type ('text/html') is not a supported stylesheet MIME type, in open source LWC

Below is my file structure in open source LWC in my index.html I am trying to reference bootstrap as follows <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" ...
gs650x's user avatar
  • 2,680
1 vote
1 answer
1k views

unable to capture div's style.display value lwc

I'm trying to capture the display css property value for an element. However, unless I set style.display value in js it doesn't work. HTML: <div class ="dropdown slds-size_1-of-4" > ...
sfdcnoob's user avatar
  • 632
17 votes
2 answers
6k views

CSS animation in LWC not working

I'm unable to get a simple css fade-in-out text animation to work in LWC. The text displays on the page okay, but it does not fade in/out like expected. It seems as though the keyframes are getting ...
Scott McClung's user avatar
15 votes
3 answers
26k views

Refer static resource in css of lightning component

I have a static component where the content is loaded dynamically as html. The lightning component provides some styles to present that content. I would like to provide icons, images that are defined ...
Bhupendra's user avatar
  • 305
13 votes
3 answers
4k views

Is there a way to use custom CSS with the Customer Portal in a reliable and maintainable way?

On Salesforce.com's Customer Portal marketing page there is a video with an example Customer Portal from Dell. The portal in the video is obviously using a lot of custom CSS which I know can be ...
Peter Knolle's user avatar
  • 29.1k
10 votes
2 answers
9k views

Setting a max height for datatable in LWC?

I know when you specify a div with a height around your datatable you get a nice scrollable table: <div style="height: 300px;"> <lightning-datatable various-params></...
Tyler Dahle's user avatar
  • 2,719
9 votes
5 answers
8k views

How to ignore Salesforce CSS on VF Page (with header)

I've been working on a Visualforce page using remoting, and am trying out building a custom UI to go along with it (not using any VF tags for the UI). While I'm aware that you can leverage ...
Michael Welburn's user avatar
8 votes
3 answers
10k views

Can we specify a minimum height for a lightning:datatable/lightning-datatable?

Problem lightning:datatable (rendered as a lightning-datatable) places itself in a wrapper that is only exactly as big as it needs to be. If you click on a header-level action in a table with no rows,...
sfdcfox's user avatar
  • 495k
8 votes
3 answers
16k views

How to make buttons in a lightning-datatable smaller in LWC?

I have a lightning-datatable in my Lightning Web Component (LWC) that has several buttons in each row (first button only shown here): These standard-sized buttons consume quite a lot of vertical ...
Keith C's user avatar
  • 136k
8 votes
4 answers
5k views

Mini Page Layout CSS in Visualforce Page

I've a VF Page which uses a Apex StandardSetController() to display the list of a Standard Object Records(Case in my Page). The mini page layout which is a standard functionality from Salesforce has ...
Vignesh Damodharan's user avatar
7 votes
3 answers
8k views

How to mimic the look of a standard detail page in a VisualForce page

I have a standard Account detailpage, where I want to add a small VisualForce part in a column on that page. So I created a VF page that looks like this <apex:page standardController="Account" ...
Willem Mulder's user avatar
7 votes
4 answers
13k views

Add spinner text along with spinner in lightning component

I am trying to add spinner text like 'Please wait while loading' along with dotted spinner. But the text is not displaying . It is displaying just a spinner. Can you identify what i am missing ? <...
Salesforce developer's user avatar
7 votes
3 answers
7k views

How to change the header style for salesforce standard pages

Is there any way where I can change the header style of standard salesforce pages. I have a hint where I can upload CSS into documents and that will change the header style. Any body know about this ...
Shebin Mathew's user avatar
7 votes
2 answers
7k views

Word Break - Lightning

I want the string to be transfered to the next line in lightning. In salesforce classic I would just apply to the element style="word-break: break-all". In lightning there's a special tag for that. ...
EvAzi's user avatar
  • 1,051
6 votes
3 answers
11k views

How to control LWC styling dynamically?

I need different widths for my LWC for lightning and classic(lightning out) as my LWC is shooting out of card width in lightning. I am able to know whether a user is in lightning or classic using ...
Koustubh's user avatar
  • 1,173
6 votes
1 answer
2k views

Setting Font Face for Visualforce Email PDF attachments "messaging:attachment"

I'm having lots of trouble setting font faces for VF Email PDF attachments (see my code below). I've tried the conventional "font" tag with no luck, even CSS doesn't work! What am I doing wrong? <...
Eric Luu's user avatar
  • 890