customization

3 views
Skip to first unread message

animasana

unread,
Nov 26, 2009, 3:17:11 AM11/26/09
to Sikbox
Hi there, I am looking to customize sikbox for my site. Specifically,
I want to :
1. reduce the height of the search box
2. make the search box transparent
3. use a custom search "button" (text link)

I have downloaded and started modifying the minimalist.css, and have
linked it to my page. I am stuck on:
1. how to make the manually edited css file be the one that is used by
the script
2. how to code the css to make the search box transparent
3. how to use my own "search" text the button to run the search.

Any takers?

Many thanks!

Eduardo Sasso

unread,
Nov 26, 2009, 10:51:33 AM11/26/09
to sik...@googlegroups.com
Hi,

This URL http://sikbox.com/#skin has some tips on how to create your
own theme for sikbox, in the css you can use the !important clause to
override any behavior.

The only thing that's a bit more complicated is to change is the serch
text. Right now it's fixed but if you know a little bit of jQuery you
can change it.

Thanks

Eduardo Sasso

2009/11/26 animasana <stuk...@gmail.com>:
> Hi there, I am looking to customize sikbox for my site. Specifically,
> I want to :
> 1. reduce the height of the search box
> 2. make the search box transparent
> 3. use a custom search "button" (text link)
>
> I have downloaded and started modifying the minimalist.css, and have
> linked it to my page. I am stuck on:
> 1. how to make the manually edited css file be the one that is used by
> the script
> 2. how to code the css to make the search box transparentTh

Andrew Tait

unread,
Dec 2, 2009, 9:00:40 AM12/2/09
to Sikbox
Hi Eduardo.

Love this application, great work!

On changing the search text with jQuery, how would you do this? I
tried copying the magic.js file to my local server and changing the
relevant code, but when I tried reloading the page the search box
stopped appearing.

Do you have to define the jQuery bit seperate after calling the js on
sikbox?

Thanks..

On Nov 26, 3:51 pm, Eduardo Sasso <eduardo.sa...@gmail.com> wrote:
> Hi,
>
> This URLhttp://sikbox.com/#skinhas some tips on how to create your
> own theme for sikbox, in the css you can use the !important clause to
> override  any behavior.
>
> The only thing that's a bit more complicated is to change is the serch
> text. Right now it's fixed but if you know a little bit of jQuery you
> can change it.
>
> Thanks
>
> Eduardo Sasso
>
> 2009/11/26 animasana <stuki...@gmail.com>:

Eduardo Sasso

unread,
Dec 2, 2009, 10:28:20 AM12/2/09
to sik...@googlegroups.com
Hi Andrew,

You shouldn't change the magic.js directly. Instead you should add you
js code elsewhere and then you can manipulate some aspects of Sikbox.

Thanks,

Eduardo Sasso

2009/12/2 Andrew Tait <and...@mondofacto.com>:

Andrew Tait

unread,
Dec 2, 2009, 10:47:08 AM12/2/09
to Sikbox
Thanks.

So I am calling the magic.js file from the sikbox server? But then
adding my own JS to change the title in the search box. How would I do
this?

Is it this line: jQuery("#searchbox").val("Sikbox Live Search");

I have used jQuery but not to the extent to know how to edit something
like this externally.

Thanks again.

On Dec 2, 3:28 pm, Eduardo Sasso <eduardo.sa...@gmail.com> wrote:
> Hi Andrew,
>
> You shouldn't change the magic.js directly. Instead you should add you
> js code elsewhere and then you can manipulate some aspects of Sikbox.
>
> Thanks,
>
> Eduardo Sasso
>
> 2009/12/2 Andrew Tait <and...@mondofacto.com>:
>
> > Hi Eduardo.
>
> > Love this application, great work!
>
> > On changing the search text with jQuery, how would you do this? I
> > tried copying the magic.js file to my local server and changing the
> > relevant code, but when I tried reloading the page the search box
> > stopped appearing.
>
> > Do you have to define the jQuery bit seperate after calling the js on
> > sikbox?
>
> > Thanks..
>
> > On Nov 26, 3:51 pm, Eduardo Sasso <eduardo.sa...@gmail.com> wrote:
> >> Hi,
>
> >> This URLhttp://sikbox.com/#skinhassome tips on how to create your

Eduardo Sasso

