Problem with classes in paragraphs and tables

Hello,

With this update, the (paragraph) tag now inherits text color through a CSS variable. This means that if you apply a color to a region via the theme settings, paragraphs inside that region will automatically use the assigned color, ensuring consistency across your design.

Previously, applying a class like .Stile5 to a paragraph (paragraph) meant you had to manually set a text color. Now, with CSS variables, you have two ways to apply colors to elements such as:
img, code, pre, kbd, samp, p, hr, ul, ol, ul li, ol li, table, th, td, tr, blockquote
Using a Fixed Color:

.Stile5 {
  color: #CC3366 !important;

}

Using a CSS Variable:

.Stile5 {
  --r-tx: #CC3366;
}

Table borders now inherit the global color assigned to the main container. If you need to override the border color for specific elements, you can set the --r-br variable like this:

.page-node-type-vulcani .main-box-inner * {
  --r-br: blue;
}

Best wishes,
Alaa

1. I have to use css because the variable doesn't work if the text is inside the paragraph.

2. The tables must all have the same border, but I don't understand why the border is double. The color doesn't matter, but the border must not be double.

Thanks and best regards

Hello,

If the variable isn't working, it means it hasn't been assigned to the specific HTML tag. In your example, the CSS class .Stile5 is applied to a paragraph tag. To ensure the color override works in all cases, you can use an ID in your CSS. However, I intentionally prefer using CSS classes instead of IDs so that users can easily override default styles.
Here’s an example:

#page-wrapper .Stile5 {
  --r-tx: #CC3366;
}

This setup works on any of the following tags: img, code, pre, kbd, samp, p, hr, ul, ol, ul li, ol li, table, th, td, tr, blockquote.
For list items, you can apply the variable like this:

#page-wrapper li {
  --r-tx: #CC3366;
}

If you want to apply a variable to everything inside a div or paragraph tag, you can use:

#page-wrapper p *  {
 color: var(--r-tx);
}

This ensures that any nested elements within the paragraph tag inherit the color variable.
If you need to assign a specific color to a or any other HTML tag separately, you can do:

#page-wrapper p span {
  --r-tx: #CC3366;
}

Regarding the double border issue in tables, I noticed it's being applied by the browser’s default user agent stylesheet. You can fix this by setting border-spacing to 0:

#page-wrapper table {
  border-spacing: 0;
}

Best wishes,
Alaa

The css does not solve the problem: it overlaps the two borders, but two remain. Instead the black border should disappear and the other one should remain, as in this page: https://www.gmpe.it/notiziario
I did not change anything because the site was finished.

Thanks and best regards

The style for the table in this page is custom:

th {
    background-color: #f5f0e7;
    border-bottom: 3px solid #b0e6d1 !important;
}
.bordertab {
    border-bottom: 1px solid #BCC8AD !important;
}

And the table border, which you can remove it with the same css:

#page-wrapper table {
    border-spacing: 0;
    border: 0;
}

Best wishes,
Alaa

I can't set border=0 because all the tables in views no longer have a border and instead there must be one.
Compare:
https://www.gmpe.it/notiziario
https://prova.gmpe.it/notiziario

The other tables also have no border, while the border must be there:
https://www.gmpe.it/vulcani/attivita-vulcanica

Maybe I can't explain myself well, but what I need are tables like this one, which is perfect, and must be the same throughout the site:
https://prova.gmpe.it/notiziario

If I set border=1, nothing changes in the view tables and they remain perfect.
The other tables, however, have two overlapping borders: one black and one brown. Only the black border must be eliminated, but not the other.
The tables must return to how they were before. I don't understand what happened.

Thanks for your patience

Hello,

By default in Solo theme, without adding custom code, the table appears as shown in the first screenshot. You only need to apply colors.

Ensure that any existing table styles are removed to prevent conflicts before applying the new styles. The expected outcome should match the second screenshot.

html #page-wrapper table {
  border: 1px solid #bcc8ad !important;
}

html #page-wrapper table th {
  background: #f5f0e7 !important;
  border-bottom: 3px solid #b0e6d1 !important;
}

html #page-wrapper table tbody tr {
  border-bottom: 1px solid #bcc8ad !important;
}

html #page-wrapper table tbody tr:last-child {
  border-color: #bcc8ad !important;
}

Best wishes,
Alaa

Thanks for what you are doing for me.

I like the default table, but with my header.
Unfortunately I still have two borders.
This is the css I inserted:

html #page-wrapper table {
  margin: 0 auto;
}

html #page-wrapper table th {
  background: #f5f0e7 !important;
  border-bottom: 3px solid #b0e6d1 !important;
  text-align: center;
}

#page-wrapper table tr {
  border-bottom: none;
}

#page-wrapper table tr td,
#page-wrapper table tr th {
  padding: 4px 6px;
}

#page-wrapper .view table tr td,
#page-wrapper .view table tr th {
  text-align:center;
}

.bordertab {
  border-bottom: 1px solid #BCC8AD !important;
}

Thanks and best regards

You are welcome! The two borders are the border space.

html #page-wrapper table {
    border-spacing: 0;
   margin: 0 auto;
}

Best wishes,
Alaa

Hello,

Solo uses a custom Twig template for tables, but unfortunately, this template isn't applied everywhere, leading to inconsistencies in table layouts. In the latest release, I implemented basic table settings to ensure a uniform look across all tables.

