New Brand 4 WordPress theme released

[ASLChris]

Following the new [URL="https://scoutsbrand.org.uk/"]UK Scouts Brand[/URL] released in May, the previous themes designed are no longer compliant. However, a new theme has been designed and is [URL="http://www.iscout4wordpress.org.uk/themes/"]now available[/URL] for download and use! All websites using the old themes should be updated.

It has been designed to be responsive and in line with current website trends.

Two are two versions available:


[LIST][*]New Brand 4 Groups[*]New Brand 4 Districts[/LIST]

(The difference between these is only the number of boxes on the front page.)

You can see these live on the [URL="http://www.watfordnorthscouts.org.uk"]Watford North Scouts[/URL] and [URL="http://www.9thnorthwatford.co.uk"]9th North Watford Scouts[/URL] websites.

Make sure you read the [URL="http://www.iscout4wordpress.org.uk/themes/user-guide/"]user guide[/URL] and get your site back on brand!

Any feedback is welcome to help develop it further.

[Keith]

Looks good and i've installed it.

I'd like to see all the customisations, logo uploads, background image options, menus, copyright, front page customizations, social media, options and anything in the user guide where you have to edit the code of the theme added as functionality to the WordPress theme customize options (/wp-admin/customize.php) like most other themes now do.

I had to login to download the themes, so you should look at setting up an SSL certificate for the iscout4wordpress site.

Thank you for producing and releasing this theme - it looks great.

[ASLChris]

TBH, I don't have the skills to make it the customisation work. If anyone else does, please give it a go!

There is an active certificate - it just wasn't auto-redirecting to https (now fixed).

[pstretch]

[QUOTE=ASLChris;458448]It has been designed to be responsive and in line with current website trends.[/QUOTE]

[QUOTE=ASLChris;458448]You can see these live on the [URL="http://www.watfordnorthscouts.org.uk"]Watford North Scouts[/URL] and [URL="http://www.9thnorthwatford.co.uk"]9th North Watford Scouts[/URL] websites.[/QUOTE]

Thanks for this template. I've loaded it into a test site and am having a good play with it now.

It doesn't seem to be responsive though.

My test site doesn't look responsive and both of your sites above are found to be 'not mobile friendly' by Google's Mobile-Friendly Test tool:

[URL]https://search.google.com/test/mobile-friendly?id=pwIX4DhEALQxR0DnRFBAjA[/URL]

[URL]https://search.google.com/test/mobile-friendly?id=cBkfuqMPvGmgbu4ulxN9iQ[/URL]

[dralphs]

Hi Chris

It certainly looks good and i've taken the plunge with our group website. However it would be useful to have a few more notes on how to set up some of the sections or at least pointers especially with the widgets.

Maybe a few screenshots of your dashboard/backend to show how the plugins are set up would be good