unread,
Dec 4, 2009, 5:41:55 AM12/4/09
to sik...@googlegroups.com
Hi Andrew,

Yes, you can definetely do something like that. It should work.

Regards,

Andrew Tait

unread,
Dec 7, 2009, 6:04:11 AM12/7/09
to Sikbox
I appreciate your help Eduardo, but can you be a bit more descriptive
about what I should actually do?

I tried doing that line I mentioned in my previous post but it had no
effect.

After looking through the code again I noticed that the string "Sikbox
Live Search" appeared thrice, in between some if statements as well.

Do you know what code I have to use to deal with this?

Thanks, Andrew.
> >> >> This URLhttp://sikbox.com/#skinhassometips on how to create your

Eduardo Sasso

unread,
Dec 7, 2009, 11:33:03 AM12/7/09
to sik...@googlegroups.com
Hi Andrew,

As i said you before, right now Sikbox doesn't have the option to
change this label.

However, if you know some JavaScript you cant try to play with jQuery
to see if you can achieve this.

I've never done this, so i'm just guessing it may work. You have to
play around to see if it really works.

For the next version of Sikbox we are planning to make it much more
customizable and easy to change this info.

Thanks again.

Eduardo Sasso

2009/12/7 Andrew Tait <and...@mondofacto.com>:

animasana

unread,
Dec 9, 2009, 3:23:39 AM12/9/09
to Sikbox
Hi Eduardo,
Thanks for your reply. I have taken a look at the URL you sent. I'm
sure the time will come when a volunteer will write a good sized user
guide. For now, I will attempt to make the mods by trial and error.
Man thanks
Stuart


On Nov 26, 4:51 pm, Eduardo Sasso <eduardo.sa...@gmail.com> wrote:
> Hi,
>
> This URLhttp://sikbox.com/#skinhas some tips on how to create your
> own theme for sikbox, in the css you can use the !important clause to
> override  any behavior.
>
> The only thing that's a bit more complicated is to change is the serch
> text. Right now it's fixed but if you know a little bit of jQuery you
> can change it.
>
> Thanks
>
> Eduardo Sasso
>
> 2009/11/26 animasana <stuki...@gmail.com>:

wccoder

unread,
Jan 6, 2010, 7:06:20 PM1/6/10
to Sikbox
I originally tried

jQuery(document).ready(function(){ jQuery('#searchbox').val('My search
text');});

This doesn't work though, since the document ready event is fired
before the sikbox code loads and creates the #searchbox element.

Also, magic.js includes some logic that replaces the "Sikbox Live
Search" text on the blur and focus events.

My solution is to wait a delay of 2 seconds after the DOM has loaded,
which hopefully gives the sikbox JS time to load and create the
#searchbox element. I then unbind the original sikbox handlers, set my
text and bind my own handlers. If you guys can, it'd be ideal to add
another parameter to the URL for magic.js that can specify the text,
which then gets subbed in to your event handler logic, or even use a
JS variable for the search text that can be created if it doesn't yet
exist (i.e. uncustomized.) The delay hack I've created is lame, but I
don't know if there's an event I can use that gets triggered when
external JS has loaded.

Here's my code:

<script type="text/javascript">
jQuery(document).ready(function(){
setTimeout(function(){
jQuery("#searchbox").unbind('focus').unbind('blur');
jQuery("#searchbox").val("My Search Text");
jQuery("#searchbox").addClass("search_title");
jQuery("#searchbox").focus(function(){
if(jQuery("#searchbox").val()=="My Search Text"){
jQuery("#searchbox").removeClass("search_title");
jQuery(this).val("")}});
jQuery("#searchbox").blur(function(){
if(jQuery.trim(jQuery("#searchbox").val())==""){
jQuery("#searchbox").addClass("search_title");
jQuery("#searchbox").val("My Search Text")}});
},2000);
});
</script>

-e.

> >> >> >> This URLhttp://sikbox.com/#skinhassometipson how to create your

Eduardo Sasso

unread,
Jan 14, 2010, 10:46:18 AM1/14/10
to sik...@googlegroups.com
I'm glad it worked.

I know that this is a little hacking but fortunately you've made it work, so this is what matters.

The next version of Sikbox will be much more flexible.

cya,

Eduardo Sasso

2010/1/6 wccoder <wcc...@gmail.com>
Reply all
Reply to author
Forward
0 new messages