[Resolved] CSS in Individual Layouts

[Author]

Posts

[aaronM-9]

I was hoping to be able to add custom CSS code to specific layouts rather than simply using the global option. The reason is because I am using another plugin called wpDataTables. Unfortunately the only way to remove the "delete" button on their tables is to add some CSS code onto the page. However, sometimes I may want to have the delete button and sometimes I might not want to, so I cannot simply put this CSS code onto all pages.

In the meantime, can you suggest an alternative way of adding CSS to an individual layout? Can this be done using a particular hook? Thanks for the help.

- Aaron

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Aaron

We have an open feature request for this, so hopefully it will get added when we turn our resources to working through the backlog of requests.

In the meantime you can use a Visual Editor cell to add HTML to a Layout. Just add style tags directly in the body of the cell (either a new one specifically for this purpose, or as part of an existing cell) with the style rules you require.

[aaronM-9]

Hi Nigel,

Sorry for not responding sooner. Your suggestion worked, but with one caveat. It changes the styling for the entire page and not just one visual editor cell. So if there is a table in one visual editor cell and a table in the other, adding the styling to either of the two cells affects the styling of both tables.

Anyways, this isn't preferred but is something I can live with for now. If there is any way you can think of to do this let me know - otherwise I'll close the ticket and design around it. Cheers.

- Aaron

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

When you insert a cell—any cell—in a Layout you have the option of adding id's or classes to the container of that particular cell, so if you have two cells that have tables in them you can add one class to one and a different class to the other, and then you can target either cell with a more specific CSS rule.

[aaronM-9]

CSS isn't my strong suit. If the button's class is "DTTT_button_delete" (automatically generated by the other plugin) and I give the layout cell a class called "be_assignments", what do I add to the following CSS (is it possible to reference two classes on the same line)? I tried ".DTTT_button_delete.be_assignments" but that didn't work. Also tried using an ID by putting in "#be_assignments.DTTT_button_delete" and that didn't work either.

	.DTTT_button_delete {
		display: none !important;
	}

How do I limit this to content in just one DIV with either an ID or class called "be_assignments"?

Thanks for the help - I know you're going a bit outside the scope of your product support! It's much appreciated.

- Aaron

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Aaron

If you have something like this:

<div class="be-assignments">
  <p>Some stuff</p>
  <button class="DTTT_button_delete">Click me</button>
</div>

then you would target the button with CSS like so:

.be-assignments .DTTT_button_delete {
  display: none;
}

[aaronM-9]

That did the trick. Awesome! I think I just had the spacing or order of the classes wrong in the CSS. Works beautifully now. Cheers.

- Aaron