Tile Configuration, Colors, Sizing

  • Resolved sparkywalk

    (@sparkywalk)


    9 years, 9 months ago

    Hi,
    I am trying out your Beta 1.0 version.

    Is there a way to configure the tiles as follows?
    Tile 1, Tile 2, Tile 3
    Tile 4, NO TILE, Tile 5
    Tile 6, Tile 7, Tile 8
    I want to set up a Home Page Menu that appears this way and have nothing else on the page, except for a background image that highlights the menu, also would like for the menu to be responsive. I am using a metro theme, but it does not have an easy way to configure the tiles to the style I am trying to achieve, so having to go the custom route.

    Also, is there a way to change the color of each tile? I just started using this, so please forgive me if I am asking a silly question. If there is a way, please direct me to the correct area to change the colors.

    One More, is there a way to re-size the tiles individually rather than the tiles re-sizing themselves when setting up a grid? Again, I just started so please forgive me. If there is a way, please direct me to the correct area to change the size of the tiles individually.

    I appreciate your time and look forward to your response.

    Thank you.

    https://wordpress.org/plugins/wp-tiles/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Mike Martel

    (@mike_cowobo)

    9 years, 9 months ago

    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

    Thread Starter sparkywalk

    (@sparkywalk)

    9 years, 9 months ago

    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.

    Thread Starter sparkywalk

    (@sparkywalk)

    9 years, 9 months ago

    well, my code rookieness is showing. 🙂

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

    Thread Starter sparkywalk

    (@sparkywalk)

    9 years, 9 months ago

    Thread Starter sparkywalk

    (@sparkywalk)

    9 years, 9 months ago

    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.

    Thread Starter sparkywalk

    (@sparkywalk)

    9 years, 9 months ago

    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.

    Plugin Author Mike Martel

    (@mike_cowobo)

    9 years, 9 months ago

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Tile Configuration, Colors, Sizing’ is closed to new replies.