EG (i'll put this here to help others who get stuck)

The Sticky Header Menu Bar. No instructions really in guide or on wordpress apart from how to add logo and colours. Mine came up with the logo and nothing else. H'mmm why doesn't the menu show. After a bit of head scratching i found under Appearance > Menus that by following your instructions you have created a menu, but crucially it isn't "Created and saved" nor is the tick box in menu settings ticked for the display location - simply sticky header on scroll. Obvious once you find it. Tick the box, name and save menu and it works.

[Keith]

[QUOTE=dralphs;458654]The Sticky Header Menu Bar. No instructions really in guide or on wordpress apart from how to add logo and colours. Mine came up with the logo and nothing else. H'mmm why doesn't the menu show. After a bit of head scratching i found under Appearance > Menus that by following your instructions you have created a menu, but crucially it isn't "Created and saved" nor is the tick box in menu settings ticked for the display location - simply sticky header on scroll. Obvious once you find it. Tick the box, name and save menu and it works.[/QUOTE]I had to do a bit of work to get ours to work and look fairly decent. The menu sticky took a bit of time to get it looking right, although I had to use the logo on a white background, when it'd have looked much better the other way round, but the link colours in the plugin and the theme don't seem to be compatible with their CSS - through the plugin I should be able to change the link colours to whoever I like, but it doesn't work.

The theme as it stands requires users to understand and be competent editing code, using FTP, etc. to be able to update bits, which I have already detailed in an earlier comment.

[ASLChris]

[QUOTE=dralphs;458654]Hi Chris

It certainly looks good and i've taken the plunge with our group website. However it would be useful to have a few more notes on how to set up some of the sections or at least pointers especially with the widgets.

Maybe a few screenshots of your dashboard/backend to show how the plugins are set up would be good

EG (i'll put this here to help others who get stuck)

The Sticky Header Menu Bar. No instructions really in guide or on wordpress apart from how to add logo and colours. Mine came up with the logo and nothing else. H'mmm why doesn't the menu show. After a bit of head scratching i found under Appearance > Menus that by following your instructions you have created a menu, but crucially it isn't "Created and saved" nor is the tick box in menu settings ticked for the display location - simply sticky header on scroll. Obvious once you find it. Tick the box, name and save menu and it works.[/QUOTE]

I tried to make the guide as not be too prescriptive as everyone will their own way they want their site to appear. Yes it does require a bit of knowledge on how to set up and use, but that's because I'm not a professional WordPress developer, but simply someone who does it a bit and wants to help others make use of what has already been done.

[dralphs]

[QUOTE=ASLChris;458662]I tried to make the guide as not be too prescriptive as everyone will their own way they want their site to appear. Yes it does require a bit of knowledge on how to set up and use, but that's because I'm not a professional WordPress developer, but simply someone who does it a bit and wants to help others make use of what has already been done.[/QUOTE]

Hi Chris

Thanks and it is appreciated. I'm not a professional developer either just a hobby poke and hope guy.
I seem to remember the setup guide with the original theme did provide a bit more help in getting the widgits set up. With this new 2017 style could you post a few screen shots of your config just to point us on the right path.

[dralphs]

Hi Chris

Think i may have found a bug. I prefer to make changes using child themes so set one up using just the bare minimum files needed. style.css and functions.php.
The original stylesheet(s) were included via a enqueue call in functions.php.

I added footer.php which only contained the div for the charity number and the theme picked this up ok.
I added an /images folder with our two new brand logo images again this worked fine but i lost the home button and social icons until i added in other "social" icons in /images

The biggest issue was even though i created my own background image and added it as bg-large.jpg to my child /background folder the theme still used the version in newbrand4districts/backgrounds/bg-large.jpg not the one in the child theme folder. I played around putting an overide in the child style.css without any success and using inspect page (in chrome) it always show the backgroound image url being [url]http://yarntonscouts.org.uk/wp-content/themes/newbrand4districts/backgrounds/bg-large.jpg[/url]

I notice on your demo site the background is in /images not /backgrounds so is that where i've gone wrong. or is the background url hardcoded somewhere which is overiding the child theme css?

I will have another play on my offline site over the next few days and see if i can figure it out but any suggestions much appreciated.

[ASLChris]

[QUOTE=dralphs;458767]Hi Chris

Think i may have found a bug. I prefer to make changes using child themes so set one up using just the bare minimum files needed. style.css and functions.php.
The original stylesheet(s) were included via a enqueue call in functions.php.

I added footer.php which only contained the div for the charity number and the theme picked this up ok.
I added an /images folder with our two new brand logo images again this worked fine but i lost the home button and social icons until i added in other "social" icons in /images

The biggest issue was even though i created my own background image and added it as bg-large.jpg to my child /background folder the theme still used the version in newbrand4districts/backgrounds/bg-large.jpg not the one in the child theme folder. I played around putting an overide in the child style.css without any success and using inspect page (in chrome) it always show the backgroound image url being [URL]http://yarntonscouts.org.uk/wp-content/themes/newbrand4districts/backgrounds/bg-large.jpg[/URL]

I notice on your demo site the background is in /images not /backgrounds so is that where i've gone wrong. or is the background url hardcoded somewhere which is overiding the child theme css?

I will have another play on my offline site over the next few days and see if i can figure it out but any suggestions much appreciated.[/QUOTE]

Your background image is showing for me on your site - are you sure you didn't just need to hard-refresh your browser?

The other sites were developed from scratch, before I tweaked the theme for release - moving the background and logos to their own folder was done at that point.

[dralphs]

[QUOTE=ASLChris;458779]Your background image is showing for me on your site - are you sure you didn't just need to hard-refresh your browser?

The other sites were developed from scratch, before I tweaked the theme for release - moving the background and logos to their own folder was done at that point.[/QUOTE]

Hi Chris

its showing the image now as i've reverted back to the non-child theme and uploaded image to appropriate folder.

[JPA]

Thanks for the theme - its looking good.

One issue I have found with mine is that the headings for the twitter and instagram widget areas do not line up when replaced with text in one, and recent posts in the other. Also it appears that the style sheet is not applied to the text widget.

[Keith]

[QUOTE=JPA;459002]Thanks for the theme - its looking good.

One issue I have found with mine is that the headings for the twitter and instagram widget areas do not line up when replaced with text in one, and recent posts in the other. Also it appears that the style sheet is not applied to the text widget.[/QUOTE]

There are a few little quirks in the theme, as well as some improvements that could be made, but I think Chris would need, and appreciate, help with the theme and maybe with developing further themes.

I have, made my own tweaks to both the stylesheets and the code to customize it (some are things I can do in most other themes without having to edit the code) and make it look how I want it to.

[Matt Donnelly]

I'm in dire need of updating a few Scout websites to a more modern theme.

Is there any scope for some collaborative development through something like GitHub?

Whilst I have never written a theme from scratch, I can debug, etc. and it would be good to see this further developed to tackle some of the remaining issues with responsiveness.

[TomF]

Really glad to see the new theme. Well done Chris. I have uploaded and activated successfully using the basic green background. I tried to upload with backgrounds 2 and 4 but both failed with the following error message "[COLOR=#444444][FONT=-apple-system]The uploaded file exceeds the upload_max_filesize directive in php.ini." I am using version 12.0.1 Safari on an iMac. Can anyone help? If this is a [/FONT][/COLOR][FONT=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif][COLOR=#444444]general problem it's a terrible limitation[/COLOR][/FONT]