Tuesday, March 19, 2024

Optimizing Your Site with Mobile Joomla! – Part III

This is part three of a three part series on using Mobile Joomla!, which is a very powerful component for Joomla! web sites. Part one provided a background on Mobile Joomla! along with installation information and how to apply the Elegance template. Part two looked at the Template Manager, updating the logo image, working with theme colors and how to use the modules. This final part will cover how to do advanced customizations.

For examples, please see GoozerNation.com and FSCgroup.com while on a smartphone. In the first article, I stated that the standard version of the site appeared when viewed on an Amazon Fire. In the second part I stated that the mobile version started to appear when I viewed FSCgroup.com on my Fire but that Goozernation.com still displayed the standard version when viewed on my Fire. Now, I must state that both sites display the mobile version on the Fire. I’m not sure what caused the difference, but both views look very good. So, no harm, no foul. Perhaps it had to do with caching.

Advanced Customizations

Before we start on this section, let me explain how my front page is set up. It’s a blog that shows the intro text to several articles, which have a Read More and Comments. When this translated to the mobile version, the Read More and the Comments links carried over. The Read More link worked just fine. The Comments link didn’t work so well. To fix this, I had to dive into the CSS.

Removing the Read More and Comments Links

To tweak the Mobile CSS, go into the Template Manager and choose the Elegance template. Then open it for editing. Then scroll all the way down to the bottom of the CSS file until you see this:

JComments div.jcomments-links { text-align: right; }

That is the code that makes the Comments link appear. To remove it, put comment marks around the code and then add in one short line of code as follows: /* JComments div.jcomments-links { text-align: right; } */ .jcomments-links{display:none;}

This will result in the Comments and the Read More links disappearing from the front page; and in my opinion it provides a cleaner appearance. Visitors can still click through to the full article by clicking the article title. If comments were written on that article from the standard site, those comments will be seen at the bottom of the article. In my next article, I will discuss the Kunena Forum extension and the associated Mobile extension, which has now replaced my JComments and works like a charm.

Removing Double Titles

There was one last tweak that I had to make to the Elegance template before I was 100% happy with it. The problem was that article titles were appearing twice when visitors clicked through to the full article. The cause of this problem was because of my Article settings, Menu settings and the Global Configurations. I have it set so that article titles appear on my menus and within the articles. That’s what was causing the double titles to appear in the mobile version. I did not want to turn off the title articles from the standard version, so I was forced to go into the HTML/PHP of the Elegance template. The particular file in question is found here:

templates/mobile_elegance/html/com_content/article/default.php I then removed this block of code:

And BOOM! The double titles were gone from the mobile version. I was pretty happy with the entire process.

Mobile Joomla! Forum Support

On the one hand, Mobile Joomla! is easy to set up and install. On the other hand, there is a slight learning curve on how to make adjustments to your particular site. And that is to be expected. Joomla! is not a cookie-cutter, one-size-fits-all kind of CMS. There are tons of third-party extensions, plug ins and templates; and not all of them are going to play nice with each other. This is something very important to understand before you pay for the Elegance template. Be prepared to take your time, understand that you might have to tweak the code, and it’s good to know that the Mobile Joomla! developers are available to help you in the forums.

I would not have been able to do what I did without help from the Mobile Joomla! developers. They usually responded to my posts within 24 hours and if they didn’t have the correct answer the first time, they always came back a second time with a better answer. I was very happy with the end result.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured