Apply colors to tiles

[Arpita_17]

Hi All,

So I have downloaded the template Balboa from: https://www.madcapsoftware.com/download ... templates/

From the home page, I have removed the second image and the text. The home page now comprises of a Header, Image, Search Bar, clickable Tiles and the Footer.
Now, I am trying to achieve the following:
- For the clickable Tiles, I want each tile to have different colour.
- The Image, I want it to appear as background for tiles and the search bar; basically for entire home page, except Header and Footer.

How can I achieve this? Please let me know if you need any further information from me to answer these.

Thanks.

Kind regards,
Arpita

[ArdisRamey]

Hi, Aripta.

You'll want to use the internal text editor (or another text editor) to open the stylesheet StylesForHomePage.css and locate the section that begins with the comment /*++Home Tiles section==*/

To apply styles (like background colors) to each tile, find the block that defines that tile. For instance, to make the background of the second tile blue you'll locate

Code: Select all

div.home-tiles > div:nth-child(2)
{
	width: 16.667%;
	margin-left: 1%;
}

and add the line

Code: Select all

 background-color: #ADD8E6; /* or something */

NOTE: For some reason, the styling for these tiles appears to be applied in 3-tile columns, so that using the method I describe will color all 3 of the center column's tiles. I'm certain there's a way to control each tile individually, and hopefully this information I've presented will get you on your way to finding that answer. I'm sorry I can't get you closer than this.

[DaveMags]

You can fix the entire column problem ArdisRamey mentioned by adding a unique second class to each "home-tiles" div in the html of the home page topic, then use that class and the nth-child selector in the CSS file to style each box. So, find each div with a class of home-tiles and add a second class to each, to distinguish each row of tiles:

Code: Select all

<div class="home-tiles row1>
   <div>...</div>
   <div>...</div>
   <div>...</div>
</div>
<div class="home-tiles row2>
   <div>...</div>
   <div>...</div>
   <div>...</div>
</div>
<div class="home-tiles row3>
   <div>...</div>
   <div>...</div>
   <div>...</div>
</div>

Now, in the CSS, add that background-color style using the new classes instead:

Code: Select all

div.row1 > div:nth-child(1) /* first row, first tile */
{
    background-color: hotPink; 
}

div.row2 > div:nth-child(3) /* second row, third tile */
{
    background-color: orange;
}

div.row3 > div:nth-child(2) /* third row, second tile */
{
    background-color: green;
}

balboa tile colors.png

You'll need nine of the above to make each tile different.

Not sure on the background image off hand. I'd have to dig into the HTML of the page more.

[Arpita_17]

Thanks for your inputs. Can achieve the colours to individual tiles...getting better at using Flare