Problem/Motivation
The new theme Olivero doesn't allow table zebra. Therefore distinguish different rows in a table may be difficult. Some others themes like the old Bartik or the new Claro ones do it using odd/even classes through table.html.twig and convenient css rules. Theme Olivero hasn't such table twig. Thus for this theme the default table twig
core/modules/system/templates/table.html.twig,
is used, which does not implement odd/even classes. Moreover the table.css exists for that theme but has no rules for odd/even classes.
Therefore does this lack is intentional or is a forgetfulness? Why an other approach is used for table zebra? Which one is expected instead?
Steps to reproduce
Proposed resolution
Add a table.html.twig file to Olivero theme, like the Claro theme one.
Add a rule for tr.odd in table.pcss.css.
Remaining tasks
Modify table.pcss.css.
Add a table.html.twig file to Olivero theme, like the Claro theme one.: not necessary.
User interface changes
API changes
Data model changes
Release notes snippet
Comment | File | Size | Author |
---|---|---|---|
#20 | Olivero_Css_Patch_3332049-13+17.png | 26.49 KB | Chris64 |
#20 | Olivero_Css_Patch_3332049-13.png | 28.54 KB | Chris64 |
#20 | Olivero_TableHtmlTwigClaro.png | 29.5 KB | Chris64 |
#20 | Olivero_Original.png | 36.25 KB | Chris64 |
#17 | 3332049-17.patch | 1.41 KB | Kaustab_Roy |
Comments
Comment #2
Gauravvvv CreditAttribution: Gauravvvv at Axelerant for Drupal India Association commentedComment #3
Santosh_Verma CreditAttribution: Santosh_Verma at Srijan | A Material+ Company for Drupal India Association commentedAdding a patch for table zebra styling
before
after
Comment #4
Santosh_Verma CreditAttribution: Santosh_Verma at Srijan | A Material+ Company for Drupal India Association commentedComment #5
Chris64The patch 3332049-1.patch has a little space problem:
s/&:nth-child(even){/&:nth-child(even) {/
With Drupal 9.5.8 the patch does not apply. With Drupal 10.0.x-dev the patch applied cleanly. But the table has no zebra. Since the
tr
elements in the table have noeven
/odd
classes. If now in the Olivero theme the Clarotable.html.twig
file is used, then the table has zebra. A suitabletable.html.twig
file seems missing for the theme Olivero. Yes, Screenshot 2023-04-28 at 8.37.03 PM.png is what is expected.Comment #6
Chris64Comment #7
Santosh_Verma CreditAttribution: Santosh_Verma at Srijan | A Material+ Company for Drupal India Association commentedRerolling the patch for D10 with Custom Commands Failed issue fixes.
#Chris64 it's working on css odd even rule.
Testing steps
1.Go to content tab >> edit and create a content >> go to editor >> choose text formate full html
2.Create or paste your table HTML
3. save the content and check the table on frontend
4. You can see the table in zebra style
if this solution is fine then i will create a patch for D9.5
Comment #8
Santosh_Verma CreditAttribution: Santosh_Verma at Srijan | A Material+ Company for Drupal India Association commentedComment #9
Santosh_Verma CreditAttribution: Santosh_Verma at Srijan | A Material+ Company for Drupal India Association commentedRerolling the patch for D10.0.x
Comment #10
Chris64@ Santosh_Verma I can't get the same result than you.
In my case, the page theme is Olivero. And the html table in this page is built through an html.twig file. On a Drupal 10.1.0 installation.
0) Apply your patch: 3332049-8.patch: OK: applied cleanly.
1) With the original Olivero theme the table html look like,
Visually: PB: table is not zebra. And there is no
table.html.twig
in thecore/themes/olivero/templates/
.2) I alter the Olivero theme, by coping the table.html.twig file from Claro theme in
core/themes/olivero/templates/dataset/
.Then (drush cr needed) the table html look like,
Visually: OK: table is zebra.
Comment #11
Chris64Comment #12
Chris64Comment #13
Santosh_Verma CreditAttribution: Santosh_Verma at Srijan | A Material+ Company for Drupal India Association commented#Chris64 i have attached the latest patch please test with this.
Comment #14
Chris64Fine @Santosh_Verma! Zebra gets in the table without table.html.twig file. Patch 3332049-13 applied cleanly.
Few remarks,
- The final/bottom horizontal line is missing in the table.
- In my case, better without,
padding-block: var(--sp1);
: row less height, table more compact.vertical-align: top;
: no horizontal alignment problem in rows.The full corresponding rule,
Comment #15
Chris64Comment #16
Chris64Comment #17
Kaustab_Roy CreditAttribution: Kaustab_Roy at Specbee commentedAdded patch based comment #14 requirement.
But I think it will be better to create a subtheme of Olivero theme, then add changes or override them as needed.
Even the changes in above patches can be problematic if we run postcss.
Kindly review.
Comment #18
Chris64@Kaustab_Roy, patch 3332049-17 applied cleanly, and makes what was missing. Only one little objection: the final line now exists, but its color if different from the first one. After a look to the patch and the page style, what about rather?,
and,
The file structure would be more the same. Nothing else in view.
If we can avoid to create a subtheme and only use the default Drupal theme it would be much better!
Comment #19
Santosh_Verma CreditAttribution: Santosh_Verma at Srijan | A Material+ Company for Drupal India Association commented#Chris64 : Regarding the recent modifications and changes in CSS that you requested in the last patch, implementing them may have an adverse impact on the styling of other sections of the website.While I agree that your suggested solution is better than creating a generic rule for all tables, I have encountered an issue where the even/odd classes are not being applied when I copied the table.html.twig file from Claro to Olivero.
Could you provide more information, such as the folder structure (mine is core/themes/olivero/templates/dataset/table.html.twig) and how to view the table in the frontend (I am creating a view with a format:table)?
Comment #20
Chris64@Santosh_Verma, I suggested to use a
table.html.twig
from an other theme for Olivero, since in the old Bartik theme it was made this way, and some other themes have it. But not sure it is the good solution for Olivero. Yes, same folder for me, for the filetable.html.twig
in Olivero. We use this to mimic the old system. I enjoy your solution: using cssnth-child(even)
/nth-child(2n)
instead of a twig. Only verified for our particular case. But no problems seen on our site. It is believable that problems occur with yours solutions or my suggestions in some cases. Is it possible to avoid this cases? May be reducing the ambitions of the patch. Seems important: our table does not come from a view: it is a table of paragraphs gets from modules reference_table_formatter and paragraph through a field of type entity_reference_revision. Basic for the style configuration. Surely, no enough images from our part, and so not easy to see how look like the problem. Here some images (from different places):Olivero Original:
Olivero + Claro table.html.twig:
Olivero + Css Patch 3332049-13:
Olivero + Css Patch 3332049-13+17:
Comment #21
Chris64Comment #23
joachim CreditAttribution: joachim at Factorial GmbH commentedOther core themes have 'odd' and 'even' css classes to allow table striping.
This should be in all core themes.