This is now a standard WordPress site, hosted on Ionos (used to be called 1&1), using the hueman-pro theme slightly customised as hueman-pro-child. All editing is handled through the normal WordPress classic editor (since it all existed prior to WordPress migration). A limited number of files may need to be updated through the Ionos file screen, for historic reasons. All user accounts are handled through WordPress, with very limited requirement to access the Ionos account directly.
The main domain is southeastcroquetfederation.org.uk, but southeastcroquet.org.uk is also retained as the main externally known domain, also for historic reasons. southeastcroquet.org.uk redirects to southeastcroquetfederation.org.uk, so does not exist as a separate editable domain/pages.
There are no email accounts, with all email addresses set up as redirects to real world people, with all email copied to the webmaster (just in case). Although xxx@southeastcroquet.org.uk is typically used externally, all southeastcroquet.org.uk addresses just redirect to southeastcroquetfederation.org.uk ones. These are all maintained through the normal ionos account and not through WordPress.
Plug-ins
We have quite a few plug-ins
Akismet Anti-Spam (not activated now and probably not needed as we’re using Bee)
All In One WP Security
Antispam Bee
Broken Link Checker
Classic Editor
Custom Permalinks
Email Address Encoder
Enable Media Replace
Fast Velocity Minify
Header and Footer Scripts (needed for just a couple of pages)
HTML Forms
List category posts (News page)
Real Cookie Banner (deactivated)
Really Simple SSL
Simple Yearly Archive
Statify (probably not needed as ionos stats may be sufficient)
The Events Calendar
UpdraftPlus – Backup/Restore
WF Cookie Consent
WordPress File Upload
WP RSS Aggregator
WP-Optimize – Clean, Compress, Cache
Files
For historic reasons many files/photos pre the 2021 WordPress migration are stored in the file structure (../files/) with a directory for each year since 2016 used to store JPEGs AGM minutes etc. They haven’t been migrated into Media files since it didn’t seem necessary.
Directories files/jpegs and files/jpgs2 are used for pre-2017 images. files/history is used for pre-2017 historic files, such as AGM minutes and league results.
files/downloads is used for mainly historic internal stuff and the files here are often not referenced from HTML pages.
files/people is used to store Committee photos and some other people directly referenced in our pages, but probably won’t be used post-2021.
files/map_markers is used to store the pointer images displayed on our Clubs Map page and files/leaflet the scripts etc for the Leaflet software used for the map.
files/trophys contain pictures of our trophies
files/clubs contains details of clubs who don’t have their own websites
Post conversion to WordPress in 2021 most new files are imported as Media items, so very limited file access is needed for the files folders. Fo this reason FTP access is not provided. Files/folder management is provided via the WordPress File Upload Control Panel.
It is recommended that all non-photo files be uploaded using the following process:
All these files get put into /wp-content/uploads/file_name.
Forms
HTML Forms-Lite is used to create the forms and handle emailing of entries. This was used as the forms already existed pre-Wordpress, so it was fairly easy to migrate them. A little Javascript code is used to manipulate the visibility of some parts of the League Results and Annual Registration forms to keep the appearance simpler. It’s very hard to format these forms, so we don’t.
Styling
Most custom CSS is stored in the theme custom CSS (shown at the bottom), will a little tailoring in a few pages, such as the Club List. Some of the hueman-pro theme styling needed overriding, e.g. the NAV elements.
Pictures
In general ONLY use pixel measures for height/width when all else fails, as these fix the formats and prevent browsers reformatting pages for different screen sizes.
So use width=”n%” to allow elements to appear side by side, e.g. n=32% for 3 columns/photos (always make the total less than 100 to allow for some browser errors in calculations) and don’t use height= at all, as this allows the browser to scale the element in proportion to the actual width being used or text size. For example
<td width="24%">…</td>
for a 4 photo horizontal format.
You will normally need to add width=”100%” to each to make them fill the width of the column, if it’s embedded in a table. (This may or may not be necessary if you’ve only got one photo to fill the width.) You might want to use the class rightimage100 to do this, as it also includes a small margin around the picture to separate it from another image, e.g.
<img src="jpgs/xxx.jpg" class="rightimage100">
is preferred to
<img src="jpgs/xxx.jpg" width="100%">
If you want a picture to be on the right or left of a paragraph then use the classes rightimage or leftimage, e.g.
<img src="jpgs/xxx.jpg" class="leftimage">
Tables
There are several styles set up: results and resultscentre (like results but with all the elements centred) are the main ones. In general if you use these you need to do very little formatting unless you want to make some columns exactly the same width (use <td width=”n%”> for this) or you want to centre something in a table element (use <td valign=”center” align=”center”> for this).
You may wish to add width=”100%” in addition to the class usage at the start of a table, e.g.
<table class="results" width="100%">
in order to ensure that it fills the full width of the screen, especially if you have several tables underneath each other.
The first line of a table usually has headings. If so then use <th> rather than <td> to get the different formatting set up for that style (bold, background colour etc.).
Background colours for cells or rows: there are a number of classes set up which provide a limited subset of colours which we’ve used throughout the site. These are cyan, lime, silver, yellow, green olive, gray, limegreen and lightblue. Use this way:
<tr class="yellow">
to get a complete row in yellow.
Multi-columns
Creating a multi-column layout is a bit tricky as the browser is in control. You can use tables, but there are downsides for this. However, creating a two-column layout is relatively easy, for example for the League Lists/results Entry for 2016. After migration to WordPress these multi-column layouts have mostly been eliminated, apart from the front page.
Keep control by using <div>s to surround the various bits, and use some pre-defined custom CSS classes, e.g.
<div> This example creates two columns, the left one being 60% of the width and the right 40%. Classes for a 50:50 split are also available. This text goes across the two columns. <div class="main_60"> Left column text </div> <div class="right_40"> right hand column text </div> </div> <div class="clear"> </div>
The last bit is to ensure that anything below the text from both columns actually falls below both columns.
Clubs
Obviously the entry on the Clubs List and Handicappers pages needs regular maintenance, with <a name=”xxx”></a> preceding each entry in the list to ensure that the map link works. Some clubs don’t have website, so you may need to set up a page for them. The club list page has a Single column format to accommodate the width.
For the map we use the Leaflet software and Open Street Maps to generate our own map of the South East. The pins are stored in files/mapmarkers
To find latitude/longitude from the postcode use Google Maps, then right click on the location and choose Show Entry – lat/long is at the bottom of the entry.
The format held within the map page (you need to use the Text version) is a bit fiddly and there’s no error checking, so include quotes before and after each non-numeric field, terminate each line except the last with a comma.
News
This is generated through the normal WordPress Post mechanism and creates an RSS feed. This is used by Zapier.com (user name = webmaster@southeastcroquet.org.uk) to copy to a post on our Croquet South East Facebook page.
Our Local Club news comes automatically from RSS feeds from various club websites pulled in (hourly) by the RSS Aggregator plug-in, copied by Zapier.com to Facebook also.
Diary/Events
The Events Calendar plug-in is used to manage and display all our events.
The main categories to use for events are GC, AC, SECF tournament and CA. You should always include either GC or AC for a tournament in addition to any other categories used. Most clubs (venues) should already be in the system (you only really need the website address for a new one), but you’ll probably need to add the odd Organizer or two with their basic details.
Clubs should send in their entries via our website form. There’s now a CSV option for the Events Import to use.
The single page listing is a customised version of the standard listing, most of the work is by modifying the CSS and eliminating some items that are displayed in the standard version, e.g. Description.
Events in the CA calendar have been included now.
To have an event included as an SECF one in the left hand block (on every screen) make it a featured one.
Tournament Reports
Although pre-2020 these were stored in a single page per year, from 2021 onwards each report is just a News item with the category of SECF event, so no action is needed at the start/end of a year.
At the start of the season
- Prior to the start (December-February?) update the Diary with notified events from the various clubs, and also the SECF-organised dates. The Croquet Academy will also release its new programme, so update this page.
- Prior to 1st February update Annual Registration page (mostly with new prices for tournaments)
- Following the start of the season (March/April?) when the fixtures are released create a new Current Fixtures (League Results) page and a League Table and propagate with details from the League Organiser. There’s a mostly empty template file 20xx_league_results if you’re in any doubt.
Then in Menu change the fixtures and league tables pages to these from the Leagues sub-menu.
Create a new Post announcing the release of the Fixtures. - Update the League Contacts page.
- The League Organiser will also provide the matches in the correct format to insert in the drop-down lists in the League Results form and also the League Tables.
- Update National Croquet Week page as necessary.
During the Season
Create Tournaments reports news items (Posts).
Update Current Fixtures with results as received and the Fixtures Table.
Add Newsletters to their page as and when issued.
Add other News items as and when needed.
At the end of the Season
- ?stop results submission at the end of season
- Update Honours Board
- Update Committee page after AGM (including history at the bottom of the page)
- adding history files (as and when available)
- AGM minutes to Organisation page
- copy Current Fixtures to a new League results page for the year and add to Menu under Historic League results
- Development Reports to its page
- Newsletters to its page
- As soon as known roll forward the date of SECF events from the previous year (rather than creating a new event).
- In December/January roll forward the Diary for CA tournaments when the CA Fixture list is finalised by changing the date for existing tournaments to the new year (some may not roll forward and there may be some new ones)
- For SECF only events you’ll need to poll clubs to fill it in – many will be able to just roll forward like CA ones
Custom CSS
/*
Theme Name: Hueman Pro Child
Theme URI: https://wordpress.org/themes/hueman-pro/
Template: hueman-pro
Author: the WordPress team
Author URI: https://wordpress.org/
Description:
Tags: blog,two-columns,custom-header,custom-background,threaded-comments,sticky-post,translation-ready,microformats,rtl-language-support,editor-style,custom-menu,flexible-header,featured-images,footer-widgets,featured-image-header
Version:
Updated
-------------------------------------------------------------- */
/* Title{SECF} */
html, body {height: 100%;}
body{
font-family: Arial, Helvetica, sans-serif;
margin: 1.0em 2.0em 1.3em 2.3em;
}
.body{
width: 90%;
float: left;
margin-top: -15px;
background-color: white;
}
.main, .main_100, .main_60, .main_50, .main_40 {
width: auto;
float: left;
overflow: auto;
}
.main_100 {
width: 100%;
clear: both;
}
.main_60{
width: 60%;
clear: both;
}
.main_50{
width: 50%;
}
.main_40{
width: 40%;
}
.center{
text-align: center;
}
.right {
width: auto;
float: right;
}
.right_25 {
width: 24%;
height: 100%;
float: right;
text-align: center;
overflow: hidden;
margin: 8px 0px 0px 4px;
}
.right_50, .right_40 {
width: 49%;
float: right;
overflow: hidden;
vertical-align: top;
}
.right_40 {
width: 39%
}
.clear{
clear: both;
line-height: 10px;
}
p {
margin: 0.4em 0.6em 0.3em 0.0em;
padding: 0.1em;
}
p.contents{
font-weight: normal;
text-align: center;
}
ul {
margin: 0.8em 1.2em auto 2.4em;
}
h1, h2, h3, h4 {
font-weight: bold;
font-size: 2em;
line-height: 1.2;
margin: 0 0 0 0;
clear: both;
}
h2 {
font-size: 1.6em;
}
h3 {
font-weight: italic;
font-size: 1.3em;
}
h4 {
font-size: 1.3em;
}
a:active{
color: #ff0000;
}
a:link{
color: #0000ff;
}
a:visited{
color: #006400;
}
a:hover {
color: yellow;
background-color: black;
}
.indent{
margin-left: 60px;
}
.leftimage, .leftimage100 {
float: left;
margin: 3px 3px 3px -1px;
padding: 3px;
}
.leftimage100 {
width: 100%;
}
.rightimage {
float: right;
margin: 3px 0 3px 3px;
padding: 3px;
}
.rightimage100 {
float: right;
width: 100%;
margin: 2px -2px 2px 2px;
padding: 2px;
}
.image {
margin: 3px;
padding: 5px;
}
secf, tr.secf, cyan,tr.cyan {
background-color: #00ffff
}
ac, tr.ac, .yellow, tr.yellow {
background-color: yellow
}
tr:nth-child(even) {
background-color: lightgray;
}
tr:nth-child(odd) {
background-color: lightcyan
}
.lime,tr.lime {
background-color: lime
}
secf, tr.secf, cyan,tr.cyan {
background-color: #00ffff
}
.silver,tr.silver {
background-color: silver
}
ac, tr.ac, .yellow, tr.yellow {
background-color: yellow
}
.green,tr.green {
background-color: green
}
.olive,tr.olive {
background-color: olive
}
.gray,tr.gray {
background-color: gray
}
.limegreen,tr.limegreen {
background-color: LimeGreen
}
.lightblue,tr.lightblue {
background-color: #add8e6
}
td.image{
background-color: #e0ffff;
}
td.thumb{
font-size: small;
font-weight: normal;
text-align: center;
}
table.results {
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 100%;
font-weight: normal;
text-align: left;
vertical-align: top;
padding: 2px;
border: thin groove black;
border-collapse: collapse;
}
table.results tr {
text-align: left;
padding: 0;
margin: 0;
}
table.results td {
border: thin groove black;
}
table.results th {
border: thin groove black;
font-weight: bold;
text-align: center;
background-color: lime
}
table.results tr:nth-child(even) {
background-color: lightyellow;
}
table.results tr:nth-child(odd) {
background-color: lightcyan
}
table.results tr.secf {
background-color: #00ffff
}
table.results tr.ac {
background-color: yellow
}
/* NAVIGATION */
.nav {
font: 0.8em verdana, arial, sans-serif;
border-collapse: collapse;
padding: 0px;
clear: both;
margin: 0em 0em 0em 0em;
position: relative;
}
.nav ul {
margin: 0;
padding: 12px;
}
#nav-header .nav li:hover>a, #nav-header .nav li>a:hover {
color:yellow;
}
.nav>li>a {
padding: 15px 8px;
}
#header .hu-pad {
padding: 40px;
}
#footer-bottom .hu-pad {
background-color:#4ea300;
}
.post-thumbnail img {
display:none
}
.widget, .widget select, .widget>h3 {
font-size:16px;
}
.widget_rss ul li {
padding: 10px 10px 10px 0
}
.widget>ul li:before {
display:none
}
.widget_recent_entries ul>li a:before {
content:"";
margin-right:0;
margin-left:-12px;
}
.tribe-common .tribe-common-h7 {
font-size: 16px;
line-height:0;
}
.tribe-common .tribe-common-h6 {
font-size:16px;
margin-left:1em;
text-transform: uppercase
}
.tribe-common .tribe-common-anchor-thin {
border-bottom: none;
font-size: 16px;
}
.tribe-events-widget .tribe-events-widget-events-list__view-more {
display:none
}
.page-title .meta-single li {
font-size: 24px;
}
div.wpra-list-template .wpra-item-list > li.wpra-item {
color:black
}
/*
*****************************
EVENTS
*/
.widget-container {
margin-bottom: 15px;
}
#main .widget-area ul {
margin-left: 0;
padding: 0;
}
.widget_recent_entries .post-date, .tribe-event-date-start {
font-size: 1rem;
}
#tribe-events, #tribe-events-pg-template, .tribe-events-pg-template {
padding:0px 10px 10px
}
.tribe-events-list-widget .tribe-events-list-widget-events {
padding: 0.5rem 0.5rem;
margin-bottom: 0rem;
line-height: 1.1rem;
list-style: none;
}
h3.widget-title {
font-size: 1.4rem;
}
h4.widget-title h4.tribe-event-title {
font-size: 1.1rem;
margin-bottom: 0.1rem;
}
.tribe-events-list-widget-events {
/*border: thin solid black;*/
border-top: none;
margin-bottom: 0.1rem;
}
.tribe-events-list-widget-events:first-child{
/*border: thin solid black;*/
}
.tribe-events-list-widget .tribe-event-title {
font-size: 1.3rem;
padding: 0rem;
margin-bottom: 0rem;
}
/* ????? also need to change above in tribe-events-full.css for no apparent reason!! */
#content .tribe-events-page-title {
font-size: 1.3rem;
margin: 0;
text-align: left;
}
/**********************
hide events selection bar
*/
#tribe-events-bar {
display: none;
margin-bottom: -0px;
}
.tribe-events-loop {
margin-top: 30px;
}
#tribe-events-content .tribe-events-list {
margin-bottom : 0;
}
#content .tribe-events-event-cost span {
padding: 3px;
}
div#tribe-events-header {
display: none;
}
#tribe-events .tribe-events-button {
margin-top: 0
}
.events-list #tribe-events-footer {
margin: 1em 0 0 0;
}
.tribe-events-list-separator-month {
font-family: cursive;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.3rem;
padding: 0;
margin: 0.2em 0 0 0;
}
.tribe-events-list .type-tribe_events {
font-size: 1rem;
padding: 0 6px 0 6px;
border-bottom: 1px solid darkgray;
}
.tribe-events-list .type-tribe_events {
line-height: 1.5rem;
}
.tribe-events-list .type-tribe_events.tribe-events-first {
padding: 0 6px 0 6px;
}
.tribe-events-list .tribe-events-loop .tribe-event-featured {
background-color: aqua;
margin: 0;
padding: 5px;
}
span.tribe-event-time {
display: none;
}
.venue {
float: right;
}
.tribe-events-event-cost {
display: inline-block;
padding: 3px;
line-height: 0.5;
margin: 0;
float:right;
}
.tribe-events-event-cost span {
display: inline-block;
padding: 3px;
margin: 0;
float:right;
}
.single-tribe_events .tribe-events-event-meta {
margin:1rem 0;
}
.single .hentry {
margin: 0 0 12px 0;
}
.tribe-events-list-separator-month {
line-height: 2.6rem;
}
.tribe-events-list .type-tribe_events:first-of-type {
margin-top: 0;
}
.tribe-events-category-secf-tournament {
vertical-align: middle;
background-color: aqua;
}
.tribe-events-category-secf-other {
vertical-align: middle;
background-color: white;
}
.tribe-events-category-gc {
vertical-align: middle;
background-color: lime;
}
.tribe-events-category-ac {
vertical-align: middle;
background-color: yellow;
}
.tribe-events-category-ca, .tribe-events-category-gc-ca, .tribe-events-category-ac-ca {
vertical-align: middle;
background-color: gold;
}
print.css
/* Title{RTWCC} */
#site-title { display: block; }
body{
color: #000000;
font-family: Arial, Helvetica, sans-serif, AvantGarde Bk BT;
font-size: 13px;
background: white;
float: none;
overflow: visible;
padding: 0;
-webkit-print-color-adjust: exact; /* ENSURES BACKGROUND COLORS PRINT */
}
.body{
width: 100%;
float: left;
}
body.contents{
margin-left: 0px;
overflow: visible;
}
#main, #wrapper, .main{
width: 95%;
float: none;
}
.clear{
line-height: 1px;
float:none;
}
#footer {
display:none;
}
.col-2cr .main-inner, .col-3cm .main-inner {
padding-left:0;
padding-right:0;
background-color:white;
}
.sidebar .sidebar-content, .nav, .navgen, .rbox, .noprint { display: none; }
#nav-topbar .nav li a { color: black; font-weight: 600;}
a:link, a:visited, a:active { color: black; text-decoration: none }
p {
margin: 0.8em 1.2em auto 1.2em;
font-size: 10px;
float: none;
}
p.h0, .entry h1 {
font-weight: bold;
font-size: 20px;
line-height: 1.2em;
margin: 0 0 0 0;
padding-top: 10px;
text-align: center;
font-family: sans-serif;
float: auto;
}
p.contents{
font-weight: normal;
text-align: center;
}
#content .entry-title {
font-size: 20px;
line-height: 1.1em;
padding-top: 10px;
}
#content th {
background-color: transparent;
color: black;
}
.wp-caption p.wp-caption-text, .entry-meta {
color: black;
}
}
/* TABLES
-------------------------------------------------------------- */
table.indent{
margin-left: 20px;
}
table.results{
font-size: 13px;
padding: 2px;
border: outset 4px gray;
float: none;
}
table.results td{
border: inset 2px gray;
border-collapse: collapse;
}
table.results th{
border: inset 3px gray;
border-collapse: collapse;
}
table.comp{
font-size: 13px;
border: outset 3px gray;
float: none;
}
table.comp td{
border: inset 3px grey;
border-collapse: collapse;
}
table.comp th{
border: inset 3px grey;
border-collapse: collapse;
}
table.club{
padding: 2px;
}
table.diary, table.match {
border: thin solid;
padding: 0;
background: transparent;
float: none;
}
table.match caption{
padding-top: 20px;
}
table.match tr.header {
background-color: Silver;
border: none;
text-align: center;
}
table.match tr {
border: none;
}
table.diary tr {
font-size: 13px;
float: none;
}
table.cross_sheet {
width: 100%;
border: thick solid gray;
padding: 3px;
margin: 0;
float: none;
font-size: 13px;
}
table.cross_sheet tr:nth-child(odd) {
background-color: white
}
table.cross_sheet th.person {
border-left: thin solid gray;
padding: 3px;
}
table.cross_sheet td {
border-left: thin solid gray;
border-top: thin solid gray;
padding: 3px;
}
table.cross_sheet td.box {
padding: 3px;
}
table.cross_sheet td.person {
border-top: thin solid gray;
font-weight: bold;
}
table.knock_out {
width: 100%;
background-color: white;
border: thick solid gray;
padding: 3px;
margin: 0;
float: none;
font-size: 13px;
}
table.knock_out td {
border: thin solid gray;
font-weight: bold;
padding: 3px;
}
td.X {
background-color: #f2f2f2;
}
td.cyellow, td.cpink, td.ccyan {
padding: 2px 2px;
}
td.cyellow {
background-color: Yellow;
}
td.cpink{
background-color: Pink;
}
td.ccyan{
background-color: Cyan;
}
/* DIVS
-------------------------------------------------------------- */
img.hhleft{
border: none;
}
.hleft,.hright{
display: none;
float: none;
}
.hcenter{
width: 100%;
text-align: center;
float: none;
width: auto;
}
.hhleft{
}
.hhcenter{
width: 100%;
float: auto;
}
.left{
float: none;
font-size:1em;
}
.center,.center_50,.center_60,.center_65 {
clear: both;
margin-top: 10px;
height: auto;
width: auto;
float: none;
}
.right_20, .rbox,.rbox_20,.rbox_23, .rbox_40 { display:none; }
.right, .right_20, .right_25,.right_30{
width: auto;
float: none;
}
/* DIARY bits
-------------------------------------------------------------- */
.tribe-events-list .type-tribe_events {
font-size: 13px;
line-height: 1.1em;
border-bottom: 1px solid gray;
}
.entry-content {
font-size: 13px;
line-height: 1.1em;
}
#content .tribe-events-page-title, #tribe-events-footer, #tribe-events .tribe-events-button, p.tribe-events-promo {
display: none;
}
.tribe-events-list .type-tribe_events {
margin-bottom: 0;
}
/* DON'T SHOW MENU AND OTHER BITS */
wpadminbar, #wpadminbar, .wpadminbar {
display: none
}
.post-thumbnail {display: none}
#header {
background: none;
background-colour: none;
}
