New Theme – Big Dave's Crossword Blog
View comments 

New Theme

Update October 23, 2019

What I hope will be the final changes to the “Big Dave 2019” theme. have been implemented  There are a small number of cosmetic changes, but the big difference is in the Responsive Design – a posh way of saying that the theme adjusts according to the width of the display.  While a desktop may be able to vary the size of the browser window, for other devices, such as phones and tablets, this is usually a fixed size.

I have divided the range of widths into 7 groups, based on a series of factors, and have allocated a colour to each group – this colour can be found in the footer at the bottom of each post.  For each group several aspects of the display have been resized.

  Range (in pixels)   Colour   Some typical devices – (P)=Portrait, (L)=Landscape
  1025+   Red   Desktop (L); iPad Pro (L), Galaxy Tab 10.1 (L)
  801-1024   Orange   iPad Mini (L), iPad (L); iPad Pro (P)
  783-800   Yellow   Galaxy S5 (L), Galaxy Tab 10.1 (P)
  601-782   Green   iPad Mini (P); iPad (P)
  481-600   Blue   iPhone 5 (L)
  321-480   Indigo   Galaxy S5 (P); iPhone X (P)
  0-320   Violet   iPhone 5 (P)

Please let me know if there are any problems either via a comment on this post or by using the Contact page. It is essential that you include the colour of the footer and the dimensions of your browser window – there is a link to help find this out under Miscellaneous in the Menu.

As a matter of interest, the percentage of users of this sire by device (according to Google Analytics):

  mobile 45.22%
  tablet 29.63%
  desktop 25.15%

The default mobile theme has been disabled in order to avoid confusion.


Update September 29, 2019

Although the new theme is now stable, I have spent some time over the past few days tidying up the responsive design – that is the ability of the theme to respond to the device that is currently being used.  There are 8 different ranges of screen widths designed to cope with devices from mobile phones to tablets to desktop PCs. 

Whether you like what you see or if you have noticed anything remiss please let me know via a comment on this post or by using the Contact page.  It is essential that you include the dimensions of your browser window – there is a link to help find this out under Miscellaneous in the Menu. 

By the way, if you are using the default mobile theme (which lacks many o the features of the new theme) you should be able to switch by clicking “View Full Site” at the bottom of the page and to return by clicking “View Mobile Site”.


Update September 2, 2019

When I first announced the new theme, two weeks ago, I pointed out a couple of limitations:

  • the lack of date and time parameters in the theme mean that, at least for the present, it is not possible to have date-related banners for National Saints days, birthdays and other special occasions,
  • it has not proved possible to add bloggers’ logos to the top of each post.

I have imported the processes from the old theme that enable these parameters and can now implement both the date-related banners and bloggers’ logos.  I plan to do so some time between 10:00 pm and midnight tonight.  This involves a lot of changes, so if you encounter any problems please let me know ASAP via a comment on this post.

Please note, because of space considerations, the logos will not be added to screens less than 600px 769px wide – this affects most phones and some smaller tablets. 

Although it would now be possible, I have no plans to re-implement the five-times-a-day header changes.


Update August 23, 2019

Various suggestions have now been implemented:

  • the menu bar has been moved the top, given a mellower appearance and now stays at the top when the screen is scrolled.
  • the avatars in the comment titles have been made a little larger,
  • the word “says” has been dropped from the comment titles (an easy change!),
  • the arrow has been restored to the left of the reply link at the bottom of each comment, along with a few other embellishments from the interim theme (a not-so-easy change!),
  • links are now underlined.

That’s it for now, unless anything major goes wrong.


Update August 21, 2019

Many phones and tablets actually use an alternative mobile theme which is provided by WordPress. This theme borrows the custom header (which often appears as a smaller image) and little else. There is usually an option to switch themes at the bottom of the post, but it can be difficult to revert back.

In the css that I copied as a basis there is a lot of code that I don’t profess to understand that provides for various mobiles and tablets.

With regard to the nesting of comments, I am not aware that it ceases to happen on tablets, mobiles etc. – what does happen is that an algorithm decides at which point cascading could result in higher levels of nesting becoming too narrow and at this point cascading stops; all the nested comments still appear within the confines of the box around the top-level comment.  On a PC, this can be demonstrated by making the browser window steadily narrower until it hits the crossover point decided by the algorithm.

