Changing the Look and Feel (First steps into coding)
#1
Hello everyone, I am trying to customize the looks on my Kodi app.
I just got it running in RP pi 3 yesterday (wired internet, SMB and SSH connected to both RBpi and Windows 10 PC).
Mostly, I would like to make changes to the Kodi logo icon that appears in the top of the main menu (Estuary default skin)
Is it possible to locate and replace this file? If someone knows how and where to look it would be a great help for me.
I am really a newbie here and don't write code, so it's a big challenge... But I am looking into the essentials to figuer it out.
All support is more than wellcome!!Smile
Cheers,
Federico.
Reply
#2
(2019-11-30, 19:32)jake peralta Wrote: Hello everyone, I am trying to customize the looks on my Kodi app.
I just got it running in RP pi 3 yesterday (wired internet, SMB and SSH connected to both RBpi and Windows 10 PC).
Mostly, I would like to make changes to the Kodi logo icon that appears in the top of the main menu (Estuary default skin)
Is it possible to locate and replace this file? If someone knows how and where to look it would be a great help for me.
I am really a newbie here and don't write code, so it's a big challenge... But I am looking into the essentials to figuer it out.
All support is more than wellcome!!Smile
Cheers,
Federico.

the image (png/jpg) is in the textures.xbt file , which is inside the media folder which itself is in the skin folder. To open the textures file you will need the "kodi textures tool ", however it may be easier for you to locate the bit of code that relates to it .   Open skin folder then open "xml" file , then open "home.xml in "notepad ++" or similar. 
Right at the bottom around line 1064 , you will see the two sets of text relating to the image and the text icons.  get your replacement icon/s and name em with png or jpg extension and place them in the media folder , then edit the text and match it exactly as you have named the images( or remove one and rename the one you want ) , remember to save your changes. then reboot kodi.
Reply
#3
(2019-11-30, 20:03)ontap Wrote:
(2019-11-30, 19:32)jake peralta Wrote: Hello everyone, I am trying to customize the looks on my Kodi app.
I just got it running in RP pi 3 yesterday (wired internet, SMB and SSH connected to both RBpi and Windows 10 PC).
Mostly, I would like to make changes to the Kodi logo icon that appears in the top of the main menu (Estuary default skin)
Is it possible to locate and replace this file? If someone knows how and where to look it would be a great help for me.
I am really a newbie here and don't write code, so it's a big challenge... But I am looking into the essentials to figuer it out.
All support is more than wellcome!!Smile
Cheers,
Federico.

the image (png/jpg) is in the textures.xbt file , which is inside the media folder which itself is in the skin folder. To open the textures file you will need the "kodi textures tool ", however it may be easier for you to locate the bit of code that relates to it .   Open skin folder then open "xml" file , then open "home.xml in "notepad ++" or similar. 
Right at the bottom around line 1064 , you will see the two sets of text relating to the image and the text icons.  get your replacement icon/s and name em with png or jpg extension and place them in the media folder , then edit the text and match it exactly as you have named the images( or remove one and rename the one you want ) , remember to save your changes. then reboot kodi. 
Thanks a lot, I will try this right away!
Reply
#4
(2019-11-30, 21:45)jake peralta Wrote:
(2019-11-30, 20:03)ontap Wrote:
(2019-11-30, 19:32)jake peralta Wrote: Hello everyone, I am trying to customize the looks on my Kodi app.
I just got it running in RP pi 3 yesterday (wired internet, SMB and SSH connected to both RBpi and Windows 10 PC).
Mostly, I would like to make changes to the Kodi logo icon that appears in the top of the main menu (Estuary default skin)
Is it possible to locate and replace this file? If someone knows how and where to look it would be a great help for me.
I am really a newbie here and don't write code, so it's a big challenge... But I am looking into the essentials to figuer it out.
All support is more than wellcome!!Smile
Cheers,
Federico.

