0

Im looking for a way to modtify just ONE of the costume text-layout cells, namely the 'header' one. I'm currently using the one that has two colums along with a header and a footer.

I've messed around with the inspect tool in IE, and can see that each of the four cells are defined by the same #class(The class is called ms-rte-layoutszone-inner). This means means I can't just a simple css snippet changing the background of said cell.

So my question is, is there a way to add a background color to only the first cell without affecting the other ones?

Any help is greatly appriciated!

<table id="XY">
<tbody>
 <tr>
  <td>
   <div class="ms-rte-layoutszone-outer">
    <div class="ms-rte-layoutszone-inner">  // Background only on this one
     <p>Content here</p>
    </div>
   </div>
  </td>
 <tr>
  <td>
   <div class="ms-rte-layoutszone-outer">
    <div class="ms-rte-layoutszone-inner">
     <p>Content here</p>
    </div>
   </div>
  </td>
 <tr>
  <td>
   <div class="ms-rte-layoutszone-outer">
    <div class="ms-rte-layoutszone-inner">
     <p>Content here</p>
    </div>
   </div>
  </td>
 <tr>
  <td>
   <div class="ms-rte-layoutszone-outer">
    <div class="ms-rte-layoutszone-inner">
     <p>Content here</p>
    </div>
   </div>
  </td>
 </tr>
</tbody>
</table>
0

You can use css selector 'first-child'. For example:

table tr:first-child .ms-rte-layoutszone-inner {
    background: yellow;
}

By this way only first element with class ms-rte-layoutszone-inner will have yellow background.

  • If this will not help, attach please snippet with your html structure where all 4 headers displayed. Also you can write simple javascript code. If you have reference to jQuery on the page, code will be - $('.ms-rte-layoutszone-inner').first().css("background-color", "yellow"); – Raf May 16 '18 at 4:20
  • Won't this target the first element within all the instances of '.ms-rte-layoutszone-inner'? Ideally what I want is to only affect the first div that uses .ms-rte-layoutszone. Unfortunately I work on a restricted system so I can't print the exact code, but i wrote down something that has basically the same setup. – Kim A May 16 '18 at 10:14
  • @KimA i edited code in my answer. This code will work for your snippet <style> table tr:first-child .ms-rte-layoutszone-inner { background: red; } </style> – Raf May 16 '18 at 10:48
0

One option is to creating a custom page layout where you wrap the required sections in your class

  • Is there a way to do this without sharepoint designer? – Kim A May 16 '18 at 10:15
  • We usually makes new ones in code, as SPD is the very last option for us – Kasper Bo Larsen May 18 '18 at 16:07

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.