Announcement

Collapse
No announcement yet.

Creating a Page with Image grid

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Creating a Page with Image grid

    I am using this theme in our live store and I am trying to create a new static page for the category roots. I just want a grid of category icons similar to the home page of the levels theme (the row of three mid page). I have added the images to the ready theme image section, and crated a page with the mvt items. However they all just show in a vertical line. How do I get them to span three to a row (medium-one-third). I am unclear where to apply css and what codes to use in this theme.

    Any help would be great.

    Marshall
    http://www.hmcdisplay.com
    http://www.churchonwheels.com

  • Can you post a link the page?
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Yeah, here is the dev site page that I was working on . I have pulled all images and was working on just one image for now too see if I could get the css to work.

      http://dev.churchonwheels.com/COWSTORE.html

      I created the image with ready theme and added the following classes to it: column whole medium-one-third align-center sfnt-ad
      Marshall
      http://www.hmcdisplay.com
      http://www.churchonwheels.com

      Comment


      • Wrap those DIVs with another DIV assigned the class of 'row'
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • Right, good grief. Thanks. I have one more probably stupid easy one. Now I have three rows columns working. The only thing I do not see in the CSS is a way to add a space or /br under each image. So the same space that is on the left and right padding but bottom.
          Marshall
          http://www.hmcdisplay.com
          http://www.churchonwheels.com

          Comment


          • I notice on new pages I create to there is a massive amount of white space between the header and the content blocks. This is named <main> why is that there and how should I be using the main block or moving it?
            Thanks,
            Marshall
            http://www.hmcdisplay.com
            http://www.churchonwheels.com

            Comment


            • Within your DIV and below the A tag, add
              HTML Code:
              <span class="h-breaker"></span>
              this will add the space you are looking for. As for the page layout, all your content should be within the MAIN tag. Check your page layout against one of the static pages like PRPO.
              Matt Zimmermann
              Director of UI/UX Standards and Theme Development
              / Miva, Inc.

              Comment


              • OK, can the span be added to the image on the ready theme side. Most of the html is generated with the ready theme block. On the page code, I just add MVT blocks and the system does the rest. I can add the span in the div block. I'm just wondering if that can be added as a function to the image ready theme item.
                Marshall
                http://www.hmcdisplay.com
                http://www.churchonwheels.com

                Comment


                • It does need to be a separate elements from the image MVT tag.
                  Matt Zimmermann
                  Director of UI/UX Standards and Theme Development
                  / Miva, Inc.

                  Comment

                  Working...
                  X