Arctic: Zephyr Customizing (Pictures, Codes)
#1
Hey guys,

share your customized acrtic: zephyr with us.
Let me start. so i switched from this:

Image

to this:

Image

Thx to Gary!
Reply
#2
wow! nothing that major.

just added my favorite Lilac color to the schemes:

Code:
<color name="Highlight">FFa682a6</color>

but inspired now to maybe do a little more with my color scheme.
Linux Mint 18 LTS 64-bit - Kodi 17 Beta6
Odroid-C2 - Libreelec v7.90.009
Reply
#3
Share some pics!
Reply
#4
not easy for me to do screenshots with the keyboard that i use.

you can copy/past this code and save it in the Colors folder for your use:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<colors>
    <color name="Black">FF000000</color>
    <color name="White">FFFFFFFF</color>
    <color name="Red">FFFF0000</color>
    <color name="Blue">FF0000FF</color>
    <color name="Green">FF00FF00</color>
    <color name="Lilac 1">FFa682a6</color>
    <color name="Lilac 2">FFf2c2f2</color>
    <color name="Lilac 3">FFffe8ff</color>
    
    
    <color name="Highlight">FFa682a6</color>
    <color name="Highlight2">FFf2c2f2</color>
    <color name="Selected">FFffe8ff</color>

    <color name="Dark1">ffcccccc</color>
    <color name="Dark2">b3cccccc</color>
    <color name="Dark3">4dcccccc</color>
    <color name="Dark4">1fcccccc</color>

    <color name="Light1">ff333333</color>
    <color name="Light2">b3333333</color>
    <color name="Light3">4d333333</color>
    <color name="Light4">1f333333</color>
    
    <color name="Background">ff181818</color>
    <color name="FanartFade">2Fffffff</color>
    <color name="FloorFade">BB0A000A</color>
    
    <color name="OSDBack">df000000</color>
    <color name="Panel">FF333333</color>
    
    <color name="PanelWhite100">FFdddddd</color>
    <color name="PanelWhite70">B3dddddd</color>
    <color name="PanelWhite30">4Ddddddd</color>
    <color name="PanelWhite12">1Fdddddd</color>
    <color name="PanelBlack30">4D000000</color>
    
    <color name="White100">FF333333</color>
    <color name="White70">B3333333</color>
    <color name="White30">4D333333</color>
    <color name="White12">1F333333</color>
    
    <color name="Black100">FFdddddd</color>
    <color name="Black70">B3dddddd</color>
    <color name="Black30">4Ddddddd</color>
    <color name="Black12">1F000000</color>

still tryin' to get a grasp on what everything controls. little more complicated (more options) than Eminence.
Linux Mint 18 LTS 64-bit - Kodi 17 Beta6
Odroid-C2 - Libreelec v7.90.009
Reply
#5
(2015-03-07, 18:10)locomot1f Wrote: still tryin' to get a grasp on what everything controls. little more complicated (more options) than Eminence.

It is a little more complicated as I wasn't really intending for much colour customisation but I'll give you a run down of what each element is.
All the main colour elements come in four strengths varying from very transparent to opaque.

The stuff at the top Black,Red,Blue,Green is just for system stuff, so unimportant - leave this as is.

"Highlight" is the blue colour used throughout the skin.
"Highlight2" is the pink colour used for selected items (e.g. current playing channel in epg)
"Selected" is the colour of text and item will have if it uses the highlight colour for focus boxes.

"Dark" colours are for text elements that sit on the background. e.g. the media flags at the bottom, or unfocused list items, plot in media info etc.
"Light" is used for elements that sit on top of Dark colours, e.g. list focused item text or HD/SD flag in the circle bottom left.

White/Black colours (e.g. Black30 etc.) are used for dialogs.
The exception is Black12 which needs to stay as is and shouldn't be changed (complicated reasons).

