[m_______g]

All of us who are using the default skin have ~25% of the screen real estate taken up by the main menu.

Not only are there pretty easy to understand icons, but then there are the words (Movies, TV Shows, Games, Add-ons... etc).
I'd really like to see more of my content and less of the default menu.

Yes, I have tried other skins and no I am not really interested in a "better" option. My reason (if you're interested): I always seem to end up losing things that I use (ie recently added / random unwatched / random). The trade offs never seem to make much sense to me as an end user.

FYI: I'm using Kodi on AndroidTV

My question:
Can I edit something  that will reduce the width of the main menu so that I see less (ideally: only icons)?
Follow up: would doing that mess with other menus or only the main one?

or

Is there a way to make the menu slide away (hide) until I move over to it (the way other menus are hidden until I click over to the far left)? 

Any help would be greatly appreciated.

[Klojum]

Can I edit something  that will reduce the width of the main menu so that I see less (ideally: only icons)?

The default/system skin of Kodi is pretty rigid, so having it slide away would require major surgery on the Estuary skin.
Instead you could try to resize the rest of the screen objects, as you can see from this blurry comparison:



I stumbled on an edited Estuary skin which hasn't been updated since 17.5 or so. It also has wrong font sizes here and there, so the skin would need plenty of TLC for Kodi 18 and 19.
It gives a nicer overview IMO when using Kodi on a computer screen, but not so much 'on the big screen' aka TV.

[m_______g]

How did you, "resize the rest of the screen objects"? 

Is this something simple or is this an in depth re-write of the skin?

[Klojum]

How did you, "resize the rest of the screen objects"? 

First of all, I did not do the resizing, as I'm not a Kodi 'skinner' myself. I merely found this edited version. I would welcome an updated version for Matrix and Nexus.

Is this something simple or is this an in depth re-write of the skin?

Unfortunately, it's not a simple task. A Kodi skin consists of a large number of XML files with all types of references to each other, including the widths and heights of all objects. So it will not be a total rewrite, but plenty of 'objects' will need to have their parameters or properties changed.

Creating or editing a Kodi skin is an acquired taste, and is almost a programming language on its own. So understanding its complexity will take you quite more than just a couple of days.

[the_other_guy]

this can be done but you lose mouse support for the first widgets
edit home.xml
<left>462</left> this is the size 

xml:


<control type="group">

            <animation effect="fade" start="100" end="0" time="200" tween="sine" condition="$EXP[infodialog_active]">Conditional</animation>

            <control type="group" id="2000">

                <left>462</left>

                <animation type="Conditional" condition="Control.IsVisible(20000)" reversible="false">

                    <effect type="slide" end="0,20" time="60" tween="sine" />

                    <effect type="slide" end="0,-20" time="180" tween="sine" delay="80" />

                </animation>

                <animation type="Conditional" condition="Control.IsVisible(20001)" reversible="false">

                    <effect type="slide" end="0,-20" time="60" tween="sine" />

                    <effect type="slide" end="0,20" time="180" tween="sine" delay="80" />

                </animation>

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

xml:


    <control type="group">

                <depth>DepthContentPanel</depth>

                <include>OpenClose_Left</include>

                <include content="ContentPanel">

                    <param name="width" value="522" />

                </include>

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

                    <left>0</left>

                    <top>240</top>

                    <width>462</width>

                    <bottom>-10</bottom>

                    <movement>7</movement>

                    <focusposition>0</focusposition>

                    <onfocus>ClearProperty(listposition,home)</onfocus>

                    <onright>SetFocus($INFO[Container(9000).ListItem.Property(menu_id)])</onright>

                    <onup>700</onup>

                    <ondown>700</ondown>

                    <scrolltime tween="cubic" easing="out">500</scrolltime>

                    <focusedlayout height="95">

                        <control type="group">

                            <animation effect="fade" start="100" end="0" time="0">UnFocus</animation>

                            <control type="image">

                                <left>0</left>

                                <top>0</top>

                                <width>462</width>

                                <height>95</height>

                                <texture colordiffuse="button_focus">lists/focus.png</texture>

                                <animation effect="fade" start="100" end="0" time="0" condition="[!Control.HasFocus(9000) + !ControlGroup(700).HasFocus] | System.HasActiveModalDialog">Conditional</animation>

                            </control>

change <param name="width" value="522" /> and  <width>462</width>

[the_other_guy]

How did you, "resize the rest of the screen objects"? 

Is this something simple or is this an in depth re-write of the skin?

if you can use notepad ++
get xml plugin

open Includes_Home.xml
find<include name="WidgetListPoster">
find <height>503</height>  change size around 303 
find <itemlayout width="310" height="486">and <focusedlayout width="310" height="486">   change size to around 1/2   width="155" height="243"

open View_54_InfoWall.xml
find <include name="InfoWallMovieLayout">
     change <width></width> to 1/2  <width></width>
     change  <height></height> to 1/2 <height></height>

xml:


<control type="image">

                <top>10</top>

                <width>316</width>

                <height>288</height>

                <texture>dialogs/dialog-bg-nobo.png</texture>

                <bordertexture border="21">overlays/shadow.png</bordertexture>

                <bordersize>20</bordersize>

            </control>

         

xml:
<include name="InfoWallMovieLayout">

        <param name="focused">false</param>

        <definition>

            <control type="group">

                <visible>String.IsEmpty(ListItem.Art(poster))</visible>

                <control type="image">

                    <left>15</left>

                    <top>-10</top>

                    <width>145</width>

                    <height>200</height>

                    <texture>dialogs/dialog-bg-nobo.png</texture>

                    <bordertexture border="21">overlays/shadow.png</bordertexture>

                    <bordersize>20</bordersize>

                </control>

                <control type="image">

                    <left>15</left>

                    <top>-10</top>

                    <width>145</width>

                    <height>200</height>

                    <texture colordiffuse="button_focus">colors/grey.png</texture>

                    <bordersize>20</bordersize>

                    <visible>$PARAM[focused]</visible>

                    <include condition="$PARAM[focused]">Animation_FocusTextureFade</include>

                </control>

                <control type="textbox">

                    <left>40</left>

                    <top>244</top>

                    <width>242</width>

                    <height>120</height>

                    <font>font27</font>

                    <align>center</align>

                    <aligny>center</aligny>

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

                    <autoscroll time="2000" delay="3000" repeat="5000">$PARAM[focused]</autoscroll>

                    <visible>!ListItem.IsParentFolder</visible>

                </control>

                <control type="image">

                    <left>24</left>

                    <top>-1</top>

                    <width>136</width>

                    <height>135</height>

                    <texture fallback="DefaultMovies.png" background="true">$INFO[ListItem.Icon]</texture>

                    <aspectratio>scale</aspectratio>

                    <bordersize>20</bordersize>

                </control>

            </control>

            <control type="group">

                <visible>!String.IsEmpty(ListItem.Art(poster))</visible>

                <control type="image">

                    <left>11</left>

                    <top>-14</top>

                    <width>149</width>

                    <height>204</height>

                    <texture colordiffuse="button_focus">colors/grey.png</texture>

                    <bordertexture border="21">overlays/shadow.png</bordertexture>

                    <bordersize>20</bordersize>

                    <visible>$PARAM[focused]</visible>

                    <include condition="$PARAM[focused]">Animation_FocusTextureFade</include>

                </control>

                <control type="image">

                    <left>15</left>

                    <top>-10</top>

                    <width>145</width>

                    <height>200</height>

                    <texture background="true">$INFO[ListItem.Art(poster)]</texture>

                    <aspectratio>scale</aspectratio>

                    <bordertexture border="21">overlays/shadow.png</bordertexture>

                    <bordersize>20</bordersize>

                </control>

                <control type="image">

                    <left>35</left>

                    <top>290</top>

                    <width>80</width>

                    <height>80</height>

                    <texture>overlays/overlay-bg.png</texture>

                    <visible>Listitem.IsCollection | ListItem.IsPlaying | Integer.IsGreater(ListItem.Playcount,0)</visible>

                </control>

            </control>

            <control type="group">

                <visible>String.IsEqual(ListItem.DBtype,tvshow)</visible>

                <top>320</top>

                <control type="image">

                    <left>35</left>

                    <top>0</top>

                    <width>250</width>

                    <height>50</height>

                    <texture colordiffuse="CCFFFFFF">overlays/overlayfade.png</texture>

                    <visible>!String.IsEmpty(ListItem.Art(poster))</visible>

                </control>

                <control type="label">

                    <left>0</left>

                    <top>20</top>

                    <width>244</width>

                    <label>$INFO[ListItem.Property(WatchedEpisodes)]$INFO[ListItem.Property(TotalEpisodes), / ,]</label>

                    <font>font20_title</font>

                    <shadowcolor>text_shadow</shadowcolor>

                    <align>right</align>

                </control>

                <control type="image">

                    <left>254</left>

                    <top>23</top>

                    <width>24</width>

                    <height>24</height>

                    <texture>lists/played-total.png</texture>

                </control>

            </control>

            <control type="image">

                <left>35</left>

                <top>338</top>

                <width>32</width>

                <height>32</height>

                <texture>$VAR[WallWatchedIconVar]</texture>

            </control>

            <control type="group">

                <left>135</left>

                <top>-8</top>

                <include condition="Skin.HasSetting(circle_rating) | Skin.HasSetting(circle_userrating)">RatingCircle</include>

            </control>

            <control type="progress">

                <left>35</left>

                <top>350</top>

                <width>250</width>

                <height>1</height>

                <texturebg></texturebg>

                <midtexture colordiffuse="button_focus" border="3">progress/texturebg_alt_white.png</midtexture>

                <info>ListItem.PercentPlayed</info>

                <visible>!Integer.IsEqual(ListItem.PercentPlayed,0)</visible>

            </control>

        </definition>

    </include>

you will need to work out other placement for your display<control type="progress"> $VAR[WallWatchedIconVar] <texture>lists/played-total.png</texture>

[the_other_guy]

this can be done but you lose mouse support for the first widgets
edit home.xml
<left>462</left> this is the size 

xml:


<control type="group">

            <animation effect="fade" start="100" end="0" time="200" tween="sine" condition="$EXP[infodialog_active]">Conditional</animation>

            <control type="group" id="2000">

                <left>462</left>

                <animation type="Conditional" condition="Control.IsVisible(20000)" reversible="false">

                    <effect type="slide" end="0,20" time="60" tween="sine" />

                    <effect type="slide" end="0,-20" time="180" tween="sine" delay="80" />

                </animation>

                <animation type="Conditional" condition="Control.IsVisible(20001)" reversible="false">

                    <effect type="slide" end="0,-20" time="60" tween="sine" />

                    <effect type="slide" end="0,20" time="180" tween="sine" delay="80" />

                </animation>

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

xml:


    <control type="group">

                <depth>DepthContentPanel</depth>

                <include>OpenClose_Left</include>

                <include content="ContentPanel">

                    <param name="width" value="522" />

                </include>

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

                    <left>0</left>

                    <top>240</top>

                    <width>462</width>

                    <bottom>-10</bottom>

                    <movement>7</movement>

                    <focusposition>0</focusposition>

                    <onfocus>ClearProperty(listposition,home)</onfocus>

                    <onright>SetFocus($INFO[Container(9000).ListItem.Property(menu_id)])</onright>

                    <onup>700</onup>

                    <ondown>700</ondown>

                    <scrolltime tween="cubic" easing="out">500</scrolltime>

                    <focusedlayout height="95">

                        <control type="group">

                            <animation effect="fade" start="100" end="0" time="0">UnFocus</animation>

                            <control type="image">

                                <left>0</left>

                                <top>0</top>

                                <width>462</width>

                                <height>95</height>

                                <texture colordiffuse="button_focus">lists/focus.png</texture>

                                <animation effect="fade" start="100" end="0" time="0" condition="[!Control.HasFocus(9000) + !ControlGroup(700).HasFocus] | System.HasActiveModalDialog">Conditional</animation>

                            </control>

change <param name="width" value="522" /> and  <width>462</width>

 had a look at it you need to delete

xml:


<control type="label">

							<left>104</left>

							<top>0</top>

							<height>95</height>

							<width>560</width>

							<aligny>center</aligny>

							<font>font37</font>

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

							<shadowcolor>text_shadow</shadowcolor>

						</control>

i used <control type="group" id="2000">
<left>112</left>

<param name="width" value="162" />

xml:
	<control type="image">

								<left>0</left>

								<top>0</top>

								<width>102</width>

								<height>95</height>

								<texture colordiffuse="button_focus">lists/focus.png</texture>

								<animation effect="fade" start="100" end="0" time="0" condition="[!Control.HasFocus(9000) + !ControlGroup(700).HasFocus] | System.HasActiveModalDialog">Conditional</animation>

							</control>

[the_other_guy]

the  best layout using 1/2 size widgets

xml:


<include name="WidgetListPoster">

        <definition>

            <include content="CategoryLabel">

                <param name="label">$PARAM[widget_header]</param>

                <param name="list_id" value="$PARAM[list_id]"/>

            </include>

            <include content="BusyListSpinner">

                <param name="list_id" value="$PARAM[list_id]"/>

                <param name="posy" value="250"/>

            </include>

            <control type="panel" id="$PARAM[list_id]">

                <left>0</left>

                <top>115</top>

                <visible>Integer.IsGreater(Container($PARAM[list_id]).NumItems,0) | Container($PARAM[list_id]).IsUpdating</visible>

                <right>0</right>

                <height>260</height>

                <include content="WidgetListCommon">

                    <param name="list_id" value="$PARAM[list_id]"/>

                </include>

                <itemlayout width="115" height="243">

                    <control type="group">

                        <left>68</left>

                        <top>10</top>

                        <include content="InfoWallMovieLayout">

                            <param name="focused" value="false" />

                        </include>

                    </control>

                </itemlayout>

                <focusedlayout width="115" height="243">

                    <control type="group">

                        <depth>DepthContentPopout</depth>

                        <left>68</left>

                        <top>10</top>

                        <animation type="Focus">

                            <effect type="zoom" start="100" end="110" time="200" tween="sine" easing="inout" center="230,130" />

                        </animation>

                        <animation type="Unfocus">

                            <effect type="zoom" start="110" end="100" time="200" tween="sine" easing="inout" center="230,130" />

                        </animation>

                        <include content="InfoWallMovieLayout">

                            <param name="focused" value="true" />

                        </include>

                    </control>

                </focusedlayout>

                <content sortby="$PARAM[sortby]" sortorder="$PARAM[sortorder]" target="$PARAM[widget_target]" limit="15">$PARAM[content_path]</content>

            </control>

        </definition>

    </include>

[the_other_guy]

not used this site before not sure how safe it is
https://freespace.com.au/filehosting/upload.php
Your file was uploaded!
Your download link
http://www.freespace.com.au/filehosting/147702
Please use firefox when downloading files.
skin.estuarysp this is the default skin for kodi 19 with the code from this page added
install from zip

[ontap]

Thanks for all of the above , exactly what I have been looking  for. I prefer using Estuary but the widgets on a big screen are too large imo anyway.

[ontap]

Would you not consider Estuary MOD V2  ??  It's Estuary modded ( so not technically "another skin " ) which is what you are intending to do yourself.  It has the option  "main menu slides to left when accessing widgets.
It's in this estuary section.If you look at the last few pages of it's thread there is an active matrix version.
Still needs widgets resizing imo , the coding posted by  "the_other_guy" should work on it .

[frodo19]

A made myself other look..
Original Estuary  modded..

[Klojum]

I prefer using Estuary but the widgets on a big screen are too large imo anyway.

You can disable the widgets but then you get an additional select screen (genres, etc) when selecting the movie main menu icon... :-\

Your download link

Thanks a bunch, I'll see how it works out on my 21:9 monitor as well. I'm not (yet?) a big fan of the tiny main menu buttons, but the smaller posters I do like.

[ontap]

@the_other_guy  , had to download firefox onto my mac to get your mod  but was worth it , widgets look good. I've seen another estuary mod  recently on github which the "quit-settings-search" buttons reduced to a smaller box so that they wouldn't overlap the widgets, will see if I can find it.
Will hang onto firefox just now in case you upload anything else 
On slightly different topic , I modded the default video info page on estuary skin yesterday to look imo anyway, a little better ?
if anybody wants the png's and the two xml files needed, just ask.

[Klojum]

@the_other_guy

This is certainly improvement with your 'smallposters' version. But I think there is more that can be done.



On a 2560px wide screen, you can display 20 posters on a single row. Which means:
- 5 more movie posters
- 10 more tvshow posters
- 5 more unwatched tvshow posters
- Move the row titles slightly lower to the row they belong to, by decreasing the height to the posters under them.
- If the widgets could also be resized, both the icons and the box they are in, all rows would fit on a single 2560x1440 screen (no more scrolling up/down). The genre icons are already small enough.

These adjustments would finalize my Estuary needs.