How to set custom sizing and padding to columns in Experience cloud with Build Your Own LWR theme

Question

I am busy with a custom site that doesn't use any of the base Salesforce styling. I have written my own LWC's but I am having issues spacing them on the site. The only option I have is to set global padding on the sections, as well as width of the entire site. I am running into an issue where I have three component cards that need to be the same width with the remaining space being the padding on the sides. With the Experience Cloud Build Your Own LWR - I cannot size the two outer components. If I place padding left on a component for the left side, it would apply the style throughout the other two. I need to be able to do a container, with three "slots" and then have padding on the left and right of the container - not the components themselves. Here is a photo to help:

As you can see, they all have the same spacing which includes the left and right of the container (Section they are placed in). I need them to be closer to the middle one, but with large padding on the left and right. I only have the option to apply a global padding to the entire site, which doesn't help as I have content elsewhere that does not need the larger padding, but instead less.

TL;DR - how does one apply css styling to section in experience cloud in the build your own template in LWR? There is no way to edit css on the theme, as it has been removed.

UPDATE: I have managed to implement a container component to get the styling gaps right. However, The nested LWC's do not act as I need them to. When clicking on the builder page, the properties do not show up (eg. Choose photo, header, details for the card, link for Linkedin and website) However, the styling for the card is working - when hovering the css takes effect.

What would I need to do in order to use the xml file for the dynamic properties?

Answer 1

Is this the current column layout? If so and if you don't want to change the global css, you could create a new LWC and put the current ones as its children, then remove those components from the experience page and set a column layout with one column having the new LWC as only element.
Once you have the new container LWC you could apply whatever style you want.

I.E. Container template:

<div class="slds-grid slds-wrap slds-var-p-horizontal_small slds-border_top slds-border_bottom slds-border_right slds-border_left">
    <div class="slds-size_1-of-3 slds-var-p-left_xx-large slds-var-p-vertical_x-small">
        <!-- Replace the following div with your component -->
        <div class="slds-text-align_center slds-border_top slds-border_bottom slds-border_right slds-border_left ">Bolster Customer Service</div>
    </div>
    <div class="slds-size_1-of-3 slds-var-p-horizontal_xx-small slds-var-p-vertical_x-small">
        <!-- Replace the following div with your component -->
        <div class="slds-text-align_center slds-border_top slds-border_bottom slds-border_right slds-border_left">Kill Repetition</div>
    </div>
    <div class="slds-size_1-of-3 slds-var-p-right_xx-large slds-var-p-vertical_x-small">
        <!-- Replace the following div with your component -->
        <div class="slds-text-align_center slds-border_top slds-border_bottom slds-border_right slds-border_left">Reshape Operations</div>
    </div>
</div>

I added some borders just to provide a visual aid about the differences between padding, you should remove them.

The SLDS Grid page contains a lot of useful example.

Answer 2

Without looking at the existing html and css it would be not possible to suggest anything here.

But to answer your question. You can apply css styling in the build your own template in LWR.

Go to advanced in your communities builder. Click edit head markup and you can call your static resource css or paste your css or call external site css from here.

For eg:

I implemented a bootstrap css and a custom css like shown below.

<title>*********</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- bootstrap CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <!-- font awesome -->
  <script src="https://kit.fontawesome.com/31149d48b0.js" crossorigin="anonymous"></script>

<style>
    body {
        background-color: #2c2c2c;
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        color: white;
        animation: fadeInAnimation ease 4s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    @keyframes fadeInAnimation {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
</style>