XF 1.5 Grid View?

[Hecter]

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?

 

[Hecter]

I should say this is in my template files.

 

[Paul B]

Which template is it?

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

 

[Hecter]

Which template is it?

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

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.

 

[Paul B]

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.

 

[Hecter]

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.

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

 

[Hecter]

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.

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.

 

[Hecter]

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?

 

[Paul B]

there is a lot of stuff in that extra.css now not sure if that would affect the speed of the site?

It won't have any noticeable effect.

If you want to use xen:require, create it as a separate template and call it that way.
See point 6 here: https://xenforo.com/community/threads/frequently-asked-questions.5183/#post-181112

 

[Hecter]

It won't have any noticeable effect.

If you want to use xen:require, create it as a separate template and call it that way.
See point 6 here: https://xenforo.com/community/threads/frequently-asked-questions.5183/#post-181112

Got it thanks.

 

[Hecter]

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:

<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

.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;
}