the image (png/jpg) is in the textures.xbt file , which is inside the media folder which itself is in the skin folder. To open the textures file you will need the "kodi textures tool ", however it may be easier for you to locate the bit of code that relates to it .   Open skin folder then open "xml" file , then open "home.xml in "notepad ++" or similar. 
Right at the bottom around line 1064 , you will see the two sets of text relating to the image and the text icons.  get your replacement icon/s and name em with png or jpg extension and place them in the media folder , then edit the text and match it exactly as you have named the images( or remove one and rename the one you want ) , remember to save your changes. then reboot kodi.  
Thanks a lot, I will try this right away! 
Great advance!!
Ok, part of it worked... I have a naked menu now, with no logo.
The images I made match the size of what I suspect are the pixel dimensions, but maybe they aren't the right size?
in the home.xml file it sais:
"<width>56</width>
<height>56</height>"
and
"<width>192</width>
<height>36</height>"
So I scaled them to 56x56 and 192x36 pixels. I don't know why they aren't showing on the kodi aplication...
Reply
#5
(2019-11-30, 20:03)ontap Wrote:
(2019-11-30, 19:32)jake peralta Wrote: Hello everyone, I am trying to customize the looks on my Kodi app.
I just got it running in RP pi 3 yesterday (wired internet, SMB and SSH connected to both RBpi and Windows 10 PC).
Mostly, I would like to make changes to the Kodi logo icon that appears in the top of the main menu (Estuary default skin)
Is it possible to locate and replace this file? If someone knows how and where to look it would be a great help for me.
I am really a newbie here and don't write code, so it's a big challenge... But I am looking into the essentials to figuer it out.
All support is more than wellcome!!Smile
Cheers,
Federico.

the image (png/jpg) is in the textures.xbt file , which is inside the media folder which itself is in the skin folder. To open the textures file you will need the "kodi textures tool ", however it may be easier for you to locate the bit of code that relates to it .   Open skin folder then open "xml" file , then open "home.xml in "notepad ++" or similar. 
Right at the bottom around line 1064 , you will see the two sets of text relating to the image and the text icons.  get your replacement icon/s and name em with png or jpg extension and place them in the media folder , then edit the text and match it exactly as you have named the images( or remove one and rename the one you want ) , remember to save your changes. then reboot kodi.  
Great advance!!
Ok, part of it worked... I have a naked menu now, with no logo.
The images I made match the size of what I suspect are the pixel dimensions, but maybe they aren't the right size?
in the home.xml file it sais:
"<width>56</width>
<height>56</height>"
and
"<width>192</width>
<height>36</height>"
So I scaled them to 56x56 and 192x36 pixels. I don't know why they aren't showing on the kodi aplication...
Reply
#6
are the names you have given them in the text file exactly the same as they are named in the media folder, oh and are they in the correct media folder, ie, , not in - kodi folder-media. but in kodio-addons-skin-media folder ?
need to be in the same media folder as the textures.xbt file.
Reply
#7
(2019-11-30, 22:44)ontap Wrote: are the names you have given them in the text file exactly the same as they are named in the media folder, oh and are they in the correct media folder, ie, , not in - kodi folder-media. but in kodio-addons-skin-media folder ?
need to be in the same media folder as the textures.xbt file.

Yes, names are correct, location is correct and it is the same as textures.xbt
I am wondering wether the issue is maybe some image property (ig. it is 72 dpi...)
Reply
#8
OK do it this way, in "home.xml" near the top , find the line that says "<include>DefaultBackground</include>", and insert directly below that line -
​​​​​​                 <control type="image">
                        <top>20</top>
                        <left>130</left>
                        <width>56</width>
                        <height>56</height>
                        <texture>****.png</texture>
                   </control>
put the name of your image where the 4x* are.
I generally use an image size of 256x256 , kodi will then set it to the 56x56 in the text. you can the change the top and left figures to position it where you want it.
Reply
#9
(2019-11-30, 23:30)ontap Wrote: OK do it this way, in "home.xml" near the top , find the line that says "<include>DefaultBackground</include>", and insert directly below that line -
​​​​​​                 <control type="image">
                        <top>20</top>
                        <left>130</left>
                        <width>56</width>
                        <height>56</height>
                        <texture>****.png</texture>
                   </control>
