Saturday, November 17, 2018

Roksprocket 4 Column Grid In Gantry Hydrogen

While working a Joomla! site built with Gantry 5 Hyrdogen template I was having an issue when switching between different column quantities. If I had the columns set to 3 everything was fine; however, when I tried to switch between 3 to 4 columns everything was in one column.

I got around this issue by going into the basic CSS file. This file is located on root/components/com_roksprocket/layouts/grids/themes/basic/basic.css. On line 23 I changed the following:

.sprocket-grids-b-columns-3 > li {width: 33.333333333333336%;width: -webkit-calc(100% / 3);width: calc(100% / 3);}

to 

.sprocket-grids-b-columns-3 > li {width: 33.333333333333336%;width: -webkit-calc(100% / 4);width: calc(100% / 4);}

Once I knew this would work I added the CSS to my custom.css, and set the original “basic.css” back. My override was working fine.

I hope this helps someone else out there…

 

SEO In Joomla 3.X

I often start SEO from an existing website. Here are steps I always perform when starting the task.

  1. Start an Excel spreadsheet with 9 columns
    Page/article, Current URL, Current Title,Current Description, New URL, New Title, New Description, and Notes
  2. Then I go to Google and in the search box itself you type:   site:thedomain     Then hit enter.
    This will bring back the pages that Google has indexed. This will be critical to know so can later remove old URLs in Google’s Webmaster Tools, recrawl the site, and be up-to-date. This part can take a while so you have to consider this could double your time spent on the job, so be prepared to bill for it or you will be sorry.
  3. In Joomla you will need to set up the URL to be Search Engine Friendly. In the Administrator area go to Global Configuration >> Site >> Search Engine Friendly URLs ( turn this on), Use URL Rewriting ( turn this on). These changes will require you to change your htaccess.txt and change it to .htaccess. I don’t have it set to “yes” in my  image below, but turning on “Add Suffix to URL” will give the page the “.html” at the end.
  4. I prefer to do a lot of the rest in the menu item. The “Browser Page Title” and the “Alias” is where item #2 from the above image will show.
  5. Staying in the Menu item I move over to the “Metadata” section to add my “Description”. This is part #3 in the upper image.
  6. Here I would rework my Excel spread sheet my making sure my new titles are less than “54” characters long and the description is less that 134 characters long. The name of the page should include the service or search term you want to use for that page. I use Wordcounter.net to determine how many characters I have in my new titles and descriptions.
  7. Next go into Google Webmaster Tools and remove the old URL’s that you won’t need anymore. Click the “Temporary Hide” button, put in the URL, and Google will do the rest.
  8. I don’t always add Sitemaps, but here is where you can do this in Google’s Webmaster Tools.

I meet with NOVA JUG recently and the presenter Dorothy had a bunch to offer. Some of the plug-ins she mentioned.

She also really talked up this book by Simon.

This site for analysis of a website. https://en.ryte.com/

For a security update the group discussed changing a setting to not send the password to a user in plain text.

https://www.joomlashack.com/blog/joomla/passwords-emails/

I hope this helps someone else out there…

 

ChronoForms ChronoConnectivity 5 Example

The real benefit to Chronoforms is it is FREE.

I start with installing both ChronoForms and CronoConnectivity from Chronoengine. Go into Chronoforms and create a form. I started one here for customers. I wanted to keep their name, website, and password list. I started with a form called Customers.

After the designer elements of the form were finished  I did not go into set up yet. I went back to the “Forms Manager”, checked the “Customer” form and hit “Create table”. I ended up using the standard setting.

Now I go back into the form and add a couple of pieces to the “Setup” tab. In the “on load” section add “HTML (Render Form)” and “on submit” area add a “DB Save” from the Data Management elements.

You will now be saving the data to the database.

In ChronoConnectivity click “New” credential Manager. I am calling mine “customeredit”.  The Connection Name I called “customeredit”, and set published to “yes”.

Next click on “Models” and enter a new Model. I titled mine “customered” for customer edit. Use the dropdown to select the table where you stored the data from the form.

On the “Front List” tab Click on “Settings”. Select the display type as “Table”. The “Columns list” is the how the data is displayed when it is returned. The breakdown of the columns list is this:

customered.domain.DOMAIN = the model name . the database column name . the heading of the column ( you can make these up.)

The “Sortables” allows this column to be sortable once it is displayed.

On the “Actions” tab click “edit”. The form event will be the name of the form and the action. I called mine “CustomerEdit” and the action is “:load”. I don’t have this form created yet so we will do that next.

Before we leave this connection we need to set it permissions and that is to make the “view” allowed for the public so we can see it.

Go back to Chronoforms, check “Customer” our original form and hit the “Copy” button. Rename this copy “CustomerEdit”. This is what the the “Form event” is looking for.