Likewise, there is a point at which the sidebar stops appearing on the right-hand side of the content and moves to the bottom.

I will look at making the menu bar float down, but I don’t yet know how this is achieved – are there any experts out there that can help?


When the site was rebuilt a month and a half ago, the old theme that had served the site well for ten years became unusable.  I had been looking at replacing it for a while anyway, and settled on using Underscores, Automattic’s starter theme, as the basis.  I have tried to preserve as much of the “look and feel” of the original site as possible.  Development is now as near as I can get to complete, so I have decided to implement it.  I’m sure there will be teething problems, so use this post to let me know what you think and to point out any problems or complaints.

Some of the  limitations are listed below:

  • the lack of date and time parameters in the theme mean that, at least for the present, it is not possible to have date-related banners for National Saints days, birthdays and other special occasions,
  • it has not proved possible to add bloggers’ logos to the top of each post.

Advertisements

115 comments on “New Theme
Leave your own comment 

  1. Hi BD,

    It may just be my stupid iPad, but I’m missing the “home” button in the top line and have to access it via the site map. Do others have the same problem?

    1. I dropped it yesterday because it caused the menu to spread on to two lines on a replacement theme that I am working on. Just click on “Big Dave’s Crossword Blog” in the heading.

  2. Dear Big Dave,
    I am a frequent user of the site and value its existence. I have a query though: where has the ‘home’ button on the menu gone? I am not an Internet expert, and have learnt to navigate the site using this feature, which doesn’t seem to be present any more. Many thanks for all the good work.

  3. BD, it may be me, but should there be a ‘home’ button from the blog to get back to the homepage?? I have to get my bookmarks out and pick it that way?

  4. I have just had a read through of the new site and appreciate the work done. The presentation is clear and easy to read, and it altogether feels more compact, and, dare I say it, professional. I like the way comments are linked, and I look forward to continue to use this excellent site. Many thanks for your efforts, Dave.

  5. Excellent new site, very clear and easy to read. (Unlike the new on line DT web site, small light and faint, awful). Great job!

  6. On my iPad the replies are not nested. Also, the whole right-hand side bar is missing.

    Looks good on my PC.

    ps. just found “Recent posts”, “Recent Comments” etc sitting at the bottom of the page on my iPad.

  7. I like the bold font, but the replies to comments require nesting within the numbered boxes, otherwise it doesn’t make any sense. It looks as though, judging by Stan’s comments above, that this may only be on mobile devices.

    Otherwise, lovely and clear. Thanks BD.

  8. Great to see the revamped design which looks good on my laptop, and although I’m very pleased to see the Home button back on the top menu, I much preferred it when the top menu pane was frozen at the top of the page.

  9. I’m with those who ‘like’ this – it’s much more like the old set-up so you can all call me a dinosaur if you like.
    I’d be interested to hear why MP preferred the interim look of the site.
    It’s definitely a :good: from me – I really like all the replies being cuddled up nicely in a little box so that we can see who’s replying to who and what the original comment was that they’re replying to. Oh dear – maybe the grammar has gone a bit wrong here – sorry!

      1. I agree with you MP. Not keen on “LbR says:”, the new font nor the boxes. I liked the way the avatars were previously displayed and the reply arrow

        Having said that, I’m happy just to have the site in any usable format

  10. Good old Windows phone. Nothing has changed and that’s the way I like it.
    Only the picture of the village is smaller.
    Avatars work ok.
    Thanks to BD for all the hard work.

  11. Yes, I like the new format – it looks fine on a desktop monitor. Just one thing, could we please have the banner at the top of the page (containing the HOME – SITE MAP buttons) to be static, like it was before (i.e. it doesn’t scroll with the rest of the page). If you are looking at a previous puzzle and are right at the bottom of a long blog page, then you want to return home, you have to scroll all the way back to the top to get to the HOME button. Much more convenient to have it permanently at the top of the page, just a few inches away from the screen cursor. Thanks.

  12. Don’t consider myself an expert and it’s been a long time since I did any coding but I hope this helps

    The css for the id “site-navigation” or the class “main-navigation” should specify ‘position: fixed; top: 0;’
    You may then need to add a margin the same height as the menu bar to the top of “content” to avoid overlap

    1. Thanks for that. I have implemented similar code that I found on the web – it’s not yet perfect (for example it is obscured for signed-on users), but I’ll keep tweaking it until it satisfies most situations.

  13. BD, with your latest changes, for which many thanks, the good news is that “top menu” is now frozen but it appears in the middle of the screen (exactly where it is positioned under the header and pictures before the page is scrolled). Can this easily be rectified please to keep it right at the top (or bottom) of the displayed page?

    1. Ah! As a non-techie, I didn’t realise at first that was what LBR’s comment 16 is referring to. Sorry for the duplication.

                1. Nice idea! It’s actually “Cascading Style Sheets” and they are what sits between you and the bare-bones of the theme. A simplified version of the sequence that leads to what you actually see is:

                  WordPress
                  Theme
                  CSS
                  The good thing as far as you are concerned is that you don’t have to worry about it.

  14. The “HOME. ABOUT. COMMENT…. ” banner is static on my page , but about one third of the way down the screen, obscuring whatever is behind it.

    [edit] Ah, just what RD said!

  15. Works fine on my ipad (preferred) works equally well on laptop. My phone is not sufficiently advanced and besides mobile signal where I live is wrak at the best of times.
    The new site is clear and user friendly.

  16. Thanks Dave, I like the new site. Good to see the home button restored to the main menu. The full site, using my phone, has the narrowing of lines as the thread builds up. So I used the mobile site to view it, and that was fine after zooming in. Both versions seem more touch-sensitive, so when I’m trying to scroll, I keep getting the reply box. Will try to be a bit more (legally) light-fingered in future.

  17. I actually preferred the appearance of the interim site too. I’m not too keen on the bolder typeface.
    Other than that I shall still be referring to this excellent site on a daily basis.

  18. I go to the Peak District for a few days & what did you do while I was away? Only revamped the site that’s all. I really like the new look – sterling work BD. Thank-you.

  19. Have we lost access to the ‘cryptic crosswords’ listing of previous Rookie, NTSPP & MPP puzzles or is it just that I can’t find it?

  20. As of late yesterday (2nd Sept) when I click onto a specific blog using a laptop, the entire contents of the right hand column have slid down to below the review and comments. Means that there’s no way to check for new comments without scrolling through the whole lot!

    1. I didn’t think that was an effect of yesterday’s changes. The moving of the sidebar used to kick in at a screen width of 1024px – I’ve changed that to 800px, so try it now.

                  1. Nothing like that – there is just a selection of mini-pics of your home turf with ‘proudly sponsored by wordpress etc’ over-printed.

                    There is plenty of space on the right hand side of my screen but it’s completely blank when I’m viewing anything other than the main page.

                    1. Then I’m puzzled. I have simulated your browser window size in four different browsers, and all of them show the sidebar on the right-hand side. It seems that the “View xxxx site” links only appear in Firefox – what browser are you using?

    2. It has been like that on my tablet since the new site was introduced. I just know if I can’t find the information at the right hand side, it will be at the bottom of the page, and actually, down there, it is a lot easier to read and click on whatever comment I wish to access

          1. It’s basically a link to a named element at the bottom of the page using id = “footer” and a href #footer or similar for the link

  21. Hi Dave, couldn’t reply to your question on the same thread as it had reached its limit. I’m using your ‘favourite’ Windows 7 with Internet Explorer! The thing I can’t understand is why the main page still shows the sidebar but individual puzzle blogs do not – ever since the latest ‘tweak’. I seem to remember that you couldn’t get the sidebar to work with the likes of Rookies, NTSPPs etc but it’s now the same for me with all the puzzles.

    1. Hi Jane – if you are using IE9 which runs on Win7, try Chrome or Firefox maybe?
      Much as I dislike Chrome, it works for me on Vista, Win7 and even XP

      Is your screen resolution at default? That would cause an issue
      You could try right-click desktop>properties>resolution and select a higher number
      1366 x 638 is unusual, it’s more commonly 1366 x 768 on a 15.5″ display

      1. Hi LbR, many thanks for your suggestions. I’ve (finally) managed to select 1366 x 768 but that makes no difference. Further investigation reveals that I’m using IE11 with automatic updates. Any more advice to offer?

        1. IE11 is not fit for purpose. I gave up checking that the website ran successfully on IE several years ago. It is so bad that Microsoft abandoned it in favour of Edge. These days I only check Opera, Chrome, Edge and Firefox – Chrome is an excellent suggestion.

          1. By the way, WordPress uses separate processes for the Home page, Posts, Pages, Archives and Search results – 5 processes in all and I have made changes to all of them.

            1. Hi LbR,
              To be honest, I don’t think it’s a problem with my browser as a) it’s only the individual puzzle blogs that are affected. b) everything was fine prior to the last tweak that BD carried out on the evening of 2nd Sept. c) I don’t have a problem with any of the other sites I use.
              I’ve heard nothing good about Chrome and Edge seems to be fairly limited so I’ll probably just stick with what I’m doing at the moment – going back to the main page each time and then using the refresh button.
              Many thanks for your willingness to help – much appreciated.

        2. Since IE11 is no longer maintained by Microsoft, I recommend installing Firefox from https://www.mozilla.org/en-GB/firefox/new/. Google’s business is selling the information that they collect from tracking and monitoring what users do with their products, including Chrome, and enabling other companies to do the same thing. Firefox is created by a non-profit organization that is not in the data collection business. It’s also, in my opinion, a better browser.

          1. I think I’m going to be dragged kicking and screaming into the arms of Windows 10 by the end of the year when support for Windows 7 ceases. I’ve made a note to also consider using Firefox at that stage. If I subsequently disappear without trace from the blog, you’ll all know why!

          1. By the way, the arrows are now bolder.

            There are a number of other small cosmetic changes, and a quick link to the start of the comments. My particular favourite is the thumb-tack on sticky posts.

      1. Yes, I noticed them but didn’t have a clue what they’re for – as for the ‘thumb-tack on sticky posts’ perhaps you’d prefer me not to ask………….

        PS Thank you, I’ve found the ‘cryptic crosswords’ link again. I’m sure you keep moving it to stop me finding the darned thing!

        1. The degree of satisfaction comes from the difficulty in finding out how to achieve the desired result and the elegance of the solution – as any programmer will tell you.

  22. I am using a pixel 2xl phone. In P mode I get indigo footer with screen size (according to your tool) of 412×647. Whilst all text is readable I get clear white margin of about 7mm on left of screen and final letter of each line is clipped as text is squeezed hard against right of screen. This does not happen in L mode (green footer) and there are reasonable margins on both left and right, however, P mode is preferred and has always been clear in the past. Hope this is useful in fine-tuning the site.

    1. Martin

      This is clear, concise and very useful. My own phone, a Samsung Galaxy S5 Mini, uses the same indigo group, but doesn’t have the clipping. I’ll look into it. Watch this space!

  23. Dave, my laptop is in the red group and absolutely fine.

    My Samsung Galaxy S6 is in the Indigo group and is perfect as far as the preamble and review/hints are concerned but there is a large margin when it comes to the comments (1.3 cm to the comment numbers and 1.6 cm to the left hand box edge). The right hand margin is fine.

    Well done on making all these changes, and many thanks for your continued perseverance to make this such a good website for our enjoyment.

    1. Welcome to the blog

      On my PC the Google search is in its usual place on the RH side of the home page. On my tablet, it is right at the bottom of the home page – it does take a bit of scrolling down to find it.

        1. There is a link to the Google search in the Site Map, but I have added it to the drop down items under Miscellaneous. Other Miscellaneous items can be accessed by selecting “Miscellaneous”.

          1. Since the much appreciated latest changes, the useful moveable headings ‘an arrow followed by home, about, comment’ etc still shows and works on a pc screen but has disappeared from the tablet version to be replaced by a small box with lines in at the top of the page

              1. As Dave F said earlier – a lot of scrolling – this time upwards – required. It isn’t really a problem at all, I just thought while we were flagging things…

                1. I had to decide when to stop displaying the full menu and start displaying the small menu (horizontal bars / hamburger) – I’ve moved that dividing line to the blue menu by making the font size of the green menu smaller

Join the Conversation, Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.