1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Grid View?

Discussion in 'Styling and Customization Questions' started by Hecter, Jan 31, 2016.

  1. Hecter

    Hecter Member

    I'm trying to add grid view into pages that I have created, I did this before so I'm effectively copying and pasting the code across from an old site to my new site but on the new site the code does not display properly.

    <ul class="indexgrid">
    <li class="textbox"><h2>Header Text</h2><p>Some information pertaining to header text.</p></li>
    <li><a href="{xen:link /link to content/}"><img src="link to image" /><h3>Blah</h3></a></li>
    <li><a href="{xen:link /link to content/}"><img src="link to image" /><h3>Blah</h3></a></li>
    <li><a href="{xen:link /link to content/}"><img src="link to image" /><h3>Blah</h3></a></li>
    <li><a href="{xen:link /link to contents/}"><img src="link to image" /><h3>Blah</h3></a></li>
    <li class="textbox warning"><h2>Header Text 2</h2><p>Text pertaining to header text 2</p></li>
    </ul>

    This should in theory put the images next to each other in a grid view until the space runs out then it drops the image down a level and again the images go next to each other. Before I had this 2 images side by side then it should jump down and another 2 side by side.

    Am I missing something?
     
  2. Hecter

    Hecter Member

    I should say this is in my template files.
     
  3. Brogan

    Brogan XenForo Moderator Staff Member

    Which template is it?

    Have you included the necessary css template which contains the indexgrid class?
     
  4. Hecter

    Hecter Member

    No, damn I knew I shouldn't post with a hangover, and now I can't find the bloody css.

    The template is custom made happy to PM it to you but would prefer to keep some of this stuff away from the public eye at the moment.

    Apologies for putting this in the wrong area as well.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    You just need to add the css directly to the template using style tags, or create a new css template and include that in your template.
     
  6. Hecter

    Hecter Member

    I've lost the css part so looks like back to the drawing board.
     
  7. Hecter

    Hecter Member

    I found the css file for the grids, how do I call it into the pages? I tried
    <xen:require css="link to css/style.css" />

    But its not affecting it.

    I notice there is this: css_main_template_top but I cannot find where this is on my old site.
     
  8. Hecter

    Hecter Member

    I added it to the extra.css for now and its working but there is a lot of stuff in that extra.css now not sure if that would affect the speed of the site?
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

  10. Hecter

    Hecter Member

  11. Hecter

    Hecter Member

    http://www.clubsgaming.com/forum/home/

    Got it the way I want it, but I'll be damned if I can center that top image, plus I cannot get the top image to rotate the way it should either.

    Code on the template:
    Code:
    <ul class="rslides">
        <li><img src="styles/default/seasons/general/join.png" alt=""></li>
        <li><img src="styles/default/seasons/general/slider1.png" alt=""></li>
        <li><img src="styles/default/seasons/general/slider2.png" alt=""></li>
    </ul>
    css
    Code:
    .rslides {
        position: center;
        list-style: none;
        overflow: hidden;
        width: 75%;
        padding: 0;
        margin: 0;
    }
    
    .rslides li {
        -webkit-backface-visibility: hidden;
        position: center;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }
    
    .rslides li:first-child {
        position: center;
        display: block;
        float: center;
    }
    
    .rslides img {
        display: block;
        height: auto;
        float: center;
        width: 100%;
        border: 0;
    }
    
     

Share This Page