Updating JoomlaBamboo Grid3 to Grid4

sedinaz

I have a client using Grid3 - yes, we installed this maybe 4-5 years ago! I have finally convinced them to purchase Grid4, hoping for an easy update path. We just purchased it, under eric.marcus@narbha.org. However, I am confused about how to go about updating it for him. Documentation says Grid4 is a child theme of Build.r. I don't believe I ever uploaded Build.r, just used Grid3. In any case, can you please tell me the steps to move them from Grid3 to Grid4? I downloaded the 10 zip files for Grid4 (don't need the quickstart demo). Here is the current site: https://sedinaz.org/ Thank you, Theresa Stacy-Ryan for Eric Marcus

Joshua-M

Hi,

You should start with the full backup of your website.
Then you have to download and install Buildr template, then activate Grid4 child theme, it's described here:
http://docs.joomlabamboo.com/joomla-template/buildr-documentation/recreating-the-demo/grid4

Let us know if anything is not clear.

Cheers
Joshua

sedinaz

Joshua-M
Thank you, Joshua. I hope to go through this process in the next couple of weeks. I'll let you know how it goes.
BTW, the documentation has a section on installing the child them with a link to that process, but as I first looked at the Build.r documentation page earlier in the week, all I could find was Starting with a fresh version and thus felt it didn't serve my needs.

Stay tuned!
tmsr

Joshua-M

sedinaz
Hi,
Let us know if you encounter any issue.

Cheers
Joshua

sedinaz

Joshua,
Following your advice, I used this documentation page to guide my update of Grid3 to Grid4, including reviewing the Child Theme page you provided:
http://docs.joomlabamboo.com/joomla-template/buildr-documentation/recreating-the-demo/grid4#recreating-the-grid4-demo-site

I've uploaded all related plugins and modules (9 of them) to be sure I was using the latest of these and then the Build.r template package. I assigned the Build.r template with grid4 settings, including assigning grid4 as the child theme. I assigned that theme as the Default.

The result is very, very far away from the styling and layout of my Grid3 theme.
I have screenshots of before and after to share with you, if there is a way I can do that with you.

I've tried to follow along in your documentation. You have front end screenshots but then no screenshot of how to achieve that (esp. for the front page) for the back end. Or am I missing that somewhere?

Basically, none of my layout is preserved, nor any of my styling.
Do I have to re-create every setting (fonts, etc.) manually to get me back to what it was? And how do I go about re-creating my homepage? Do I have to add your demo content just to get back to that?

At this point, I need to restore the pre-update site for my client's sake, but look forward to your help here.
tmsr for Eric Marcus, sedinaz.org

blue_shift