put the name of your image where the 4x* are.
I generally use an image size of 256x256 , kodi will then set it to the 56x56 in the text. you can the change the top and left figures to position it where you want it.
Wow that's amazing, it's there! kind of blurry and small but it's there.. I'm gonna try and change the positioning parameters and proportion to place it right.
Any other advice on this?
I'm so thankful!! Smile
Reply
#10
(2019-11-30, 23:30)ontap Wrote: OK do it this way, in "home.xml" near the top , find the line that says "<include>DefaultBackground</include>", and insert directly below that line -
​​​​​​                 <control type="image">
                        <top>20</top>
                        <left>130</left>
                        <width>56</width>
                        <height>56</height>
                        <texture>****.png</texture>
                   </control>
put the name of your image where the 4x* are.
I generally use an image size of 256x256 , kodi will then set it to the 56x56 in the text. you can the change the top and left figures to position it where you want it.
It works perfectly, I am managing the position, it's a subtle gameSmile
In the menu it seems like it is behind a "translucent curtain" is this the number that shades the opacity?
"            <animation effect="fade" time="300" start="100" end="0">Focus</animation>"
Thank you so very much ONTAP!!!
Federico.
Reply
#11
(2019-12-01, 02:23)jake peralta Wrote:          <animation effect="fade" time="300" start="100" end="0">Focus</animation>"
Thank you so very much ONTAP!!!
Federico.

no
<texture colordiffuse="75FFFFFF">****.png</texture>  75  transparency  FFFFFF  hex colors do not include # 
https://htmlcolorcodes.com/
Reply
#12
(2019-12-01, 04:28)the_other_guy Wrote:
(2019-12-01, 02:23)jake peralta Wrote:          <animation effect="fade" time="300" start="100" end="0">Focus</animation>"
Thank you so very much ONTAP!!!
Federico.

no
<texture colordiffuse="75FFFFFF">****.png</texture>  75  transparency  FFFFFF  hex colors do not include # 
https://htmlcolorcodes.com/ 
That's interesting. For now I have done all the changes I wanted to make in Kodi (Windows 10) but I am having trouble migrating such modifications into Raspberry pi 3...
I have tried typing the command "sudo cp -r /media/USB.DRIVE/skin.estuary /usr/share/kodi/addons/skin.estuary" on the System Console -having copied the modified files on the USB drive- but it doesn't seem to work...
Any suggestions on how to migrate the modifications?
Thanks again!
Reply
#13
Does anyone know how to change the background image for a custom image in skin.estuary?
Reply
#14
(2019-12-01, 20:02)jake peralta Wrote: Does anyone know how to change the background image for a custom image in skin.estuary?

do you have a resource.images.skinbackgrounds installed
\Kodi\addons\resource.images.skinbackgrounds.clear
resources and change image


to add custom image 2804767 (post)

<control type="image"> <left>0</left> <right>0</right> <top>0</top> <height>100%</height> <animation effect="fade" time="400">VisibleChange</animation> <texture border="2" fallback="special://skin/extras/home-images/tvshows.jpg" background="true">$VAR[FanartImageVar]</texture> <aspectratio align="center" aligny="bottom">scale</aspectratio> </control>
Reply
#15
I wanted to make in Kodi (Windows 10) but I am having trouble migrating such modifications into Raspberry pi 3
you can go into C:\Users\****\AppData\Roaming\Kodi\addons\ and zip the skin folder

Installing a skin from zip
page and download as zip. Once you have the zip file, put it onto a usb drive, or local drive so it can be accessed by your XBMC/Kodi device. In XBMC/Kodi, go to System > Settings > Add-ons > Install from zip. Now browse for your skin's zip file and begin the install.
Reply
 
Thread Rating:
  • 0 Vote(s) - 0 Average



Logout Mark Read Team Forum Stats Members Help
Changing the Look and Feel (First steps into coding)00