Kodi Community Forum

Kodi Community Forum > Development > Skinning > 'z-index' (depth) on controls?
Full Version: 'z-index' (depth) on controls?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

z1haze

2018-03-27, 17:09
Hello, I am brand new to skinning, but I have many years of web development experience. I am trying to accomplish a menu that is similar to netflix widget is that the cursor itself doesnt move, and the menu animates behind it. Even upon switching widgets, the cursor doesnt move, and the menu's shift down, etc. I have somewhat accomplished this for a single widget but I am having an issue the z-index on the border image being pushed under the background image during  animation - but if I move rectangular border image below the menu, the full white rectangle shows through instead of just the border like I want.

tldr; Is it possible/How do you set the z-index (depth) of controls in a group. eg. can an image you inserted first, be placed on top of an image you inserted after?

gif: https://www.dropbox.com/s/eszgbaxbd9ogbq...3.gif?dl=0

xml:
<!--Main Container-->

<control type="group">

<left>75</left>

<!--Widget Container-->

<control type="group">

<top>675</top>

<control type="image">

<colordiffuse>FFFFFFFF</colordiffuse>

<height>220</height>

<left>0</left>

<texture background="true">custom/widget/tile_bg.png</texture>

<top>0</top>

<width>380</width>

</control>

<!--Main Menu-->

<control type="fixedlist" id="9000">

<focusposition>0</focusposition>

<left>0</left>

<onleft>700</onleft>

<onright>700</onright>

<orientation>horizontal</orientation>

<scrolltime>325</scrolltime>

<itemlayout width="380" height="220">

<control type="group">

<control type="image">

<colordiffuse>FF1F1F1F</colordiffuse>

<height>214</height>

<left>3</left>

<texture background="true">custom/widget/tile_bg.png</texture>

<top>3</top>

<width>374</width>

</control>

<control type="label">

<align>center</align>

<aligny>center</aligny>

<font>font37</font>

<height>214</height>

<label>$INFO[ListItem.Label]</label>

<left>3</left>

<top>3</top>

<width>374</width>

</control>

</control>

</itemlayout>

<focusedlayout width="380" height="220">

<control type="group">

<control type="image">

<colordiffuse>FF1F1F1F</colordiffuse>

<height>214</height>

<left>3</left>

<texture background="true">custom/widget/tile_bg.png</texture>

<top>3</top>

<width>374</width>

</control>

<control type="label">

<align>center</align>

<aligny>center</aligny>

<font>font37</font>

<height>214</height>

<label>$INFO[ListItem.Label]</label>

<left>3</left>

<top>3</top>

<width>374</width>

</control>

</control>

</focusedlayout>

<content>

<item>

<label>$LOCALIZE[342]</label>