Best wishes,
Alaa

We had already used border-spacing:0, but it didn't solve the problem.
For now I'll leave it like this.

Thanks and best regards

Now everything is perfect, everything works, the site is back to normal. I hope there are no other revolutions.

Thanks for everything and best regards

Sorry to be back here, but I noticed that tables with border=0 have a border.
Compare:
https://www.gmpe.it/link/gruppi-mineralogici-paleontologici
https://prova.gmpe.it/link/gruppi-mineralogici-paleontologici

Thanks and best regards

Hello,

Two types of borders are added: one for the table and another for the td/th elements.

#page-wrapper table,
#page-wrapper table tr th,
#page-wrapper table tr td {
  border: none;
}

or create a css class and add it to any table:

#page-wrapper table,
#page-wrapper .no-border,
#page-wrapper .no-border tr th,
#page-wrapper .no-border tr td {
  border: none;
}

Best wishes,
Alaa

I'm sorry, but the solution is not acceptable, it is not normal and it is not feasible. Drupal and ckeditor have always allowed tables with and without borders. It is unthinkable that, in a site that has been finished for a long time, you start browsing the 457 very long pages, with dozens of tables, with and without borders, and then search in the source code for the table without borders to manually insert the code, considering that they are both on the same page.
The problem had already occurred and had been solved in another way and I hope there is another solution. I don't think I'm the only one to use tables with and without borders.

Thanks and best regards

Hello,

Yes, there are many possible solutions. I initially assumed you had a single table where you wanted to remove the borders. In the development version, I removed the default table borders globally. Now, table borders are only added when you're creating a View.

Here are some options you can consider:

Reset all table styles and customize them as needed

#page-wrapper table {
  all: unset;
  display: table;
  border-collapse: collapse;
  width: auto;
}

#page-wrapper th,
#page-wrapper td {
  all: unset;
  padding: 0;
}

Target tables inside a specific region

#sidebar-box-main table tr th,
#sidebar-box-main table tr td { 
  border: none;
}

Target tables used within a specific content type

.page-node-type-link  table tr th,
.page-node-type-link  table tr td { 
  border: none;
}

Target tables inside a specific field type

.field--type-text table tr th, 
.field--type-text-with-summary table tr td {
    border: none !important
}

Target tables inside a specific field name

.field--type-text table tr th, 
.field--type-text-with-summary table tr td {
    border: none !important
}

Best wishes,
Alaa

Sorry to have been abrupt but:
- I am not the owner of the site, but for twenty years I have been committed to keeping it updated
- I presented and published the site in Drupal 11 a few days ago, believing it was finished and only later I realized that there were problems; if I had known, I would have delayed the delivery
- I am not paid to make the site, I do it willingly, but up to a certain point, because there is still a lot of work to do: there are still problems with the tables and I will still have to browse all the pages and work on the code of almost all the tables
- the contents with the tables come from Drupal 9 with Mayo theme, then I transferred them to Drupal 10 with Solo theme, modifying some tables; now I have prepared the site in drupal 11 and I find myself with tables that are all different: see the page https://www.gmpe.it/prove
- while with the default theme and ckeditor 4 the tables were all the same (with and without borders) regardless of the code, now with ckeditor 5 and the Solo theme they have become different; this is why I felt discouraged and therefore I got a little upset
- she has done so much for me and is always available to all users and for this she deserves that the theme is successful, but for this it must reach the greatest possible number of users
- the theme has a large number of options and allows you to make very beautiful sites, but for those who need a traditional site, mainly based on text, as in my case, they may find themselves in difficulty if they are not very experienced.

In summary:
- I do not want to change the css because it would further upset the tables and they would no longer be manageable.
- The latest theme update might be fine if you fix some issues, as seen on the page https://www.gmpe.it/prove
In particular:
- border=0 and borde-style:none → remove the bottom border of the cells
- border=1 → insert the bottom border of the table
- border-style:solid → make it equal to border=1

Thanks and best regards

Hello,

Thank you for the explanation. However, I’m working within a tight deadline, so I’d like to clarify something quickly.

The code you applied for the table styling doesn’t seem to work as intended. Specifically, the selector you used — #page-wrapper .no-border tr th, #page-wrapper .no-border tr td — will not be effective unless the table itself has the .no-border class applied.

In the Solo theme, a bottom border is applied only to td and th elements globally (both in Solo and global styles). Additionally, a border around the full table is only added when using a custom Twig template that includes it.

My recommendation would be to choose one of the previously suggested methods to properly target the kind of tables you're working with, depending on whether you're styling via CSS or custom Twig templates.

Best wishes,
Alaa

I forgot to delete css #15.

Now see https://www.gmpe.it/prove:

- border=1 is correct

- border=0 and border-style:none need to be corrected because there is a bottom border on the cells, while the table should not have any border

- border-style:solid, inserted with ckeditor (should replace border=1), in theory it should be equal to border=1 but instead it is different

There is no rush, because I have already delivered the site and until they notice ...

thanks and best regards

border=0 is correct with Solo 1.0.13
https://prova.gmpe.it/link/gruppi-mineralogici-paleontologici

There are borders between lines with Solo 1.0.18
https://www.gmpe.it/link/gruppi-mineralogici-paleontologici

I would not like to go back to the old version.

Thanks and kind regards

Hello,

The only difference between versions 1.0.13 and 1.0.18 is that the bottom borders were moved from the