Panel is the colour of the panel behind things like the settings windows or the system info, file manager etc.
PanelWhite are the colours used for text etc. when there is this backing panel.
Arctic Fuse - Alpha now available. Support me on Ko-fi.
Reply
#6
Image

Function over form here!! not pretty but easier to view pics from sofa.

Just hacked up the thumbnails view to allow for 4 large thumbnails only.
Tried taking stuff from other skins at first but don't know what I'm doing and got lost!
Have left header and footer stuff in the myPics.xml as when I removed them it obviously removed them from other views as well.

Wanted to have this as a separate view, but couldn't get it to work, any pointers anyone?
Reply
#7
And for anyone who gets annoyed closing and opening kodi to check results....

add a custom item with ReloadSkin() as the command, much easier!
Reply
#8
There is also a reloadskin item in the power menu for this very reason (S from keyboard).

@boyofford - In View_500_Thumbnails copy the entire include (everything between and including the <includes> tags) and duplicate it.

In the duplicate copy change all the 500 ids to a unique number (e.g. 512) - so you need to change id="500", <ondown><onup> tags and the Control.IsVisible(500) condition.

Give the duplicated include a unique name like View_512_Thumbnails

Then in MyPics.xml just add the include under the others
<include>View_512_Thumbnails</include>

and add the id to the <views> tags e.g.
<views>50,500,512</views>

Then you can edit the 512 view to suit your needs.

Skinning Manual is useful: http://kodi.wiki/view/XBMC_Skinning_Manual
Arctic Fuse - Alpha now available. Support me on Ko-fi.
Reply
#9
Nice one @jurialmunkey

I thought I'd seen reloadskin somewhere, but couldn't find it!

Thought I'd done all the changes from 500 to another number when tried earlier, and just followed your post again but clearly I'm missing something as doesn't work.

Time for bed bud, cheers.

will give it another go tomorrow.
Reply
#10
Well this is frustrating!

