Tile Configuration, Colors, Sizing

Hi @sparkywalk,

I like the idea of having gaps in the tiles. There is no way to do this out-of-the-box, but one can get creative ??

If you are only displaying a fixed set of posts on the tiles (as in a menu), you can simply set a dummy post/page to be displayed the place of the to-be-empty tile. Now the tile will have a id of tile-{$post_id}, so you can target it with CSS and give it an opacity of 0.

As for the colors of each tile, WP Tiles uses the colors you set in the admin panel as the background for tiles that have no image. You can also pass them in the shortcode, separated by comma’s (eg. [wp-tiles colors='#ffffff,#330000']).

As for the resizing – I am not sure what you mean exactly. The tiles will always resize to the width of the parent container – so if your site is 800px wide, they will always stay within those bounds, using the template you set up in the back end.

Cheers,
Mike

Thanks, Mike.

I managed to get the tiles arranged by creating my own custom tile layout called “menu”, but not sure of how to create a dummy tile, so I just created a dummy page that the middle tile goes to for now.

In addition, I tried several different ways of trying to get the colors to change based upon your write up, but could not. I also want to put specific text and an icon (just like windows 8 metro tiles) on each individual tile, but don’t know how to get there yet.

I know to enter the code in the Text (or code)portion of my new home page with the other wp-tile programming. I will be using this color numbering scheme, In addition I am using a child theme (Avada Child theme from Envato-Themeforest) that does not have much content in the sytle.css file. I am still learning code and it sure would help if you could let me know what this all might look like and any help you could provide in achieving all this would be awesome. I would be willing to pay you a bit if that is appropriate as well.

I see what you mean about the sizing of the tiles, and opened my new home page in a separate window and re-sized to see the responsive sizing work great, which is very cool. Exactly what I was looking for. Now if I can finish up the issue with the dummy tile, color, adding text and icons, and adding to the .css file, I will be in good shape. ??

I appreciate your response, look forward to your next response, and appreciate your consideration in helping me with my code woes.

Best Regards, Mark.

well, my code rookieness is showing. ??

Here is the link for the colors:
https://flatuicolors.com/

Hey Mike,

Any update would be appreciated. Sorry to be a pain…

?? I am thinking of creating some of my own tiles in adobe cs and add them to my images with links and add them to some sort of responsive container to get the layout I want…

Thank you.

Hey Mike,

Due to the lack of response, I deleted WP-Tiles and figured out a way to do this on my own for my specific needs. I do appreciate your initial feedback.

Best Regards.

Hi Mark,

Good to hear you figured out a way to do this.
For what it’s worth (Googlers reading this), you can make the dummy tile transparent by using the ID of the post to target it in the css. The tile will have the id #tile-{$post_id}, so if your dummy tile has the ID of 81, you can target it in your css like this:

#tile-81 {
    visibility: hidden;
}

You can also use opacity: 0.

Cheers,
Mike