Kodi Community Forum

Full Version: Adding background to clock in includes.xml
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I'm working on adding a static bar which will be a background for the top clock, date and title, for example: 'Videos - Title'. I've said in previous threads that I'm totally new to skinning so sorry about the questions. Would someone be able to either help me out or point me in the right direction in the skinning guide? I thought maybe creating a property and then applying that to <include name="Clock"> section might work, at least for the clock area. My job is skinning for vBulletin, XenForo, Wordpress and other web apps, css+php and a little bit of xml are fine, I find XBMC so confusing though.

Again thank you for any help on this.

An example of what I'm trying to do can be seen in this mockup - the top grey bar. http://anony.ws/i/UparZ.png
Many possibilities to do it. For the top bar in your example I would use e.g. this structure:

PHP Code:
<include name="TopBar">
  <
control type="group">
    
# Put everything inside a group. This makes it easy to animate and show/hide if needed
    
[...]
    
# This would be the background image
    
<control type="image">
      [...]
    </
control>
    
# The left info would be an image and a label control. You can also use a grouplist here but it's not needed
    
<control type="image">
      [...]
    </
control>
    <
control type="label">
      [...]
    </
control>
    
# For the right info (weather & clock) I would use a right aligned group list because the clock can have am/pm and the city name is variable
    
<control type="grouplist">
      [...]
      <
orientation>horizontal</orientation>
      <
align>right</align>
      
# place the images and labels here
    
</control>
  </
control>
</include> 

Hope that helps. Smile
Thank you, I'm working on adding that into the includes.xml and I think I understand most of what you've written. I've put <include name="TopBar"> beneath the <include name="BehindDialogFadeOut"> section, is that the right way to go?
I just can't seem to get it to work, hmm.
I'm not sure if this is the advised way of doing it but I managed to get it working by editing IncludesBackgroundBuilding.xml and using this:

Code:
        <control type="image">
            <posx>0</posx>
            <posy>0</posy>
            <width>1280</width>
            <height>50</height>
            <texture>topbar.png</texture>
            <visible></visible>
            <include>VisibleFadeEffect</include>
        </control>

That takes the time on the right and the stuff on the left on all screens and then I have adapted it to allow for the date and time on the homescreen, is that the totally wrong way of doing it? It appears to produce the desired result, although now I'm left with working out a way to drop the fanart or background images by 50 if possible - any ideas on that?
First of all, which skin do you mod? Confluence? You should better post that here then. If you add an include to the includes.xml, you have to add it somewhere or it won't show. So if you added <include name="TopBar">...</include>, you need to add <include>TopBar</include> in the window(s) where you want to show it.
It's based on Confluence but will a lot of changes, homescreen is nearly done, it's simple and clean.
Piers, no offense but start by reading the skinning manual. When you're done read it again. Then open some XMLs, and maybe the skin controls page and start experimenting.

These questions are so basic stuff that if you are going to make lots of changes and ask help with everything there's a long road ahead of you.

With that said, if you have a mockup of what the Confluence home should look like and want to share it, i could take look, and maybe add it to my mod.
This is what I've done so far, it's all coded and homescreen is more or less finished, I'm now working on the other pages. I've read the manual and read it again and have it bookmarked so I can re-read it, there are just a couple of basic parts I've (so far) got stuck with Smile

Having said that there are a few tweaks still to be made to the screen, I'm redoing every image file as well and that's nearly completed, I'm testing on a tablet (android), rpi, windows and mac to make sure it's fast'ish.

Movies

Image

And the full res screenshot: http://anony.ws/i/2013/03/10/7atqQ.png

TV

Image

Full res: http://anony.ws/i/2013/03/10/qg9MU.jpg
That looks very nice. When it's finished i think i'll abandon my skin and start using your's Big Grin
(2013-03-10, 19:29)toiva Wrote: [ -> ]That looks very nice. When it's finished i think i'll abandon my skin and start using your's Big Grin

Want to merge under a new skin name?

Here's one of the TV views

Image

full res: http://anony.ws/i/2013/03/10/jOKqG.jpg

There are plenty of tweaks that need doing here and there but it's starting to look the way I want it to Smile

And a view of the Movies in thumb

Image

Full res: http://anony.ws/i/2013/03/10/yezsS.jpg
Apologize for dropping in here for something so trivial, all I really want to know is the code for including the icons next to movies, tv shows, music, etc. I assume is in a modification to the home.xml. could you please show me the code to do that? thanks in advance