Color on ej-tile

[haryzad]

Hi syncfusion team

Can you help me on how to change the ej-tile color, basically currently all the color follow the theme color;

how i can customized the color.

my code as belows, this code reflect the screenshot as 

<e-menu-item url="" text="Bimbingan" image-url="../icon/guide.png">

                <e-menu-child-items>

                    <e-menu-child-item>

                        <e-content-template>

                            <div class="e-tile-group">

                                <div class="e-tile-column">

                                    <ej-tile id="CourseList" image-position="@TileImagePosition.Center" tile-size="@TileSize.Wide" text="Senarai Kursus" image-url="../images/tile/windows/course.png" mouse-down="CourseList"></ej-tile>

                                    <ej-tile id="RegisterCourse" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" text="Daftar Kursus" image-url="../images/tile/windows/register.png" mouse-down="RegisterCourse"></ej-tile>

                                    <ej-tile id="AttendanceList" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" text="Senarai Kehadiran" image-url="../images/tile/windows/check.png" mouse-down="AttendanceList"></ej-tile>

                                </div>

                            </div>

                        </e-content-template>

                    </e-menu-child-item>

                </e-menu-child-items>

            </e-menu-item>

[Selvamani Sankarappan]

Hi Haryzad, 

 

Thanks for contacting Syncfusion support. 

 

You can customize the tile theme color using css-class property of tile component. Please refer to the following code example: 

 

[cshtml] 

<div class="e-tile-column"> 

        <ej-tile id="tile1" image-position="@TileImagePosition.Center" tile-size="@TileSize.Wide" image-url="http://aspnetcore.syncfusion.com/images/tile/windows/weather.png" text="Weather" css-class="tile1"></ej-tile> 

        <ej-tile id="tile2" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" image-url="http://aspnetcore.syncfusion.com/images/tile/windows/music.png" text="Music" css-class="tile2"></ej-tile> 

        <ej-tile id="tile3" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" image-url="http://aspnetcore.syncfusion.com/images/tile/windows/favs.png" text="Favorites" css-class="tile3"></ej-tile> 

    </div> 

 

[style] 

.tile1 .e-image-parent { 

        background: red; 

    } 

    .tile2 .e-image-parent { 

        background: green; 

    } 

    .tile3 .e-image-parent { 

        background: gray; 

    } 

 

Refer to the following sample: 

http://www.syncfusion.com/downloads/support/forum/133163/ze/web_sample_(10)-193893370 

 

If the above solution does not meet your requirement, kindly let us know with more details to provide an appropriate solution at the earliest. 

 

Regards, 

 

Selvamani S.