Grid3 is in an earlier era of JoomlaBamboo, built in T3, Grid4 is kitted up from Zen Grid Framework 5. It's a completely different environment so there is no one-click migration - it's another build. My suggestion - if you can load the ZenGrid assets at the same time as T3 (there are a couple plugins) - you can take your time to recreate home page first on a hidden menu item - that way you can deploy your existing modules as you go. (In the template manager, you can tell Joomla to load a different template on selected menu items - one of Joomla's best features.)

Note: ZG is a versatile 'sitebuilder,' kind of like a host; whereas I see T3 templates a crafted solution with the design tightly integrated.

sedinaz

I finally was able to set up a dev subdomain and create a mirror site so I can move forward with the update from Grid3 to Grid4 via Build.r.

Before I get going on this, I need to clarify:
I have a zip folder for both Build.r and Grid4 that I downloaded a few weeks ago from your site. Do I need to install BOTH in order to point to the Grid4 child theme?

Also, you mentioned this in your last reply: "if you can load the ZenGrid assets at the same time as T3 (there are a couple plugins)" - I'm afraid I don't understand this on a technical level to do this. Is it no longer necessary to do this since I will not be working on the live site and thus don't need to do this on a hidden menu item?

I look forward to and will appreciate your help here,
tmsr

blue_shift

sedinaz Here is a link to using the Zengrid Framework v5 (official documentation).

Things to note: the previous version, Grid3, runs in the T3 framework - the new version runs in Zengrid Framework 5. So, yes, both need to be loaded. Before installing the Buildr with Grid4 child theme, I would do the following first:
1. back up your site! (Akeeba now has a quick restoration procedure - very handy)
2. install the Zengrid Framework required plugins and activate them (see documentation)
3. Is your live site front end still running? If so, you can install Buildr. The latest version will include Grid4.

Once installed, create a menu item on a hidden (invisible) menu and assign it to the new template. Here's one of my test pages - note the 'Template Style' field –>

sedinaz

After installing Buildr yesterday, setting the child theme to Grid 4, loading an example-grid4 for the homepage, I spent 5 hours trying to configure that homepage against the current site that uses Grid3. Comparing these two pages will help you understand what I am shooting for.
Current site:
https://sedinaz.org/
Dev subdomain for development under Grid4:
https://dev.sedinaz.org/

I had to change some of the layout to make this work to get it to look mostly like Grid3's homepage. I had to use several custom css changes (with the overlay of the portfolio, etc.), but I feel I am getting close to acceptable now.

However, here are my remaining needs for the homepage I am hoping you can help with.

I couldn't find anywhere in the documentation nor in all the available settings for the theme interface how to upload a graphic logo. I found the place to have a text logo, but I need a graphic logo. In desperation, I finally set that png file in the container background of that section of the page, but it is not linkable nor does it responsively resize for a mobile device - really just an issue on the vertical orientation of a cell phone, but still, this isn't ideal. How can I do this?
For the homepage top-area slideshow: "somehow" this shows up, thankfully, since I can't find there that happens in the event I'd ever need to change a slide - so please tell me where to track that down in Buildr. It "came over" from the Grid3, I guess.
That slideshow doesn't show on mobile devices, specifically the vertical of a tablet or either orientations on the cell phone, so I need to point it to a fallback image for those cases. I can't find out where to upload that image. Please tell me.
I wanted the Search up in the top area, and I did have it for a bit, but it was HUGE and BLOCKY, so I gave up and now have no search offered, as you'll see on the current site. That whole top area was just a bear to correspond between the old and the new.
On a mobile device, I want the "toggle" menu but selecting it just displays a small rectangle in the far right-top corner. It works, but this is not an expected UI. No "hamburger" icon, and the placement is odd. Is this my only option for that kind of menu? I can override it's style with css changes, but before I do that, I wanted to check.

Otherwise, I am happy with the way the page flows on all devices for the rest of the content.

I would really appreciate your help here since I'm 5 hours into this homepage, and I still need to configure the rest of the site. I am hopeful that it won't take too much (styling of the header and addition of sidebar content, mostly), but I really need to wrap this development up soon.

Thank you in advance for your assistance,
tmsr

blue_shift

sedinaz

Graphic logo: place graphic in a custom html module and assign to the Logo position (make sure you select Buildr > Logo). I sometimes give the image a css id so I can adjust in custom css - helpful when tweaking responsive code. (wrap graphic in div id="my-class-name")
Slideshow: look for a module published to the background position; you're currently reading the original. If you like it, great! : ) Scroll down on this Grid4 documentation page, how to create the demo.
In the template settings, the background row may be set to hide on mobile. If so, unclick the 'hide' selectors.
your Grid3 layout has the menu in a higher row. Your Grid4 layout has the menu in the position search is in now. You can change positions and assignments in the template manager to try to recreate it - or discover a new place for search. (Always make a backup before playing around with template settings - but this is just one place where ZG5 is worlds better than anything else out there.) Note: you may need a duplicate menu module - one for Grid3, one for Grid4; you control which appears where from the 'menu assignment' tab of each module. (This is where Joomla beats the heck out of the 'other' major CMS system.
I use an extension called 'ZA Offcanvas Menu' because it works very well. I think JoomForest also has one. I've never liked anyone's built-in offcanvas system.

You're getting there. Looking good.

sedinaz

Thank you. I'll work through your suggestions,
tmsr

sedinaz

I am trying really hard to work through your suggestions, but I can't find what you reference in some cases and time is flying by, so I am back again.
I created the Custom module for the logo and assigned it to the logo position. I then removed the background image for the container and that appears to be working well enough now on a mobile.

I found the slideshow module for the background image. In the template settings, I couldn't find "the background row" at all. I looked again at the module setting and under Advanced Settings -> Module Class Suffix: I found "hidden-phone". I took that off and it is now showing on a mobile - but the layout is trashed for the slideshow and the logo and a grey area now and then the overlay of the portfolio grid was lost.
I finally removed ALL of my custom css to start this over. There is now no overlay of the portfolio grid.

How do I create the Grid4 layout of the homepage that you show in your Grid4 documentation, with the overlay of the portfolio grid, etc?

I went to the Grid4 documentation page. I found the "recreate the demo site and an image for the homepage slideshow but when I followed that arrow, it took me to an "in progress" Highline2 template documentation page and I am just lost.

I couldn't get the mobile menu to work and went to find your 'ZA Offcanvas Menu' but the download link was broken...

Please help me.
tmsr

blue_shift

sedinaz And now you know why one takes a backup before changing template settings. The misdirected documentation page is a moderator issue (I'm 'only' a site developer, like you), so I will send in a bug report or ticket on that.

ZA is on envato http://za-studio.net/en/extension/modules-for-joomla/za-canvas-menu

Definitely a couple things changed, you might want to restore to where you were before this round of changes as you seemed closer. (It looks like a div at the top got switched off.)

Keep in mind - you are likely using your orginal modules from Grid3 in the Grid4 version as well, and some module class suffixes in the T3 version may not have equivalents in ZG.

Also - Grid3 is being maintained, I notice 2018 Grid3 updates on their JB downloads page. And as it is T3 based, this step is playing to JA's strength. Not a layout change but you would be fully updated on Joomla and PHP and you can breathe a little. : )

sedinaz

blue_shift:
I took your advice and did a full backup before today's work.
After another hour and a half making little progress, I stripped out myCustom Script I had used to get the layout closer to the Grid4 I want - thinking that I was doing harm by overriding some Grid4 css, so yes, the div css was removed.

To clarify, I fully intend to remove Grid3 and whatever I can find that was associated with it once I update the full site to Grid4, so unless having the Grid3 elements in this installation is thwarting my efforts to get Grid4 to behave, know that I am not going to try and have both working on the site once I get this done.

So, since I did remove any custom css, then why isn't my Grid4 looking like it should for your Grid4 homepage.

Note that I also realized that custom css for Grid3 may be conflicting, so what you find on the dev.sedinaz.org site right now for the homepage should have no custom css influencing it.

And now - WAIT - I am getting to your last paragraph...:
Grid3 is being maintained, I notice 2018 Grid3 updates on their JB downloads page. And as it is T3 based, this step is playing to JA's strength. Not a layout change but you would be fully updated on Joomla and PHP and you can breathe a little

My entire effort here was to move to Grid4 ONLY because I thought it would be necessary. I had no idea Grid3 is being maintained. If that is going to be compatible with Joomla 4.0 and php 7.X, then YES, I only need to be updating Grid3.

Where did I get the mis-impression that THE update for Grid3 WAS Grid4?

Please bear with me to respond to this to be sure I move back in the right direction. I have a full backup to before I installed Grid4 and could easily take the site back there for a Grid3 update.
tmsr

blue_shift

sedinaz The look alike, but underneath, they are very different.

Grid3 is T3 - which is a JA system that JoomlaBamboo used for a while. T3 is fully maintained - and there is no doubt a well-developed roadmap for Joomla 4. As long as Grid3 is already meeting your needs, it's worth doing this first - then you can report the site fully up to date in terms of framework, hosting platform, speed, and security.

Grid4 is ZenGrid - a JB project; going by the name 'Buildr;' it is not the same, or even similar. It is a great development tool that can free you from the need for a template, its main strength is as a huge toolkit for working from scratch.

The two templates call different custom css files, but there may be module suffixes (say, zentools) that may have matching code in one version but not the other.

sedinaz

Thank you for this clarification, blue_shift.
I am going to return the dev site to Grid3-only and attempt the updates. Wouldn't it be a lovely thought to think it just "happens" without affecting the site structure at all?

I will let you know,
tmsr

blue_shift

sedinaz Don't be shy about using those invisible fields to get support with T3. Afterall, you're paying for it, and T3 is their well-mannered baby.

sedinaz

I returned the site to pre-Buildr status. I uploaded all the latest extensions and plugin for Grid3, then the latest Grid3 template itself. I had to modify the template's tpl -> default-home.php to remove a section I couldn't hide in the Joomla admin's template layout. I had to make several css tweaks using the custom.css, but I have my site back in almost the same state it was.

So I updated the main site in the same manner:
https://sedinaz.org

Not that this didn't take time today, but the effort is completed.

Thank you for your help along the way,
tmsr