Build Website like UK

We use WordPress and Theme Twenty Seventeen.
To be 100% honest the Twenty Seventeen is a pig of a theme. But with a few plugins and tweaks, it is now working well without needing to edit back-end code.

DO NOT run your Website on the same server as FreeDMR.

All below is FREE and used on the United Kingdom Website.

You do not need a Website with all bells and whistles. Keep it simple and with info your users can follow to get them onto the FreeDMR Network. It can also be built over several months like the UK site has been. Like all aspects of Ham Radio. It is a project and you will have fun learning new skills.

a. Appearance

Appearance – Customise –

Colours – Dark

Site Identity – Set Logo ( Look under Banners on this Link )

Header Media – Set Background Image

Theme Options – Page Layout – Set to One or Two. UK is set to One.
Also at the top of this section if you have installed plugin – Remove “Powered by WordPress”
Tick the Box to turn on.

The rest you can fill in with your information etc

After initial set-up and appearance is done. Use Plugin – Child Theme Generator To make a Child Theme.

Then go back and fill in depending on your needs or requirements –
Additional CSS- See Section c. CSS below

b. Plugins

Advanced iFrame Classic Editor Duplicate Page Elementor

Essential Addons for Elementor GTranslate ID Back To Top Insert Headers and Footers

Remove “Powered by WordPress” Simple Custom CSS and JS TablePress ResponsiveVoice Text To Speech

WP Maintenance Mode WP Visitor Statistics (Real Time Traffic) Robo Gallery WP 4 Me Title Remover

This is a list of what all is in the UK website.
Most was already loaded when I took the site over and am sure some will never be used.
You will need to learn what each plugin does and how it works. Goggle and homework is your best friend.

c. CSS

Child Theme – Appearance – Theme Edit – Stylesheet (style.css)

Generate a CSS and add. I used this site It is simple and works.

You can add your own code to this section. But I will add what I am using below as example.
Now the website looks the same on all Browsers and Phones.

h1 { font-family: Arial; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; } h3 { font-family: Arial; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 21px; } p { font-family: Arial; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18px; } blockquote { font-family: Arial; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 15px; } pre { font-family: Arial; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18px; } li { font-family: Arial; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18px; }

I did have to add code at the end manually for – Tab Text Size – to make the text the same size.

 li { font-family: Arial; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18px; }

Child Theme – Appearance – Customise – Additional CSS

You can add your own code to this section. But I will add what I am using below as example.

/* make footer hidden */
footer{
display:none;
}

/* make menu color change */
.navigation-top .main-navigation li li a:hover {
color:#D20537;
}
.main-navigation li li li {
background-color: #383838 ;
}

