Dec 192013
 

Last Updated: December 26, 2013

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

Revision Update: I have correct an error on the code in step 56.1, thanks to Sylvia for pointing it out.

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

Information: Catablog works well with Suffusion theme. 

CataBlog Add Columns Tutorial Steps:

  1. Gallery Basic Tutorial Part 1
  2. Options Tutorial Part 2
  3. Shortcode Tutorial Part 3
  4. Shortcode Tutorial Part 4
  5. Shopping Cart Tutorial Part 5
  6. Add Columns Tutorial Part 6
  7. Advanced CataBlog Tutorials

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

catablog-select-theme

55 ) 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.

 catablog-create-child-folder

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

56.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/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.

56.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 images below.

catablog-upload-files

catablog-upload-files-part2

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

catablog-activate-child-theme

58 ) 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.

catablog-edit-style-new

59 ) 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.

catablog-view-new

60 ) 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.

Hint: Always click on Update File after you add the code.

 catablog-paste-code

 

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

catablog-columns-view

62 ) What if we want to add another column? Edit the following code and add it to the child theme as you did in Step 7 above.

Hint: Always remember that you are working with the width of your front page. Try not to add more columns than what your page width permits. 

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

You will see 3 columns with the same amount of images displayed. You will also notice there are 2 pages. See image below.

catablog-3columns-6images

I hope you enjoyed this little tutorial. Click on Advanced CataBlog Tutorials to continue.

If you have any questions please let me know.

Enjoy

LinkedIn
Manuel Ballesta RuizManuel Ballesta Ruiz has written 237 posts. He can be followed on Twitter.

  18 Responses to “CataBlog Add Columns Tutorial Part 6”

  1. Great tutorial and it helped me a lot, as I was fighting the very same puzzle, f adding multiple columns. Thanks!

  2. Thanks! I used the shortcode “gallery” and it does create columns.
    The gallery now looks like this: http://oi40.tinypic.com/mrelqv.jpg

    But how do I make it so that:

    1. The distance between the thumbnail and the details is smaller? Something like this: http://oi41.tinypic.com/dy4nx3.jpg

    2. By default it seems (as seen in the screenshot from above (1)) that all items are aligned to right. How can I make them be left aligned?

    2. How can I have the same link on the thumbnail as the one on the dog’s name? SO that when the image OR the dog’s name are clicked the link of the attached page is displayed, NOT the image. Possible?

    Thanks!

    • Hi Val Vesa, the reason why your description is a bit distant from the image is due to the way your theme is design. It is a matter of tweaking your CSS file to reduce the distance.

      In regards to your 3 question read this tutorial it will help you with your question.

      If you have anymore questions please let me know.

      Kind regards

  3. I fixed the other things, but the distance between thumbnails and details is way too large: http://oi43.tinypic.com/axzbz6.jpg

    What do you mean is theme CSS, can it not be tweaked from the catablog CSS?

    • Hello Val, the CSS code you might want to look at is something like this

      .catablog-description {
      margin: 0 0 0 120px;
      }

      You will have to change the 120px to something to suit your needs. Remember that in your theme the code might be different. The aforementioned is just an example.

      I hope this helps you.

      Kind regards

  4. This is within the CSS file of the plugin right?

    • Yes that is correct. However if you change the code in the plugin when ever you update the plugin you will loose your new configuration. It is always best to create a child theme and work from there.

      Kind regards

  5. Yes, I will do a child theme.
    Problem is that nowhere in the catablog.css is there such a code:

    .catablog-description {
    margin: 0 0 0 120px;
    }

    I DID find this though:

    .catablog-gallery.catablog-row .catablog-description {
    display: none;
    margin: 0; !important;
    }

    So I am kind of lost.

    • Hi Val, create the child theme and once you start working with your child theme then look into your code. I always work with Firefox and I use Firebug extension. It is very good when it comes to troubleshooting issues like yours.

      Kind regards

  6. Hello,
    i am using WordPress+Catablog for making a site with a gallery. I tested it in local and all was fine. When i replicated the site on the new domain, i am experiencing this issue:

    http://www.marcopoloweb.com/?page_id=211

    As you can see, this is a gallery of only one image. All those strange horizontal lines were not present when i tested the site in local. Nothing changed, but i can’t understand why they appear. I tried different images, but those lines won’t disappear. maybe i’m missing something? TY for all the help you will provide ;-)

    David

    • Hello David, thank you for your question.

      I had a look at your website. First of all I would change your permalink structure. Once your permalink structure is set up nicely then we can look at your issue. To change your permalink structure have a look under Settings >> Permalinks…. you can read about it in my tutorial… have a look at step 6

      One question what is the difference between your local install working great and your live website not working? For example:

      1 ) Are they both using the same theme?
      2 ) Are they both running the same plugins?
      3 ) Are they both running the same WordPress version?

      Kind regards

      • Ok, i changed the permalink structure (now per postname). In The local installation there are no difference in themes, plugins or wordpress version.
        How can i understand why the images are shown with this lines? I noticed also that the lines change on the rollover…what can be the problem ?

        • Hello Davide, you did not answer my previous question. It is important that you share with me the following so that I can help you further.

          What is the difference between your local install which was working and your live website that is not working? For example:

          1 ) Are they both using the same theme?
          2 ) Are they both running the same plugins?
          3 ) Are they both running the same WordPress version?

          Kind regards

          • Local live website have no differences at all…same theme, same plugin, same version. I replicated all the same. The only thing is different is the address of the site in the wordpress setup ;-)

          • Hi Davide, can you uninstall CataBlog and make sure it is deleted and then reinstall it again but make sure that you create a backup of your CataBlog data.

            Kind regards

 Leave a Reply

(required)

(required)

five × five =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>