Displaying category items in a grid

WPPizza – A Restaurant Plugin for WordPress › Support › General Support › Displaying category items in a grid

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • 6 December, 2014 at 1:58 pm #6466
    kr3t3n
    Participant

      Hi,

      Is it possible to change the layout of the items in the menu, not showing them in a list, one in line but instead having them in a grid?
      Probably just name of the item, thumbnail and price/sizes? And having the option to put 3/4/5/etc items on the same line (as many as the screen resolution fits?) And having the option to try out having the name of the item above the thumbnail or below?

      Thanks in advance!

      Regards,

      Georgi

      6 December, 2014 at 2:01 pm #6468
      Olly
      Admin & Mod

        you can do what you want on that front so edit/use/change css and/or templates

        read the faq’s

        https://www.wp-pizza.com/topic/customising-the-css/
        https://www.wp-pizza.com/topic/editing-templates/

        7 December, 2014 at 1:38 pm #6489
        kr3t3n
        Participant

          Thanks for the quick response, Olly, can you please help me identifying which template file should I adjust (along with the css) in order to make changes on the menu list?

          I am displaying all of the menu items in a single page, would this be the wppizza-loop.php? Sorry for the questions, I’m a newbie and am getting a bit lost while looking at the php code
          Is the css file I need to change the wppizza-default.css?

          Could you give me some pointers on how to amend those to get to a grid, showing the title, thumbnail and prices only (one under the other) in grid boxes? I do realize this is a bit of custom support which you do not have to offer but I would greatly appreciate it!

          Regards,

          Georgi

          8 December, 2014 at 12:58 am #6490
          Olly
          Admin & Mod

            >I do realize this is a bit of custom support which you do not have to offer but I would greatly appreciate it!

            no problem, happy to help.

            essentially it works like this:

            in wppizza->layout you will have selected (under Which style to use (if enabled above):)

            either “responsive” or “default”

            pretty much the only difference between the two being that “respsonsive” will result in the title being above image/prices etc, whereas “default” will put the title next to the image (i.e between image and prices)

            which one of the two is appropriate depends a bit on the number of prices you have etc
            (there’s also a way to kind of make the default become responsive depending on screensize: see here
            https://www.wp-pizza.com/topic/making-the-default-css-responsive/ )

            depending on what style you have chosen the relevant template will be used:
            i.e “default” ->wppizza-loop.php
            if “responsive”-> wppizza-loop-responsive.php

            mostly you should be able to do stuff by just customising the css, so just copy wppizza-custom.css to your them directory and edit/add stuff as required.

            if you DO still need to actually change the templates , copy wppizza-loop.php (or wppizza-loop-responsive.php depending on the above) to your theme directory and edit

            I hope the above explains things somewhat (there’s also a bunch of info in the faq’s btw regarding template editing etc)

            PS: you can also put your custom.css and loop stuff into a subdirectory of your theme called wppizza (depends on how you like things organised).
            just make sure you either put all of them in there or don’t use that subdirectory at all.

            ie. either use /path/to/theme/wppizza/[css|loop] or path /to/theme/[css|loop] .

            13 December, 2014 at 4:24 pm #6608
            kr3t3n
            Participant

              Hi again Olly!

              I tried and played with the code and all I accomplished is to break the wordpress site a couple of times. Can you please help me out in understanding how to amend the template and css?
              I’m working with the responsive template and I want to have a css grid with 3 columns (with buffers/gutters) each being 30% of the container width. I am also displaying all of the items in the menu on a single page and want to order them to appear by category tiers.

              For example if I have 5 pizzas, 8 salads and 4 pasta, the menu would be:
              First a grid with the category title, first one would be salads and then 3 rows with 3 columns each (the last row would, of course, have only 2 items in it).
              Then, on a new paragraph the second category title with the same formatting (rows depending on the number of items in the category) with all of the items in the category
              And then the next category and so on and so on…

              Every box in this grid would be a grid on itself with 3 rows, the article title on the first row, the second row would contain the thumbnail image and the description in the third row.

              I have tried to work with the css and the loop template file but with no result whatsoever. I had actually had to recover the files twice 🙂

              Can you help me out or give me some pointers on what I need to do in order to get to that?

              Thanks in advance!

              Regards,

              Georgi

              13 December, 2014 at 4:33 pm #6609
              kr3t3n
              Participant

                I seem to have forgotten about the sizes/prices in the item grids…They would, of course be in the second row, which makes the total number of rows four:
                1st row: Item name
                2nd row: sizes & prizes
                3rd row: thumbnail
                4th row: description

                15 December, 2014 at 3:28 pm #6641
                Olly
                Admin & Mod

                  for starters (just busy doing other stuff)
                  in a grid something like this (doesnt yet address name,size,img, descr but as a starter):

                  
article.wppizza-article{
width:33%;
border:1px solid #999999;
float:left;
clear:none;
margin:0;
margin-bottom:0;
}
article.wppizza-article:nth-child(3n) {
background: blue;
clear:left;
}

                  probably have to play around with this and perhaps some last child element selectors to clear after the last etc….
                  all pure css though

                  16 December, 2014 at 9:05 pm #6705
                  Olly
                  Admin & Mod

                    also – just bit by bit where and when i can – v2.5.11.8 now also has – within each category displayed – the following classes where appropriate

                    wppizza-article-first
                    wppizza-article-last

                    might come in handy

                    21 May, 2015 at 1:15 am #10070
                    Olly
                    Admin & Mod

                      i know , it’s been months since, but just to mention this here:

                      wppizza version 2.11.9 also has a grid based layout option now – wppizza->layout (though currently somewhat experimental and might need some css tweaking for individual themes)

                      if you wanted the image to be after prices, just edit the wppizza-loop-grid.php (copy it to your themes directory first) moving the thumbnails bit after the prices bit (see comments in file)

                      12 August, 2015 at 10:22 pm #11509
                      sertacekici
                      Participant

                        You are amazing Olly,
                        Thank you for too at all

                      • Author
                        Posts
                      Viewing 10 posts - 1 through 10 (of 10 total)
                      • The topic ‘Displaying category items in a grid’ is closed to new replies.