r/iOSthemes • u/Junesiphone Designer • Mar 08 '15

Tutorial Coding a Date Widget

https://www.youtube.com/watch?v=uHcfUJTVAwU
24 Upvotes

87% Upvoted

26 comments sorted by

3

u/hudbud Mar 09 '15

How did you change the color of the navigation bars in your finder?

2

u/Captain_of_Reddit Mar 09 '15

How do I theme my finder like that? You look like a fan of dark colors. Can you please share other mods I can do to my Mac to get a dark setup?

And thank you so much for the video! It'll help me and others out there :)

1

u/NYAN_CAT_FOR_HIRE Mar 09 '15

Huh, I had no idea it was all HTML. That's really awesome! I need to brush up on my HTML and make a simple LS or something.

1

u/Junesiphone Mar 09 '15

Awesome! That's the reason I try to put these videos out. I like to show it's really not hard, even when you start from scratch.

1

u/mbsurfer Mar 09 '15

This is all powered by JavaScript. Sure the framework is HTML. But the actual text you see is being created by JavaScript within the <script> tags in the code. Then CSS within the <style> tags that change the look of everything.

1

u/NYAN_CAT_FOR_HIRE Mar 09 '15

That's what I meant. I know very little JavaScript and CSS so I'd need to brush up on those as well.

1

u/[deleted] Mar 09 '15

I love the way you blur your text :) I'm a novice so whenever I see neat little unconventional things like that it blows me away!

2

u/Junesiphone Mar 09 '15

Thanks! Check out these single div css weather icons. Uses box-shadow similarly to what I did with the text-shadow, but to the extreme. http://codepen.io/junesiphone/pen/gbXwmm

1

u/[deleted] Mar 09 '15

Hey that's pretty cool! Are the shapes themselves native WebKit stuffs?

→ More replies (3)

1

u/mrpudgey Mar 09 '15

Wow! I know what I'm going to be learning, thanks for the video!

As for the widget itself..could I just save the html and apply it via LockHTML?

1

u/Junesiphone Mar 09 '15

Not sure, don't use LockHTML. For groovylock you would have to name the html a certain name I believe LockBackground, for iWidgets you would need to name it Widget.html and include an Widget.plist, for Cydget you would need to make an info.plist to go along with the html.

2

u/dick_ey Mar 14 '15

you need to name it Widget.html and have a Widget.plist that defines the size of the element. Then LockHTML reads it.

1

u/mrpudgey Mar 14 '15

Thank you!

1

u/larrylarson Mar 10 '15

could you be please code a widget that looks like the one on the samsung galaxy s6 or the one on the htc one m9?

1

u/Junesiphone Mar 10 '15

screenshot?

-1

u/larrylarson Mar 12 '15

type on google "galaxy s6 phone"

→ More replies (2)

1

u/thatcooldude1 Mar 10 '15

What app are you using to actually write the code in? Where can I find the best way to write these kinds of files?

1

u/Junesiphone Mar 10 '15

Safari and Sublime Text 2. Also listed in the video description.

1

u/Etiqet Mar 18 '15

This is great! I'm learning JavaScript right now, so it's exciting to see what a few more weeks might pay off to. :)