I'm missing something here as can't get my view to add as a separate view, any ideas jurialmunkey?
This is the view file, a edited thumbnails view file..View_512_4x4.xml
Code:
<include name="View_512_4x4">
    
        <control type="group">
            <include>Animation.Common</include>
            <visible>Control.IsVisible(512)</visible>
        
            
            <control type="group">
                <control type="panel" id="512">
                    <top>10</top>
                    <left>10</left>
                    <width>1900</width>
                    <height>1060</height>
                    <onleft condition="!Skin.HasSetting(global.kioskmode)">9500</onleft>
                    <onright>60</onright>
                    <onup>512</onup>
                    <ondown>512</ondown>
                    <preloaditems>2</preloaditems>
                    <pagecontrol>60</pagecontrol>
                    <orientation>vertical</orientation>
                    <viewtype label="21371">list</viewtype>
                    <scrolltime tween="quadratic">400</scrolltime>
                    <itemlayout height="530" width="950">
                        <control type="image">
                            <width>100%</width>
                            <height>100%</height>
                            <texture border="10">common/nofocus-shadow10.png</texture>
                        </control>
                        <control type="image">
                            <left>10</left>
                            <top>10</top>
                            <right>10</right>
                            <bottom>10</bottom>
                            <texture border="5" colordiffuse="Panel">common/box.png</texture>
                        </control>
                        <control type="label">
                            <left>20</left>
                            <right>20</right>
                            <bottom>5</bottom>
                            <height>50</height>
                            <aligny>center</aligny>
                            <font>Tiny</font>
                            <label>$INFO[ListItem.Label]</label><label>$INFO[ListItem.Label2]</label>
                            <textcolor>PanelWhite70</textcolor>
                        </control>
                        <control type="image">
                            <left>20</left>
                            <top>20</top>
                            <right>20</right>
                            <height>465</height>
                            <aspectratio scalediffuse="false">scale</aspectratio>
                            <texture diffuse="diffuse/wall.png" background="true" colordiffuse="ff181818">common/white.png</texture>
                        </control>
                        <control type="image">
                            <left>20</left>
                            <top>20</top>
                            <right>20</right>
                            <height>465</height>
                            <aspectratio scalediffuse="false" align="center" aligny="center">keep</aspectratio>
                            <texture diffuse="diffuse/wall.png" background="true">$VAR[ThumbImage]</texture>
                            <visible>!Container.Content(albums) + !Container.Content(artists) + !Container.Content(songs)</visible>
                        </control>
                        <control type="image">
                            <left>20</left>
                            <top>20</top>
                            <right>20</right>
                            <height>465</height>
                            <aspectratio scalediffuse="false" align="center" aligny="center">scale</aspectratio>
                            <texture diffuse="diffuse/wall.png" background="true">$VAR[ThumbImage]</texture>
                            <visible>Container.Content(albums) | Container.Content(artists) | Container.Content(songs)</visible>
                        </control>
                        <control type="image">
                            <centerright>42</centerright>
                            <centertop>42</centertop>
                            <width>32</width>
                            <height>32</height>
                            <aspectratio aligny="top">keep</aspectratio>
                            <texture>$VAR[PercentWatched]</texture>
                            <visible>!stringcompare(ListItem.Label,..)</visible>
                            <visible>stringcompare(ListItem.Overlay,OverlayWatched.png)</visible>
                        </control>

                    </itemlayout>
                    <focusedlayout height="530" width="950">
                        <control type="image">
                            <width>100%</width>
                            <height>100%</height>
                            <texture border="10">common/nofocus-shadow10.png</texture>
                        </control>
                        <control type="image">
                            <left>10</left>
                            <top>10</top>
                            <right>10</right>
                            <bottom>10</bottom>
                            <texture border="5" colordiffuse="Highlight">common/box.png</texture>
                        </control>
                        <control type="label">
                            <left>20</left>
                            <right>20</right>
                            <bottom>5</bottom>
                            <height>50</height>
                            <aligny>center</aligny>
                            <font>Tiny</font>
                            <label>$INFO[ListItem.Label]</label>
                            <textcolor>Selected</textcolor>
                        </control>
                        <control type="image">
                            <left>20</left>
                            <top>20</top>
                            <right>20</right>
                            <height>465</height>
                            <aspectratio scalediffuse="false">scale</aspectratio>
                            <texture diffuse="diffuse/wall.png" background="true" colordiffuse="ff181818">common/white.png</texture>
                        </control>
                        <control type="image">
                            <left>20</left>
                            <top>20</top>
                            <right>20</right>
                            <height>465</height>
                            <aspectratio scalediffuse="false" align="center" aligny="center">keep</aspectratio>
                            <texture diffuse="diffuse/wall.png" background="true">$VAR[ThumbImage]</texture>
                            <visible>!Container.Content(albums) + !Container.Content(artists) + !Container.Content(songs)</visible>
                        </control>
                        <control type="image">
                            <left>20</left>
                            <top>20</top>
                            <right>20</right>
                            <height>465</height>
                            <aspectratio scalediffuse="false" align="center" aligny="center">scale</aspectratio>
                            <texture diffuse="diffuse/wall.png" background="true">$VAR[ThumbImage]</texture>
                            <visible>Container.Content(albums) | Container.Content(artists) | Container.Content(songs)</visible>
                        </control>
                        <control type="image">
                            <centerright>42</centerright>
                            <centertop>42</centertop>
                            <width>32</width>
                            <height>32</height>
                            <aspectratio aligny="top">keep</aspectratio>
                            <texture>$VAR[PercentWatched]</texture>
                            <visible>!stringcompare(ListItem.Label,..)</visible>
                            <visible>stringcompare(ListItem.Overlay,OverlayWatched.png)</visible>
                        </control>
                    </focusedlayout>
                </control>
                
            
            </control>
            <include>Furniture_Scrollbar</include>
        </control>
    </include>
</includes>

