okedo

Theme 20 : Okedo (updated)

theme garden // best viewed in Chrome

- Features :

  • 1 side picture (auto width to 150px)
  • sliding and fading description
  • sliding navigation menu
  • sliding title & is the refresh/home button
  • 2 column posts
  • bigger post in permalink (250-> 400, 400->500)
  • fading notes & time ago on hover, permalinks.
  • bigger post in permalink
  • stylished scrollbar (chrome)

- In option :

  • Music player container
  • 1 column post
  • endless scrolling 
  • bigger post size (400px)
okedo sliding navigation. explanation/tutorial

So basically it’s a table of 1 row and 2 column.

For okedo it’s 3 rows, one for about, one for menu and one for the title, but same concept,basically it goes like that :

<table id=“table”>
<tr id=“row”>
<td><div id=“left”>2 links</div></td>
<td><div id=“right”>
<div class=“link”>link 1</div><div class=“link”>link 2</div>
</div></td>
</tr>
</table>

Then it’s all in the css :) the sliding repose on the webkit transition, width playing, margin-left and overflow on hidden.

So again, basically, it is :

#table
{width:a+b+c px;
overflow:hidden;}

#right
{width:a px;
overflow:hidden;
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-out;-moz-transition: all 1.s ease-out;transition: all 1s ease-out;}

#left
{width:b px;
margin-left:-b px;
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-out;-moz-transition: all 1.s ease-out;transition: all 1s ease-out;}

#row:hover #left
{margin-left:0px;}

#row:hover #right
{padding-left: c px;}

#left is the sliding element, we set its margin-left superior or equal its width so it is positionned “outside” the table.

When we hover #row, #left loose the margin left so it’s “sliding back” next to #right, the slide and not simple appearance is due to the webkit-transition.

For #right it’s just padding on hover of #row :)

yuu-tsu asked:

Hi, I'm using one of your themes but my infinite scrolling doesn't work and some posts don't load (;´༎ຶД༎ຶ`) I tried to copy and past the code again but it doesn't work~ *I don't even know if you can help me, because I checked all the " and things like that*

Hello :) well I’m sorry but endless scrolling doesn’t work, (I even striked it from the features, nobody noticed again right OTL) I still haven’t found a solution so I left it like that for the brave ones who’ll want to try to fix it haha, or for it to be simplier when I’ll find the solution :)

claidi-deactivated20120715 asked:

Hi there! First off, I love your themes, Ive used them for a while and recently I decided to switch to Yarodomo. However I was wondering for the Music player is there a specific one you recommend using? I tried using scmplayer but the coding didnt seem to work right. Thanks for any help and of course thank you for the beautiful themes!

Hello, well scmplayer can be used with it but the code is not to be paste in the “code container” but following the “normal instructions” of scm :)

for the “code container” I would recommand the Billy player :)

(Thanks <3 and thank you for using them ^^)

anonymous asked:

Is there a way to delete the 'top' bottom in the Okedo theme you made? I can barely see the 'forth' button on my screen because the 'top' button shows more than that one so I'd liek to remove it if it possible?

Hello :) yes it is, erase that part :

<a href=“#top”><div id=“top”>+ scroll</div></a>