W-script Wallpaper Script

Icon

W-script premium wallpaper script is back!

Detailed Widget Creation Tutorial For W-script

I decided to write a tuto­r­ial about how to cre­ate cus­tom wid­gets from scratch.
Tips, tricks and expla­na­tions shown here will be use­ful not only for cre­at­ing wid­gets,
but also teach some basic knowl­edge about how things works in W-script.
This is mostly for new­bie users, but maybe even some­what advanced users may find some­thing useful.

Each para­graph includes one or two exam­ples of code, impor­tant parts are bold.
When you need to insert cus­tom code in exist­ing file it will be shown like this:

Approx­i­mate line num­ber where to insert code
one or two lines of exist­ing code, so you know pre­cisely where the code is sup­posed to be
//comment like this or <!– == like this == –> to define start of cus­tom code
exam­ple of code
//end com­ment
few more lines of exist­ing code

!! The code exam­ples from this post might con­tain errors due to the Word­Press text formatting.

Bet­ter down­load code exam­ples from  http://hellkern.com/mod.zip or http://www.w-script.com/download/code%20hacks/custom%20modules.zip

Wid­get

First file to cre­ate is the wid­get itself.

Copy file templates\default\html\section_advertisements.tpl
Rename it as:  section_custom_1.tpl
(or any­thing you want, but the exten­sion must remain “.tpl” and you must remem­ber or write down name of this file, it will be needed later)
Open the file with your favorite code edi­tor (Notepad++ works just fine)
Delete all the con­tent and replace it with:

<h2 class=“headers” id=“cstm”>
<span class=“ui-icon ui-icon-heart c3”>&nbsp;</span>
{‘custom_1′|Lang}
<span class=“ui-icon ui-icon-triangle-1-w c4”>&nbsp;</span>
</h2>
<div id=“custm” class=“hidden”>
{if  CUSTOM_1 != ”}
{$smarty.const.CUSTOM_1|base64_decode}
{else}
<div style=“padding:10px 36px 10px 36px”></div>
{/if}
</div>

Expla­na­tion.

!! Impor­tant, all the vari­ables used here are case sen­si­tive, “CUSTOM_1″ is NOT the same as “custom_1″ Don’t for­get that
id=“cstm”> This is the ID of this wid­get. In this exam­ple it’s “cstm” . You may call it what­ever you wan’t, but the name must be unque for ewery wid­get. Just use “cstm2″, “cstm3″ and so on for other wid­gets. Remem­ber that name for later use.

ui-icon ui-icon-heart c3″> Here “ui-icon-heart” is the small icon what appears on left side of the wid­get. If you want to change widget’s icon open \templates\default\images\icons\ui\ui-icons_cccccc_256x240.png and choose what icon you want for the wid­get, then open \templates\default\css\jquery\ui.css and try to locate icons you just chose, start­ing from line 92, it should not be too hard to under­stand what is what there.. Finally replace “ui-icon-heart” with the icon you chose from ui.css

{‘custom_1′|Lang} Here “custom_1″ rep­re­sents string from the lan­guage file. This too needs to be unique for every wid­get, I’ll explain later how to add cus­tom strings to lan­guage file.

<div id=“custm” This is ID for Wid­gets Con­tent, must be unique.

