Google Spreadsheets in Blocs

I Need Help
1

I’m currently using a Rapid Weaver stack named Grid Iron to display timetables using Google Spreadsheets on a clients website as this enables the client to make changes to the timetable easily online. I wondered if there was any way of doing this in Blocs as I am thinking of rebuilding the website using Blocs. This enables the client to make changes to the timetable easily online.

Here’s the page where the timetable is displayed using the above combination:

https://bailey-cox.com/timetables/index.php

2

There’s a free Bric in the Blocs Store to embed Google sheets:

1 Like
3

@Jerry Thanks for that. The problem with that option is the Bric doesn’t allow me to apply styling like the Rapid Weaver stack does as you can see on this page it just take the information from Google spreadsheet and applies its own custom styling:
https://bailey-cox.com/timetables/index.php

The other major problem with this option is that it allows anyone to edit the spreadsheet.

4

@Jannis Volt is even a better solution for you. You can just drag/drop your sheet into it.
I posted about it a while ago here:

1 Like
5

Doesn’t Google’s spreadsheet have an export for web feature. Then you just copy and paste the code it gives you into a code widget. It should update as the spreadsheet does.

1 Like
6

@Malachiman If it does I can’t see it.

7

In your example using Volt CMS how are you applying the styling to the table? When I cut and paste into Volt none of the borders show.

8

Try Google. Plenty of tutorials online.

9

Add som thing like this to your page footer:

<style>
table {
      font-family: verdana, sans-serif;
      font-color: #F9692A !important; 
    border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

More info on styling of tables here:

10

@Jerry Thanks for that Jerry I managed to get that to style the table but on mobile it doesn’t scroll horizontally and as a consequence the right side of the table gets cropped.

11

Everything you want to know about tables in Bootstrap, including responsive.

1 Like