<onclick condition="Library.HasContent(movies)">ActivateWindow(Videos,videodb://movies/titles/,return)</onclick>

<onclick condition="!Library.HasContent(movies)">ActivateWindow(Videos,sources://video/,return)</onclick>

<property name="menu_id">$NUMBER[5000]</property>

<thumb>icons/sidemenu/movies.png</thumb>

<property name="id">movies</property>

<visible>!Skin.HasSetting(HomeMenuNoMovieButton)</visible>

</item>

<item>

<label>$LOCALIZE[20343]</label>

<onclick condition="Library.HasContent(tvshows)">ActivateWindow(Videos,videodb://tvshows/titles/,return)</onclick>

<onclick condition="!Library.HasContent(tvshows)">ActivateWindow(Videos,sources://video/,return)</onclick>

<property name="menu_id">$NUMBER[6000]</property>

<thumb>icons/sidemenu/tv.png</thumb>

<property name="id">tvshows</property>

<visible>!Skin.HasSetting(HomeMenuNoTVShowButton)</visible>

</item>

<item>

<label>$LOCALIZE[2]</label>

<onclick>ActivateWindow(Music,root,return)</onclick>

<property name="menu_id">$NUMBER[7000]</property>

<thumb>icons/sidemenu/music.png</thumb>

<property name="id">music</property>

<visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>

</item>

<item>

<label>$LOCALIZE[427]</label>

<onclick>PlayDisc</onclick>

<property name="menu_id">$NUMBER[21000]</property>

<thumb>icons/sidemenu/disc.png</thumb>

<property name="id">disc</property>

<visible>System.HasMediaDVD</visible>

</item>

<item>

<label>$LOCALIZE[20389]</label>

<property name="menu_id">$NUMBER[16000]</property>

<onclick>ActivateWindow(Videos,musicvideos,return)</onclick>

<thumb>icons/sidemenu/musicvideos.png</thumb>

<property name="id">musicvideos</property>

<visible>!Skin.HasSetting(HomeMenuNoMusicVideoButton)</visible>

</item>

<item>

<label>$LOCALIZE[19020]</label>

<property name="menu_id">$NUMBER[12000]</property>

<onclick>ActivateWindow(TVChannels)</onclick>

<thumb>icons/sidemenu/livetv.png</thumb>

<property name="id">livetv</property>

<visible>!Skin.HasSetting(HomeMenuNoTVButton)</visible>

</item>

<item>

<label>$LOCALIZE[19021]</label>

<property name="menu_id">$NUMBER[13000]</property>

<onclick>ActivateWindow(RadioChannels)</onclick>

<thumb>icons/sidemenu/radio.png</thumb>

<property name="id">radio</property>

<visible>!Skin.HasSetting(HomeMenuNoRadioButton)</visible>

</item>

<item>

<label>$LOCALIZE[24001]</label>

<property name="menu_id">$NUMBER[8000]</property>

<onclick>ActivateWindow(1100)</onclick>

<thumb>icons/sidemenu/addons.png</thumb>

<property name="id">addons</property>

<visible>!Skin.HasSetting(HomeMenuNoProgramsButton)</visible>

</item>

<item>

<label>$LOCALIZE[1]</label>

<onclick>ActivateWindow(Pictures)</onclick>

<property name="menu_id">$NUMBER[4000]</property>

<thumb>icons/sidemenu/pictures.png</thumb>

<property name="id">pictures</property>

<visible>!Skin.HasSetting(HomeMenuNoPicturesButton)</visible>

</item>

<item>

<label>$LOCALIZE[3]</label>

<onclick>ActivateWindow(Videos,root)</onclick>

<property name="menu_id">$NUMBER[11000]</property>

<thumb>icons/sidemenu/videos.png</thumb>

<property name="id">video</property>

<visible>!Skin.HasSetting(HomeMenuNoVideosButton)</visible>

</item>

<item>

<label>$LOCALIZE[10134]</label>

<onclick>ActivateWindow(favourites)</onclick>

<property name="menu_id">$NUMBER[14000]</property>

<thumb>icons/sidemenu/favourites.png</thumb>

<property name="id">favorites</property>

<visible>!Skin.HasSetting(HomeMenuNoFavButton)</visible>

</item>

<item>

<label>$LOCALIZE[8]</label>

<onclick condition="!String.IsEmpty(Weather.Plugin)">ActivateWindow(Weather)</onclick>

<onclick condition="String.IsEmpty(Weather.Plugin)">ReplaceWindow(servicesettings,weather)</onclick>

<property name="menu_id">$NUMBER[15000]</property>

<thumb>icons/sidemenu/weather.png</thumb>

<property name="id">weather</property>

<visible>!Skin.HasSetting(HomeMenuNoWeatherButton)</visible>

</item>

</content>

</control>

</control>

</control>

Hitcher

2018-03-27, 17:17
Place the border image code after the list and remove the centre so it's transparent in the middle.

z1haze

2018-03-27, 17:19
but then how would I dynamically allow control for the width of that border? or for variable box sizes, etc?

z1haze

2018-03-27, 17:58
Please Delete
Kodi Community Forum > Development > Skinning > 'z-index' (depth) on controls?