Go into the form “CustomerEdit” and click on “Designer”

Click on the “Edit” button and set the “Field Name” and the “Field ID” for this “First Name” element to be “customered[firstname]”. This will tie the data coming over to this form together, so the firstname parameter will fill in the “firstname” field. Do the same with the rest of the elements. I also put a hidden field to collect the ID number.

Next go to the “Setup” tab. Add a “HTML (Render Form) element in the “On load” section. From the “External Apps” menu drag a “Connection Action”

Lastly add the name of the connection from ChronoConnectivity. I used the name “customeredit”. The Connection action is “save”.

You can create a menu item for the Form and the Connectivity View to see it all in action .

I will upload a zip file with the forms, connection, and database extract so you can use what I have working. It is easy to take my form and “Restore” it to your Chronoform and do the same thing with the Chrono Connection. The database table is easy to import a single table, and in my zip I have just the one table.

chronos_example_full

I am working on a Chronoform / Connectivitiy version 6 tutorial. Version 5 wasn’t easy to understand and version 6 is looking to be just as complicated. Version 6 does handle the database input better.

I hope this helps someone else out there…

 

Google Tag Manager In Gantry 5 Hydrogen

Was asked by a customers marketing company to add Google’s Tag Manager to their clients website. I wasn’t currently using Google’s Tag Manager, so I decided to look into and apply to my site running a Gantry 5 Hydrogen theme.

I tried just adding it in the “Settings” section of my template. The “before body” portion worked; however, the code for the head section was showing up on the page and not hidden.

A quick Google search lead me to this page where someone built an Atom to handle this.

https://translate.google.com/translate?hl=en&sl=fr&u=https://www.en-toutes-lettres.fr/services-web/joomla-news/358-google-tag-manager-sur-gantry5&prev=search

This Atom was awesome. I had to use it both the home and default. They suggest just putting in the base outline, but that didn’t work for me.

I hope this helps someone else out there….

 

Free Joomla Site And Hosting – Joomla.com

Got a great tip last night from the developer at BMoreCreative inc. He was having issues installing a Beta version of Joomla 4 for development purposes. Then he discovered Joomla.com not .org.

I decided to give it a try myself. It was super easy. I provided an email address and what I want the site to be called. Received an email with the activation link, created a password, and I had a “mysite.joomla.com” hosting, cpanel package ready for me in seconds.

It installed a 3.8 site but they provided me with a CPanel so I plan to upgrade to Joomla 4 to get ready for when it becomes the main distribution.

They also offer up a free Gantry based template called Cloud 3. I installed this since I do love Gantry. You can download it here.

https://www.cloudaccess.net/cloudbase-3.html

I hope this helps someone else out there….

 

ACYMailing Error 500 Layout listing not found.

I wanted to take this component for a test run. It is always on the top row of “Install from Web” tab. It is a hefty install. When finished I clicked on “Lists” to create a list and got the following error:

Error 500 Layout listing not found.

I googled and didn’t find a quick solution other than “did you re-install it”. I ran it again from the “Install from web” tab, and got the same error. I went to the site to download their latest package. It comes down as a .gz. I thought I needed to unzip it first and I did. I didn’t need to do that. I just use the .gz (gun zip).

I was now able to create a list and it retained my only user…me.

I found this article for using Chronoforms with ACYMailing to get subscribers. It worked great. Just a name, email field, and a submit button combined with an PHP script. The user gets an email to confirm they click on the link in the email and ACYMailing took care of the rest.

https://www.acyba.com/acymailing/107-acymailing-chronoform.html#php

I hope this helps someone else out there…

 

Joomla Site Clean Up Tools

Here is a list of “Tools of the Trade” according to Ben Martin at Sucuri Security.

  • Filezilla (FTP Client)
  • NoScript (Script Blocker)
  • VirtualBox (Virtualization Tool)
  • ublock Origin (Ad Blocker)
  • PHPMyAdmin or Adminer (Database Management)
  • User Agent Switcher
  • Support Forums (ie: https://forum.joomla.org)
  • OSSEC HIDS (Server Monitoring)
  • SSH / BASH connection

I hope this helps someone else out there…

 

Using An Image For Joomla Search Button

This should be a really simple thing, but does seem to be. I wanted to use an icon for my search button. In the module I set “Use an Image” to yes, but this did nothing. My first search lead me to this page.

https://forum.joomla.org/viewtopic.php?t=282140

This did not work for me.

This page finally got me closer to what I needed; however, I really don’t like using a .gif file. The format is not as smooth as other formats.

https://forum.joomla.org/viewtopic.php?t=728841

I am using Gantry 5 Hydrogen theme and simply adding the “searchButton.gif” to the “/g5_hydrogen/images” folder got things working quickly.

I hope this helps someone else out there….