sp-tables, removing border and styling

Resolved MirkoB82
(@mirkob82)

10 months ago

Hi, in my page (linked) i have the events block (latest events) css that really sucks, because the table is rendered using the default template css. I would like to edit it: what classes do i have to re-style? I would like for example to remove borders, put a rounded rectangle background with border-radio for example as first thing, then edit the top row in a similar way to Rookie theme (but don’t need rookie theme). Thanks!

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Contributor Roch
(@rochesterj)

9 months, 4 weeks ago

Hi there!

Thanks for reaching out.

In general, the styling is up to your theme. But if you want to customize it that way you’ll need some CSS knowledge.

Maybe this helps you:
https://themezee.com/docs/customize-css-with-firebug/

Thanks!
Thread Starter MirkoB82
(@mirkob82)

9 months, 3 weeks ago
Hi Roch,

thank you for your reply as usual.
Well yes, i wanted to customize it more deeply, as i noticed that the Theme i use for the site (Sydney Theme) isn’t capable to cover such tables of Sportspress, and this leads to see “unformatted” tables (well, id say standard-formatted) with no precise styles applied.

I know a bit of CSS, enough to set a background to a Div, style tables with fonts, align etc.. by the way, inspecting the page with Chrome inspector and trying to edit the event block template (sportspress php file) i wasn’t able to find the specific classes i should re-style in Style.css file in my child theme.

knowing what are the classes that get into action when the php file instructs the browser how to build eg. the “last events” block, i could re-style them pretty easily.

could you indicate eg. what class is for Event block table top row?

i initially tried styling these classes to remove the 1px border
```
.sp-table-wrapper{
  border:none !important;
}
.sp-data-table{
  border:none !important;
}
```
but it was not useful (same with “hidden” value): maybe those are not the right classes i assume.

thank you!
Thread Starter MirkoB82
(@mirkob82)

9 months, 3 weeks ago
Update: with Chrome developer inspector i found the right classes to be edited and, of course in preview mode, i was able for example to set a different background color and remove borders from the table.

anyways, i tried to put the code in the /style.css of my child theme, like this
```
/* Event Table edited */
.sp-table-wrapper{
  max-width:600px !important;
}
.sp-data-table{
	background-color:rgba(197,197,197,0.4) !important;
}
/* end of - event table edited */
```
anyways, the edits apply to all data tables (i suppose that’s a template for every table of Sportspress). I would be glad if you could indicate me where i can define a precise class for eg. just the event tables. (what file? what template?)
- This reply was modified 9 months, 3 weeks ago by MirkoB82.
plou
(@plou)

9 months, 3 weeks ago

SportsPress/templates/event-blocks.php

On line 117, you can add a custom class to the tab (for all event block). Edit this custom class in your css.

corrinarusso
(@corrinarusso)

9 months, 3 weeks ago

Make sure you edit your templates properly – otherwise your changes will be over written with every update to the plugin :
https://support.themeboy.com/article/58-theme-integration-guide