/* define width of submenu items (to allow a greater percentage of submenu items to be on one line) */
@media screen and (min-width: 48em) {
.main-navigation ul ul a {
width: 270px;
}

/* change the title size */
.entry-title {
    font-size: 25px !important;
}

d. Pages

All pages made via standard classic editor. Apart from a few made with Elementor. ( See Tips No 6 bottom of page. )

Edit Page – Page Attributes –
Parent – (no parent)
Template – I use Default template
Order – 0

e. TablePress

Below is some code I use on the UK site as an example. For two tables.
This is the CSV file for tablepress-id-1

To set some text as Green as in this Table – Regional Talk Groups. I added code to the CSV file.
( <div style=”color:#20bd67″>23500</div> ) or ( <span style=”color: #20bd67;”>23500</span> )

Goggle is your best friend to find code to tweak as you want it displayed

TablePress – Plugin Options – Custom CSS:

.tablepress-id-1 tbody td,
.tablepress-id-2 tbody td {
font-family: Arial;
font-size: 12px !important;
}

.tablepress thead th,
.tablepress tfoot th {
background-color: #000000;
color: #FFFFFF;
}

.tablepress-id-1 thead th,
.tablepress-id-2 thead th {
border-bottom: none !important;
}

.tablepress-id-1 tbody td,
.tablepress-id-2 tbody td {
border-bottom: 1px solid #565656 !important;
}

.tablepress-id-1 .odd td,
.tablepress-id-2 .odd td {
background-color: #222222;
color: #FFFFFF;
}

.tablepress-id-1 .even td,
.tablepress-id-2 .even td {
background-color: #222222;
color: #FFFFFF;
}

.dataTables_paginate a {
color: #20bd67 !important;
}

.paginate_button.disabled {
color: #FFFFFF !important;
}

Add the table short code to page you want the table to be displayed on –

FreeDMR TG	FreeDMR Names
2345	CQ North
23427	Dial-a-Node FreeDMR UK AllStar 29177
23450	Yorkshire Net UK
..............................	…........................................................

f. Options Calculator

This is the two versions the UK uses.
Only difference is one has the name – “Options Calculator” at the top for Mobile Phone use.
Added to a page via Iframe code and a link to the B version for mobile phone to use.
https://www.freedmr.uk/index.php/dashboard/options-calculator/
Files can be downloaded at https://t.me/c/1422594915/3266 if you are a member.

g. Videos

Videos made with Windows 10 Xbox Game Bar and edited with FREE https://www.kapwing.com

h. TIPS

1. I run two Home pages.

The main Home page that https://www.freedmr.uk goes too. Also Opens the full Header Image.
The 2nd is a copy of the Home page and replaces the HOME menu tab with this one.
This way, when they click the HOME tab they go to https://www.freedmr.uk/index.php/home/ and only opens the smaller Header Image like the other tabs.

2. Footer and Header Insert Headers and Footers

As I have removed the footer to get rid of unwanted text and links.
The Home page https://www.freedmr.uk has the footer info added manually to the bottom of the page.
All other pages the Plugin “Insert Headers and Footers” handles all info I want displayed.

Example :- Footer

<div style="font-size: 12px; text-align: center;">© 2021 FreeDMR UK              <a href="https://www.freedmr.uk/index.php/information/">Information</a>              <a href="https://www.freedmr.uk/index.php/site-map/">Site Map</a>              <a href="https://www.facebook.com/groups/1656912831137407" rel="noopener" target="_blank"><img alt="" class="alignnone size-full wp-image-3481" height="26" src="https://www.freedmr.uk/wp-content/uploads/2021/04/Danleech-Simple-Facebook.ico" width="26"></a>              <a href="https://t.me/FeeDMRUserGroup" rel="noopener" target="_blank"><img alt="" class="alignnone size-full wp-image-3482" height="26" src="https://www.freedmr.uk/wp-content/uploads/2021/04/Telegram.png" width="26"></a>              <a href="https://twitter.com/Freedmr_UK" rel="noopener" target="_blank"><img alt="" class="alignnone size-full wp-image-3498" height="28" src="https://www.freedmr.uk/wp-content/uploads/2021/04/Twitte.png" width="28"></a>              <a href="https://www.facebook.com/FreeDMR.United.Kingdom" rel="noopener" target="_blank"><img alt="" class="alignnone size-full wp-image-3512" height="27" src="https://www.freedmr.uk/wp-content/uploads/2021/04/Facebook-page.png" width="27"></a></div><br><br><br>

Example :- Top Header

<div style="font-size: 12px; text-align: center;"><a href="https://www.facebook.com/groups/1656912831137407" rel="noopener" target="_blank"><img alt="" class="alignnone size-full wp-image-3481" height="26" src="https://www.freedmr.uk/wp-content/uploads/2021/04/Danleech-Simple-Facebook.ico" width="26"></a>    <a href="https://t.me/FeeDMRUserGroup" rel="noopener" target="_blank"><img alt="" class="alignnone size-full wp-image-3482" height="26" src="https://www.freedmr.uk/wp-content/uploads/2021/04/Telegram.png" width="26"></a>    <a href="https://twitter.com/Freedmr_UK" rel="noopener" target="_blank"><img alt="" class="alignnone size-full wp-image-3498" height="27" src="https://www.freedmr.uk/wp-content/uploads/2021/04/Twitte.png" width="27"></a>    <a href="https://www.facebook.com/FreeDMR.United.Kingdom" rel="noopener" target="_blank"><img alt="" class="alignnone size-full wp-image-3512" height="27" src="https://www.freedmr.uk/wp-content/uploads/2021/04/Facebook-page.png" width="27"></a>                                                                  </div>

3. Dashboards

Is just iFrames via Elementor from the HTML pages you make up from HBMonv2 Dashboard.
I can not offer any support on this, as I did not make them.

4. Back UP

Back up website daily and your server.

5. Site Map

I used this Free site to build the UK Site Map
Set to HTML Sitemap and Grid. All other settings left as default.
Download and then edit out what you do not need.
Via Edit Page you must work in Text View and past in. If you use Visual it will not keep the format.
Also looks crap in Preview. So click Update and view page as normal page.

6. This Page

This page was entirely made in the standard classic editor, to show what all can be done.

Dashboard pages and 3 others was made via Elementor
Contacts, Talk Groups, and Dashboards was done via Elements as it offers the buttons and no other reason.
Hotspot Dashboard and Repeater Dashboard was done via Elements for Advanced iFrame only.

Finally

This is the best support I can offer for building a Website.
I am sure you can use parts of this to help build your own Website.

Share this post with your friends.