CSS style options (for table) nowhere to be found

Hi there,

I’m not particularly familiar with CSS, so I started to read about it on this page:
https://www.w3schools.com/css/css_table.asp
and to experiment in order to get the desired effect on my tables.

I added this


to the text content. This resulted in the desired effects on the table.

Couple of things I noticed immediately:

  • adding this to the text field for one table, resulted in a change of all the tables on that page
  • as you can see, after saving the page, the added style section is nowhere to be found, and can therefore not be accessed again…
  • UPDATE: now that I’m typing this (made the changes in the morning, but only had time for support now) I just noticed that the striped pattern of the table is gone, but the emphasis color stays… beats me… :thinking: :exploding_head:
  • UPDATE 2: nope the alternating pattern is back again in the page I published… (see below)

So what I did to try and cure this was check all the CSS “spots” in Pro that I know of, only to confirm that there is no mentioning of the added style either… nowhere.

Schermafbeelding 2020-04-16 om 17.09.53.

My question is… how do I get rid of the style changes I made (without deleting the page), and how can I style one table at a time, with the style configuration still available and not disappearing on me after saving.

Basicly I would like:

  • the columns in the three tables to align (no idea why they don’t do this now).
  • I’m considering the alternating striped background
  • the hover effect on the selected row
  • a colored header table cause I’m thinking of splitting up the tables (headers should not be in different alternating colors)

I published a copy of the page in order for you to see what the problem is:
https://www.schoonheidsspecialistemalle.be/testingprices1/

Could someone please help me out?

Hey @matthiaslenaerts,

Before answering your questions, please note that we do not provide custom code support and the main issue here is about the custom code you added.

The custom CSS code you added targets all tables so you need to remove that from that page. You said you added the custom code to a text content. You need to find that text content and remove the code in there.

image

------------------------------------------------------------

Regarding styling each table, you’d basically need to add a unique class to each table and target each class in your CSS. This requires that you both know HTML and CSS. I’ll give you a rough example to help you get started but please note that we’ll not provide continued support for any custom code. Here’s what I mean:

html

<table class="gray">
<!-- table contents -->
</table>

css

.gray tr {
/* styles for gray table goes here */
}

Put the CSS code in the Content CSS or Global CSS for site-wide application.

------------------------------------------------------------

Please note that custom coding is prone to user error. If you wish to not code the table and style it yourself, I’d recommend finding a table plugin that suits your project. We can’t recommend a specific plugin for you so you need to test several plugins yourself or consult with a developer.

Hope that helps and thank you for understanding.

Hi there Christian,

Thanks for getting back to me that quickly. Sorry for that I usually don’t ask question but try to find it elsewhere. Had no idea. Won’t ask about coding again.

As shown in the second screenshot above, the part that I added is nowhere to be found. So I simply cannot remove it. That’s the whole problem. Once I add a piece of “style” here, it simply disappear upon saving. Since I cannot find it anywhere on the site, it seems impossible to get rid of… Even in the “coding” section to alter a page on the “pages” in wordpress, there is no mention of these pieces of text…

Hey @matthiaslenaerts,

I see those styles in the source code inside the Text element markup. Please inspect the Text elements. If you’re using the Rich Text mode, switch to the HTML mode as the Rich Text won’t show the content of the style tag.

image

image

image

Hope that helps.

Hi Christian,

This is the view I am using… Not the rich text. Rich text shows the tables in tables.
And I suppose it is in the source code indeed, but it is not showing where I initially put it.

Hey @matthiaslenaerts,

I tried to check your page but it seems like you’ve deleted the page. To avoid such issues, always add your custom CSS either globally via Theme Options > CSS or in the Content CSS in content builder. Adding <style> tags is not recommended inside the content.

Hope this helps!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.