Jump to content
Phil P

Creating Tile like box's

Recommended Posts

Phil P    0
Phil P

Hi All,

 

Is there an easy way to make windows 8 style tiles for my home page? I'm seeing a lot of sites going that way and done right you can get a really smooth modern web page.

 

I would like to end up with a nice size feature bar with 5 different size tiles.

 

So far I have this http://www.helpmewithmypc.co.uk

 

 


Phill

@helpmewithmypc

 

http://www.helpmewithmypc.co.uk
 

WordPress 3.5.1


PageLines Framework Professional 2.4 with Base Theme 1.02


 

 

Definition of insanity: doing the same thing over and over again and expecting different results, Albert Einstein

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

I'm not familiar with Windows 8's tiles.  Could you share an example of what they look like, perhaps a link?

 

Are you by any chance referring to an accordion slider with different size slides?

 

Thanks for your kind cooperation and understanding.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Phil P    0
Phil P

Hi,

 

Well I've found one of the showcase sites that kind of looks like I want http://eventsbyfortune.com/ also (sorry about the site but its a good example!) http://www.figleaves.com/uk/ on there home page you have photo's with text and look like tiles on the page that are clickable.


Phill

@helpmewithmypc

 

http://www.helpmewithmypc.co.uk
 

WordPress 3.5.1


PageLines Framework Professional 2.4 with Base Theme 1.02


 

 

Definition of insanity: doing the same thing over and over again and expecting different results, Albert Einstein

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi Phil,

 

I think the solution you need is our Grid.  This uses shortcodes, but nothing stops you from adding your own div with class or ID to customize the look and feel of it.

 

Additionally, you can nest one grid within another grid element.   This would allow you to have, for example, three boxes across, and the right-most one, could have two vertically stacked boxes as in the example.

 

Please see http://demo.pagelines.me/tools/  and this wonderful documentation tells you all the tips and secrets to achieve your goal. http://support.pagelines.me/docs/miscellaneous/grid-system/

 

Let us know if this helps.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Claude203
      By Claude203
      I would like to format the Testimonial Box for mobile devices, considering that the container is a dynamic section. 
       
      Aside from targeting the specific elements in the @media section, is there anything else I could use to affect the dynamically changing shape?
       
      @media only screen and (max-device-width: 700px) {
      ?
      ?
      }
       
      Thank you!
    • gansoma
      By gansoma
      Hi! There is any option to link a box to another part of the same page ?, I have solved it in the case of tittles but I can't make it run with the boxes.
       
      Thanks!
    • kulmetehan
      By kulmetehan
      Hi guys,
       
      Is not being able to edit the font size also a known bug?
       
      See the footer on my website homepage: http://betercv.nl
       
      Here you can see that the textbox on the bottom left corner has a logo and some text in it. Even though I've set the text size (in the text box) to 14px, it keeps staying on 22px.
       
      I tried some css but I'm not so great in that.
       
      What I did was:
       
      Set the styling class of the textbox to: ".footertb"
       
      And then I put the folowing line in to the editor:
        .footertb {   font-size: 14px; }   But it didn't work. Any idea what I'm doing wrong and what I can do to fix it?
    • jacobtippett
      By jacobtippett+
      Hello,
       
      I am trying to get a MediaBox clickable, which I was able to do, but when doing so it added a large amount of unneccesary padding to the top and bottom of the image. I am trying to get it very close to the navigation bar. I can't seem to figure out how to fix this: [attachment=1670:Screen Shot 2013-10-19 at 1.36.19 AM.png]
       
      The code I am using is:
       
       
      <a href="http://therefinerychurch.org/about/vision"> <img border="0" src="[pl_site_url]/wp-content/uploads/2013/10/visionhome.jpg" alt="Our Vision"></a></p>   I am putting that code in the embed HTML section of a MediaBox.   Website: http://therefinerychurch.org   Thanks!
    • Jinfiltration
      By Jinfiltration
      Hi,
       
      I need to center the words in the menu bar and the dropdown box, may i know where should i edit in CSS?
       
      i did some edit on the css file, i finally moved the dropdown box to almost center, but i couldnt move the word in the menu to the center.
       

×