Mbrsolution

Revision Update: Added some more information and improved the wording.

CataBlog Add Columns Tutorial Part 6 shows you how to add columns to your CataBlog items on your website.

Hint: Always work with a child theme and not the parent theme.

Important information: Catablog works well with Suffusion theme. Has a problem with WP Socializer plugin version 2.4.4, lightbox won’t work.

Hint: Click on the images below to view a larger image.

1 ) I am going to use Twenty Eleven theme as an example. You can use your own theme. See image below.

 

2 ) You can use an ftp program or you can use Cpanel from your server to upload the files. First we need to create a folder and give it a name. I created a folder named twentyeleven-child and assigned 755 permissions.

To learn more about file permission please read the following link Changing File Permissions.

Option: If you zip your files on your computer and then upload them to your website from your admin panel then you don’t have to do it manually.

I just wanted to show you the manual method as well. See image below.

 

3 ) I created two files on my computer style.css and functions.php (optional).

3.1 ) style.css

In your style.css file add the following:

/**
* Theme Name: Twenty Eleven Child
* Theme URI: add a website here
* Description: add some information here
* Version: add a version here
* Author: add your name
* Author URI: add some information here
* Template: twentyeleven
* License: add a license here
*/

/* import layout */
@import url(“../twentyeleven-child/style.css”);  <—-this is what imports the style from the parent theme. It is important that you get the path correctly or else it will not work.

3.2 ) functions.php ….. For the function.php file you can read more about it at wordpress.org.

Important: You don’t need to add the functions.php file but it is good to have it ready just in case later on you decide to add some function to your website.

Dragged the two files into the child theme directory “folder” on the server and assigned to each file the following permissions 644. See image below.

 

4 ) You might have to refresh your browser to view the child theme you just created. Activate the child theme. See image below.

 

5 ) Select the child theme to edit from Appearance >> Editor ….Select theme to edit: See image below.

Hint: This is where you will add any extra style to modify your website.

 

6 ) This is what your CataBlog gallery might look like on your website using the following shortcode.

[catablog_gallery id="57" limit="6"]

Make sure that you have opened your website on another browser tab or a browser window. See image below.

 

 

7 ) Copy and paste the following code into your style.css file. We are going to add two columns.

// try a number below 50% if you don’t want to change padding, margin or borders.

html body .catablog-catalog .catablog-row {
  float: left;
  width: 47%;
}

Optionally this would have been done on your computer before uploading. But I wanted you to see that you can edit the file from your website admin panel and add what ever code you want to implement. See image below.

 

 

8 ) Navigate back to your browser and refresh to view the results. You can now see two columns. See image below.

 

I hope you enjoyed this little tutorial.

If you have any questions please let me know.

Enjoy

More coming soon…………