1 Topic by GrahamBird (edited by GrahamBird 2017-12-05 17:59:48)

  • Registered: 2017-12-05
  • Posts: 4

Topic: Customise Boma theme Question [SOLVED]

Hi
I'm a new user and am happy so far with the system.
Have set things up on a laptop and am now struggling with the different start screen when viewing on a mobile as opposed to a lap top or desktop computer!
Do the mobile versions and desktop / tablet versions have different start index files.
I would ideally like the gallery, when viewed on a mobile, to have its opening screen as the list of all galleries (the same as you would see when you first click the 3 bar link (stop right of the opening page).

Would appreciate some help.
Website where galleries are set up is weddingringslondon.co.uk

  • Registered: 2012-12-16
  • Posts: 950

Re: Customise Boma theme Question [SOLVED]

Do the mobile versions and desktop / tablet versions have different start index files.

No. Desktop and mobile devices all display the same HTML files but the styling of the pages differs depending on the screen size. The CSS controlling the layout of the pages for the Boma theme can be found in the '_themes/boma/css/styles.css' file.

Rather than delve into Showkase's own CSS and JavaScript code which handles the hiding/showing of the navigation menu, perhaps the easiest way to have the menu appear in its expanded state on mobile devices would be to manually trigger a click on the menu icon once the page has loaded.
Try adding the following code to your site's '_themes/boma/js/custom.js' file.

$(document).ready(function() {
    $('.icon-menu').trigger('click');
});

Hopefully this will be a suitable solution for you.

  • Registered: 2017-12-05
  • Posts: 4

Re: Customise Boma theme Question [SOLVED]

Hi Steven

Many thanks for the fast response.
You're correctly understanding what I require and the simple solution you've proposed sounds excellent.
However I've edited the referenced file and its not working as you suggest. Once the page has loaded I'm just seeing the same 'blank' home page as before the file edit.
Any suggestions?

Regards Graham

  • Registered: 2012-12-16
  • Posts: 950

Re: Customise Boma theme Question [SOLVED]

The code should be in your weddingringslondon.co.uk/_themes/boma/js/custom.js file but it does not seem to be there (it seems to be an empty file).
Please double-check that the code is in the correct file and clear your browser's cache before reloading your website.

I checked my suggestion in a test site under the Boma theme (in Mobile Safari on an iPod Touch 6 running iOS 11.2) before posting it and it seemed to work well for myself so, once the code is in the correct file, it should hopefully work for yourself, too.

5 Reply by GrahamBird (edited by GrahamBird 2017-12-06 12:52:42)

  • Registered: 2017-12-05
  • Posts: 4

Re: Customise Boma theme Question [SOLVED]

Hi Steven

I removed the script from the file yesterday evening as it wasn't working as I expected. The script works ok when the gallery is first opened on a mobile and the gallery index list appears as required. However, because every gallery has its own index.html file that also runs the custom.js script file, when a gallery to view is selected, the 'click'  outputs the gallery menu to the screen with the gallery images below the gallery list. Not ideal !!

I've solved this by creating another file (customhome.js), which contains your script and have left the custom.js file empty. I've modified the 'home' page index.html file to run the new script so this script only runs when the gallery is first opened or when the home page is selected.
All seems to be working fine now.

However, each time I re-publish the site I have to re-modify the home page index file to re-include the customehome.js script. Is there an easy way around this?

  • Registered: 2012-12-16
  • Posts: 950

Re: Customise Boma theme Question [SOLVED]

You can modify my sample code with an additional internal CSS class so that the click is triggered only on your home page.
Each page in a Showkase site has a unique page id (as a CSS class within the <body> tag).
If you view the source of your home page in a browser and scroll down to the opening <body> tag, you'll see that your home page's id is 'page-18'.
Try adding the following code to your site's '_themes/boma/js/custom.js' file.

$(document).ready(function() {
    $('.page-18 .icon-menu').trigger('click');
});

Hopefully this will work (and you will not need to manually add any lines of code to your home page which will be overwritten when publishing).

  • Registered: 2017-12-05
  • Posts: 4

Re: Customise Boma theme Question [SOLVED]

Hi Steven

Works perfectly.

Many thanks for your help.

  • Registered: 2012-12-16
  • Posts: 950

Re: Customise Boma theme Question [SOLVED]

You're welcome!

I'm glad it works for you. Thank you for letting me know.