and this is mypics.xml
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Foundation -->
<window id="2">
    <defaultcontrol always="true">50</defaultcontrol>
    <allowoverlay>yes</allowoverlay>
    <views>50,500,512</views>

    <controls>

        <include>GlobalBackground</include>

        <include>Furniture_Header</include>
        <include>Furniture_NowPlaying</include>
        <include>Furniture_Clock</include>
        <include>View_50_List_Square</include>
        <include>View_500_Thumbnails</include>
        <include>View_512_4x4</include>

        <control type="group">
            <include>Animation.FadeIn</include>
            <include>Animation.FadeOut</include>
            <visible>ControlGroup(9000).HasFocus()</visible>
            <include>GlobalOverlay</include>
        </control>
        <control type="group">
            <include>Def9000Background</include>
            <control type="grouplist" id="9000">
                <include>Def9000GroupList</include>

                <control type="button" id="2">
                    <description>View</description>
                    <include>DefContextButton</include>
                    <align>left</align>
                </control>

                <control type="button" id="3">
                    <description>Sort</description>
                    <include>DefContextButton</include>
                    <align>left</align>
                </control>

                <control type="togglebutton" id="4">
                    <description>Ascending</description>
                    <include>DefContextButton</include>
                    <align>left</align>
                    <label>584</label>
                    <altlabel>585</altlabel>
                </control>

                <control type="button" id="6">
                    <description>Slideshow</description>
                    <include>DefContextButton</include>
                    <align>left</align>
                    <label>108</label>
                    <visible>!ListItem.IsFolder</visible>
                </control>

                <control type="button" id="7">
                    <description>Recursive Slideshow</description>
                    <include>DefContextButton</include>
                    <align>left</align>
                    <label>108</label>
                    <visible>ListItem.IsFolder</visible>
                </control>

                <control type="radiobutton" id="9">
                    <description>Randomise</description>
                    <include>DefContextButton</include>
                    <align>left</align>
                    <label>13319</label>
                </control>

            </control>

        </control>

    </controls>

</window>

would like to keep it as a seperate view, only for pictures if possible.....use the standard thumbnail view in couple of other places.
Reply
#11
@boyofford - its because you haven't included the new file in Includes.xml -- when I said duplicate the include, I just meant inside the existing xml file.

To include the additional file, edit Includes.xml and add:
Code:
<include file="View_512_4x4.xml" />
Arctic Fuse - Alpha now available. Support me on Ko-fi.
Reply
#12
(2015-03-10, 01:02)jurialmunkey Wrote: @boyofford - its because you haven't included the new file in Includes.xml -- when I said duplicate the include, I just meant inside the existing xml file.

To include the additional file, edit Includes.xml and add:
Code:
<include file="View_512_4x4.xml" />

Sorry, as long as I've been using xbmc, from the days of actual xboxs, I'm still a noob!

that workedBig Grin misunderstood! but when i go through skin options I have two called "Thumbnail"....mine and the original?

I've tried searching through files for reference to "thumbnail" but got nowhere.
Reply
#13
It's because it uses a localized string

Change the bit between the "" where it says 21371 to the label you want to use (doesn't have to be localized, it can be plain text).
Code:
<viewtype label="21371">list</viewtype>

e.g.
Code:
<viewtype label="Big Thumbs">list</viewtype>
Arctic Fuse - Alpha now available. Support me on Ko-fi.
Reply
#14
(2015-03-10, 01:39)jurialmunkey Wrote: It's because it uses a localized string

Change the bit between the "" where it says 21371 to the label you want to use (doesn't have to be localized, it can be plain text).
Code:
<viewtype label="21371">list</viewtype>

e.g.
Code:
<viewtype label="Big Thumbs">list</viewtype>

Nice one, sorted!
Expect more scruffy looking bodge job views in the future lol.
Reply
#15
Rofl
Arctic Fuse - Alpha now available. Support me on Ko-fi.
Reply

Logout Mark Read Team Forum Stats Members Help
Arctic: Zephyr Customizing (Pictures, Codes)1