{if CUSTOM_1 and const.CUSTOM_1|base64 Here “CUSTOM_1″ rep­re­sents the code that will be vis­i­ble in this wid­get. This If/else state­ment checks if the code has been added. Name must be unique.

Sec­tions

This part adds the new wid­get to the sidebar.

Next, edit file: \system\application\config\sections.php

At the end add:
// cus­tom side­bar hack
$sec­tions [ ‘section_custom_1′ ] = array (
’title’ => ‘Cus­tom wid­get 1′, ‘descrip­tion’ => Lang ( ‘custom_w_1′ ), ‘show’ => TRUE, ‘order’ => 1
);

Expla­na­tion:

[ ‘section_custom_1′ ] This is the name of the widget’s file you cre­ated in 1st step, only with­out “.tpl” exten­sion.
’Cus­tom wid­get 1′ This is title of wid­get, write what­ever you want, this title is only seen in wid­get set­tings panel..
Lang ( ‘custom_w_1′ ) Lan­guage string for widget’s description.

Cook­ies!

Edit file: \templates\default\js\custom.js
This part keeps wid­get col­lapsed or uncol­lapsed depend­ing on cookie
Line ~ #48

if($.cookie(‘pw’)!=‘hidden’){$(‘#pw’).removeClass(“hidden”);$(‘#pc > span.c4’).removeClass(‘ui-icon-triangle-1-w’).addClass(‘ui-icon-triangle-1-s’);}
//custom side­bar hack
if($.cookie(‘custm’)!=‘hid­den’){$(‘#custm’).removeClass(“hidden”);$(‘#cstm > span.c4’).removeClass(‘ui-icon-triangle-1-w’).addClass(‘ui-icon-triangle-1-s’);}
//end of cus­tom side­bar hack
if($.cookie(‘cocw’)!=‘hidden’){$(‘#cocw’).removeClass(“hidden”);$(‘#coc > span.c4’).removeClass(‘ui-icon-triangle-1-w’).addClass(‘ui-icon-triangle-1-s’);}

This part allows users to collapse/uncollapse wid­get and writes a cookie about it..
Line ~#126

}
});
//custom side­bar hack
$(‘#cstm’).click(function(){
if($(‘#custm’).hasClass(“hidden”)){
$(‘#custm’).removeClass(“hidden”);
$.cookie(‘custm’, null, cookie_options);
$(‘#cstm > span.c4’).removeClass(‘ui-icon-triangle-1-w’).addClass(‘ui-icon-triangle-1-s’);
}
else {
$(‘#custm’).add­Class(“hid­den”);
$.cookie(‘custm’, ‘hid­den’, cookie_options);
$(‘#cstm > span.c4’).addClass(‘ui-icon-triangle-1-w’);
}
});
}
//end cus­tom side­bar hack
func­tion changebg(newbg){
showUpdate();

Expla­na­tion:

custm” and “cstm” must be the same vari­ables you used in the first step.

Data

I *think* that this part takes the code you will soon enter in admin’s panel and pushes it to the wid­get (not 100% sure, I’m a new­bie mysely, but this works)
Edit file: \system\application\controllers\admin.php
Line ~ #376

$set­tings [ ‘SMTP_PASS’ ] = prepare_constant ( ” );
}
//custom side­bar hack
$set­tings [ ‘CUSTOM_1′ ] = prepare_constant ( base64_encode ( $this->input->post ( ‘CUSTOM_1 ) ) );
//end of cus­tom side­bar hack
$set­tings [ ‘LANG_TYPE’ ] = prepare_constant ( $this->input->post ( ‘LANG_TYPE’ ) );

Expla­na­tion:
CUSTOM_1′ is the same vari­able you used in the first step.

User Friendly Interface.

This part cre­ates a new tab in admin’s panel, and allows you to edit wid­gets code with ease.
admin_settings.tpl
Line ~ #14

<li><a href=“javascript:void(0)” onClick=“ShowTab(7)” id=“tab7”>Design</a></li>
<!– ===Add The line Bel­low=== –>
<li><a href=“javascript:void(0)” onClick=“ShowTab(8)” id=“tab8”>x</a></li>
<!– ========================== –>

</ul>

Expla­na­tion

This adds tab named “x” Do not use longer name, there is not enough space in admins panel.
Line ~ 506

<li class=“clear”>&nbsp;</li>
</ul>
</div>
<!– ============ cus­tom =============== –>
<div id=“div8” style=“display:none”>
<ul>
<li>
<label class=“description” for=“CUSTOM_1″>{‘custom_w_1′|@Lang}</label>
<div align=“left”>
<textarea name=“CUSTOM_1″ class=“element textarea small” id=“CUSTOM_1″>{‘CUSTOM_1′|@form_validation_get_value:$smarty.const.CUSTOM_1|base64_decode}</textarea>
{CUSTOM_1′|@form_validation_print_error}
<p class=“guidelines”><small>{‘g_custom_1′|@Lang}</small></p>
</div>
</li>
</ul>
</div>
<!– =========end of cus­tom =========== –>
</fieldset>

Expla­na­tion:

This code adds a textbox in this tab and con­nects it with admin.php.

CUSTOM_1′ the same vari­able as in wid­get and admin.php
custom_w_1″ Descrip­tion lan­guage string
g_custom_1’ Guide­lines lan­guage string

Lan­guage Strings

Add new words and names.
Edit File: \language\english.php
Line ~ 9

$lang [ ‘charset’ ] = ‘UTF-8′;
// Reserved vari­able <–
// cus­tom side­bar hack
$lang [ ‘custom_1’ ] = ‘Cus­tom Side Bar 1 Title’;
$lang [ ‘custom_w_1′ ] = ‘Cus­tom Side Bar 1 descrip­tion’;
$lang [ ‘g_custom_1′ ] = ‘Enter here what you want to see in cus­tom side Bar 1′;
// end of cus­tom side­bar hack
$lang [ ‘cat_details’ ] = ‘Click this icon to access more options for this category’;

This one is pretty self explanatory

Cre­ate More Widgets.

Repeat steps 1–4 and 6 but use dif­fer­ent names for the vari­ables (“CUSTOM_1″, “cstm”, “custm” and others)

Only step 5 is a dif­fer­ent. Instead of cre­at­ing new tabs just add new textboxes in the same tab, like this:

<!– ================ cus­tom 1============== –>
<div id=“div8” style=“display:none”>
<ul>
<li>
<label class=“description” for=“CUSTOM_1″>{‘custom_w_1’|@Lang}</label>
<div align=“left”>
<textarea name=“CUSTOM_1″ class=“element textarea small” id=“CUSTOM_1″>{‘CUSTOM_1′|@form_validation_get_value:$smarty.const.CUSTOM_1|base64_decode}</textarea>
{‘CUSTOM_1′|@form_validation_print_error}
<p class=“guidelines”><small>{‘g_custom_1′|@Lang}</small></p>
</div>
</li>
<!– ================ cus­tom 2================ –>
<li>
<label class=“description” for=“CUSTOM_2″>{‘custom_w_2′|@Lang}</label>
<div align=“left”>
<textarea name=“CUSTOM_2″ class=“element textarea small” id=“CUSTOM_2″>{‘CUSTOM_2′|@form_validation_get_value:$smarty.const.CUSTOM_2|base64_decode}</textarea>
{‘CUSTOM_2|@form_validation_print_error}
<p class=“guidelines”><small>{‘g_custom_2′|@Lang}</small></p>
</div>
</li>
<!– ================= cus­tom 3=============== –>
<li>
<label class=“description” for=“CUSTOM_3″>{‘custom_w_3′|@Lang}</label>
<div align=“left”>
<textarea name=“CUSTOM_3″ class=“element textarea small” id=“CUSTOM_3>{‘CUSTOM_3′|@form_validation_get_value:$smarty.const.CUSTOM_3|base64_decode}</textarea>
{‘CUSTOM_3|@form_validation_print_error}
<p class=“guidelines”><small>{‘g_custom_3’|@Lang}</small></p>
</div>
</li>
</ul>
</div>

Usage instruc­tions and file sam­ples are in this post: http://www.w-script.com/how-to-make-custom-modules/

If you have any ques­tions please com­ment!

Translating W-script Wallpaper Script

You are ask­ing how it is pos­si­ble to trans­late W-script Wall­pa­per Script. Well, it is really easy. This is what I use:

1) open your instal­la­tion of W-Script Wall­pa­per Script in FTP client (I use SmartFTP)
2) go to language/english.php
3) down­load this file to your machine
4) open it in a text edi­tor, I use PSPad
5) replace eng­lish strings with desired lan­guage strings

note: It is not needed to trans­late every­thing, start­ing with it, trans­late just core strings vis­i­ble on home­page, e.g. admin­is­tra­tion can be in EN, no prob­lem — but if you have time and want to work, why not

6) upload it back
7) reload (F5) your page in browser to see changes
FINALLY: we shared the whole script with you, so share the trans­lated file with us, please!

Screenshot

W-script Wallpaper Script Screenshot

W-script: The Full Featured Wallpaper Site Creator Script

It takes min­utes to setup and start earn­ing money from your new web­site. If you need a seri­ous script to man­age your wall­pa­per site like a PRO then W-script wall­pa­per script is the right solu­tion, in front of the aver­age com­pe­ti­tion with giant steps.