Home
Whitesquid: a beautiful dark Joomla 1.0.x template

Two great (web)design websites, Dezinerfolio.com and Marcofolio.net, decided to team up to bring you something beautiful. The original dfTheme 2.0 made by Dezinerfolio was first released for Wordpress. After a while, they decided to make the theme for Drupal. Jackbook.com released it later for blogger.

Now, Marcofolio.net brings you this beautiful dark web 2.0 theme to Joomla! 1.0.x. This template called Whitesquid (Named after the demo website of the Drupal version of dfTheme 2.0) will really amaze your visitors.

Whitesquid for Joomla!

The template only works with Joomla! 1.5 when you have the legacy mode plugin enabled.

Of course this template can be downloaded and used for free.

  1. Whitesquid Download Whitesquid Download
  2. Whitesquid Demo Whitesquid Demo

Functionality

Split Menu

Split Menu

The Split Menu makes a copy of the Joomla! Main Menu and places it on top of the page.

Toolbar

Toolbar

This toolbar will allow the user to change the template to their needs. From the left to the right:

  1. Narrow screen
  2. Wide screen
  3. Fluid screen
  4. Larger font
  5. Smaller font
  6. Default font size

Decoration

Decoration

A random decoration is showed in the right-top corner of the page. I added it for fun, this subtile decoration is just some eye-candy.

Module positions

Module positions for Whitesquid

Modifications

Code modifications

Open up the index.php file with your favorite PHP editing program (Notepad will work too) and search for the following lines for modifications.

  1. #support extra color themes
    $mf_color_themes = array('default');

    If you want to add more color themes, add them in this array.

  2. # Change the width of the template
    $mf_width_default = 'wide';

    Change value to 'narrow' for standard 800x600 optimalisation (not recommended), 'wide' for 1024x768 and 'auto' for fluid width.

  3. # default color
    $mf_color_default = 'default';

    If you added a color theme, select the name of the default theme here.

  4. #font size default
    $mf_font_size_default = 3;

    Set the default font size.

  5. # Enable users option
    $mf_tool = 1;

    When you set this value to 0, no toolbar will be displayed.

Design modifications

Logo

Although the logo is already very cool, you meight want to change it to your own logo. To do so, simply overwrite the following file:
/mf_whitesquid/images/logo.png
with your own "logo.png".

Favicon

If you change the logo, you should also change the favicon. To get that to work, overwrite the following file:
/mf_whitesquid/favicon.ico
and replace it with your own "favicon.ico".

Decoration

To add more (or less) decoration images to your site, just add or remove images from the following directory:
/mf_whitesquid/images/default/header-deco/
Any image in that directory will be used for decoration.

Install

To install the template, simply follow these steps:

  1. Log in to your back-end of the site
  2. Go to "Installers" > "Templates - Site"
  3. Click on "Browser" and navigate to the downloaded ZIP archive
  4. Press "Upload File & Install"
  5. Go to "Site" > "Template Manager" > "Site Templates"
  6. Select mf_whitesquid and make it your default template

Download & Demo

  1. Whitesquid Download Whitesquid Download
  2. Whitesquid Demo Whitesquid Demo
Attribution-Share Alike 3.0

Big thanks to Dezinerfolio for letting me make their theme available for Joomla 1.0.x and for the demo server. Don't forget to check out their website, I have mentioned them before.

Feel free to give some feedback about the theme. Enjoy using it. Oh, and because Joomla! released their 1.5 Stable yesterday, I'll make this template for 1.5 compatible too. Later. Maybe.



Tags:  whitesquid template free joomla webdesign

Interested in this topic? You might enjoy another article I've written called

Comments
Add NewSearchRSS
arievianza   | 202.149.71.xxx | 2008-02-08 02:10:19
Gravatar image :cheer: so far this is my fave joomla template above all else...
i'm using this right now... btw, i'm still a nubie... try things here n there...
but i'm still confused about user 5 position... you mentioned here.. but when i installed it... and checked.. there's no user5!? btw, i had a plan to put some banner there ...

One other thing... if i put some module on the 'right' position... the content will get cropped and not auto adjust the tight space...

maybe a fix? thanx.. still a good work i think..
Marco - Please explain   | 62.194.187.xxx | 2008-02-08 08:41:23
Gravatar image Hi,

Thanks! Comments like these keep me motivated.

Are you sure you have a module published on position "user5"? Cause I'm pretty sure it's there ;) .

And what do you mean with "will get cropped and not auto adjust" ?

Enjoy the theme! Your site looks nice.

Greetings,
Marco
arievianza - user 5   | 202.149.71.xxx | 2008-02-11 08:50:21
Gravatar image hi...
it looks nice? well huge thx to your template man!
thx for the reply...
this is the further explain:
1. about the cropped thing.. i guess it's my mistake put too big image in content. already make it smaller and looks fine now.(sound silly yup?)
2. about the User5. still cant find it :p I already check the template index.php.. I found :





but when i check my site with : http://www.arievianza.com/index.php?tp=1
still I can't see any sign of user5?

3. what's the most compatible browser for view this template? In firefox and opera the gray background on the rightside not fully extend to bottom of the screen. This is not happen in IE.

Thx...
Your Site Rocks!
arievianza - well stupid me!   | 202.149.71.xxx | 2008-02-11 09:01:06
Gravatar image i cant display the code!!
stupid me.. sorry....
what i know its about loading the user 5 in index.php... mosLoadModule thing!

sorry :(
Marco - Fix!   | 62.194.187.xxx | 2008-02-11 23:43:23
Gravatar image Hi arievianza,

You were right! I made a stupid mistake by making the height of the position "user5" only 1 px. Try downloading the files again in the download section (you need to update all files, make a back-up first!), now I'm pretty sure that user5 will be displayed correctly.

Greetings,
Marco
arievianza   | 202.149.71.xxx | 2008-02-13 06:56:47
Gravatar image :) whew... it is a good news.. thanx man!
btw.. is there a possibility that i dont have to reinstall the template? maybe just edit some lines from some files in your template?
Marco - Sure   | 62.194.187.xxx | 2008-02-13 08:11:33
Gravatar image Sure:

Get the new "index.php" and the new "template_css.css" and it should work :).

Good luck!
arievianza   | 202.149.71.xxx | 2008-02-13 22:48:59
Gravatar image already replaced w/ the new one...
:cheer: whew... great! i can put sumthin on the user5 area! just niiice!

what i need to learn now is how to make positions so i can place module whrever i want...

thx vry much! u rock!
Chillfresh   | 80.4.110.xxx | 2008-02-08 11:38:52
Gravatar image Brilliant piece of work! Its remarkable that you are offering this free - righteous man, righteous :).

P.S. This comments extension is super, what is it?
Marco - Thanks!   | 62.194.187.xxx | 2008-02-08 12:50:37
Gravatar image Once again, these kind of comments keep me motivated to create new templates for the future.

The comment system used here is !JoomlaComment.

Good luck!
Chillfresh   | 80.4.110.xxx | 2008-02-08 14:55:50
Gravatar image Thanks for the headsup about the comments programme.
Incidentally I neglected to mention in my first comment that I think your site is great both in terms of design and the help, ideas, tools etc that you offer.

keep it up! :)
Janusz - MainMenu color   | 62.194.187.xxx | 2008-02-14 14:49:31
Gravatar image Hi people,
I am looking for line in "template_css.css" where I can change background color of mainmenu and font color (to make it brighter, even white) as well.
I think sometimes I am blind.
Can you help me ?
Marco - Colors elsewhere   | 62.194.187.xxx | 2008-02-14 14:48:53
Gravatar image If you want to change the color, don't look in the "template_css.css" file. That file is to define the width's etc.

The color scheme is located in "css/colors/default.css".

Good luck editing!
Zoonzoomder - margins   | 99.245.60.xxx | 2008-02-14 17:21:55
Gravatar image Hi,
First of all thanks for efforts to transfer this amazing template to Joomla.
I have only one comment, if you click on mainmenu/blog - notice that text is going all the way to the right margin in both columns. I don't know why this works nicely in front page and in blog right margin disapeares. Can I fix this in CSS? If yes, please advise.

Thanks!
Marco - Yes, you can   | 62.194.187.xxx | 2008-02-14 17:56:25
Gravatar image Hi,

Thanks for the heads up!

Of course you can change the margin when the template is "full right" (No modules on "left";).

Open the following file:
/css/templates_css.css

Search for:
#mf-mainbody-fr #mf-content{

And add "padding-right: 2.5%;"

That should work! Good luck.
Zoonzoomder - Still - no margin on the right   | 99.245.60.xxx | 2008-02-14 19:47:21
Gravatar image Marco,
Thanks. But still no margin on the right side.
Maybe it's problem because I don't have modules on right side?
Anonymous   | 99.245.60.xxx | 2008-02-14 20:02:53
Gravatar image Marco,

Sorry for bugging, I've found out:
was what I was looking for.

Thanks again!
arievianza - what you've found out?   | 202.149.71.xxx | 2008-02-20 18:09:47
Gravatar image I really want to know what you've founbd out to solve your problem?

:?: i tried putting padding right... problem is when there's no module on the right... right margin ok..but left menu is goin down like it has not enough space...
Marco - Check his CSS   | 62.194.187.xxx | 2008-02-20 18:24:45
Gravatar image Try to check his CSS file and compare it with yours ;) .
arievianza   | 202.149.71.xxx | 2008-02-20 18:31:34
Gravatar image hehehe yea..of course! :confused:
oo i think i misunderstood
You mean full right w/o left module... of course it will work!
:dry: but what if I want to give little margin at right.. with left module still there?
Zoonzoomder   | 99.245.60.xxx | 2008-02-21 19:46:46
Gravatar image Hey sorry, for some reason this part of my message was removed:
table.contenttoc td
If doesn't show up try search on template's CSS contenttoc and td .
-
BTW, alternative text for read more - doesn't work for me. Any idea?
arievianza - compatible w/ simple image gal   | 202.149.71.xxx | 2008-02-14 18:55:30
Gravatar image :cheer: hei....
it's me again...

after all the tweak before my site is running very nice w/ the tamplate... thanx 4 your suuport.

I use Free Simple Image Galleri (SIG). It used to work just fine. But then i noticed now it wont work like it supposed to. So I run some tests.
I try other template (refer to the manual it might be the bad template they said).
The Result is : SIG running smoothly on other template. But not if I use your template. :(

Please help.. I like SIG but.. more I dont wanna lose your great template.
Is there a way they can collaborate nicely?
arievianza - additional   | 202.149.71.xxx | 2008-02-14 19:06:48
Gravatar image :) I forget the detail :
the problem is when i click the SIG thumbnail in gallery content... it just open new window and not running the elegant slideshow like it supposed to.
This isn't happen w/ other templates.
thank you
Marco - E-mail   | 145.74.182.xxx | 2008-02-15 09:28:59
Gravatar image Hi Arievianza,

Strange; Your gallery seems to be working perfectly over here.

Could you contact me (use contact form), than we could discuss this further.

Greetings,,,
arievianza - already email you   | 202.149.71.xxx | 2008-02-18 18:10:10
Gravatar image ok... I already email you...
sorry 4 the inconvinience...
Doctor - 1.x availabl ?   | 193.188.105.xxx | 2008-02-20 17:51:58
Gravatar image hi,

can you please let me know when it is available for 1.x instead of 1.5 only.

i got this error :

Upload template - Upload Failed
Unrecoverable error "PCLZIP_ERR_BAD_FORMAT (-10)"
[ Continue ... ]
Upload template - Failed
Installation file not found:
[ Continue ... ]
Marco - Not for 1.5   | 62.194.187.xxx | 2008-02-20 18:21:43
Gravatar image This template is not for 1.5: it's for J! 1.0.x

If you're getting that error, do the following:
- Unpack the ZIP
- Upload everything to the /templates/ folder of your FTP

Now the admin panel should be able to find the template already, good luck!
Doctor   | 193.188.105.xxx | 2008-02-20 18:33:36
Gravatar image I got it,

the ZIP File was having some error,
I fix the zip file, make it a zip again with my RAR Extractor, and it works,

Thx. it is for 1.x (y)

excellent work . i am loving it
doctor   | 193.188.105.xxx | 2008-02-21 16:13:34
Gravatar image Error: mfsdl_activemenu is not defined
Source File: http://mywebsite.com/templates/mf_whitesquid/mf_scriptdlmenu/mf-scriptdlmenu.js
Line: 8

What is the fix for this ?

it appears on the error report on IE and Netscape
Marco - No worries   | 62.194.187.xxx | 2008-02-21 19:30:51
Gravatar image Hi doctor,

I think that's a mistake from my side :whistle: . When I build template, I also use a "menu-style switcher". But since this template doesn't need the menu-style switcher, I removed it from the package.

I forgot to remove the reference to the other file, that's why you're getting the minor error.

Nothing to worry abou, it's working fine :). If you want the error to be removed, feel free to dig in the code.
doctor   | 193.188.105.xxx | 2008-02-22 12:03:01
Gravatar image :angry: macro,

common, code guru's like you :evil: can do that in seconds, I am not a programmer, but actually a Quality Assurance Manager, so I can find such small things quickly, trying my luck to create my personal page, but i need your guidance definitely.

please send me the fix if it is possible for you ? :(

regards
arievianza - yea it happened to me too...   | 202.149.71.xxx | 2008-02-26 22:08:04
Gravatar image :( first i noticed when i try to install fireboard 'dorona brown' template :( and the template's not working :( it missing the category bar.. then i realize how bothering that mfsdl_activemenu stuff... if there's any help about this... my code skill is very limited...
zeroonenine - same problem   | 77.41.49.xxx | 2008-03-18 16:47:11
Gravatar image same problem, guru, please help us ;)
doctor   | 193.188.105.xxx | 2008-02-22 12:00:06
Gravatar image Hi,

The Header Image on right DECO Art, I wanted to shift this from RIGHT aligned to LEFT aligned and shift the splitMENU items on the RIGHT side. ( kind of Flip )

I am able to flip the DECO image from Right to Left. can anyone please guide me how to alight the menu on the right side ?

thx in advance
doctor   | 193.188.105.xxx | 2008-02-22 12:11:08
Gravatar image CSS Dock Menu, can I implement the same on the Right side of the splitMENU ?

i am just trying to do something, but every time it is disappeared when i do something :s

can you help me into this :kiss:
doctor - Error   | 193.188.105.xxx | 2008-02-23 17:11:17
Gravatar image Posted image

Hi Marco,

I have found a new bug, the template works fine in Safari, Firefox and IE 7, but the visibility on IE6 is not appropriate,

i am attaching the image for your reference.

Posted image

please suggest how to fix this for ie6 ?

regards
taha - facing the same problem   | 59.92.245.xxx | 2008-10-04 10:33:44
Gravatar image Hii
Even I am facing the same problem in IE6.
Have you got your error fixed?
how to do it?
please reply
strategynode - how to move the splitmenu to t   | 207.109.146.xxx | 2008-03-07 19:08:05
Gravatar image How can i move the slit menu to the right??
doctor - Moved   | 213.42.21.xxx | 2008-03-08 10:51:57
Gravatar image :evil:

i put an image on the left of the menu :arrow:

so it auto magically :angry: moved on right.

still dont know how to align it on right


:whistle:
strategynode - thanks   | 72.8.90.xxx | 2008-03-10 07:57:13
Gravatar image thanks lot for the tip
matt - Thanks!   | 68.227.126.xxx | 2008-03-10 09:40:10
Gravatar image I just wanted to let you know how much I like your template! I just installed it on a little side-project that I'm working on and I was very impressed. This is one of the best looking Joomla templates that I've seen.

Thanks for your work!
nerovik - Scrolling menu   | 195.68.110.xxx | 2008-04-02 16:03:54
Gravatar image Fantastic template. Is it possible make main menu scrolling ?
Thanks
Nerovik - Javascript error   | 195.68.110.xxx | 2008-04-02 16:22:03
Gravatar image Just let u know also when using your template.
I get a javascript error:
mfsdl_activemenu is undefined - Line 9 Char 2
(IE7 - Windows XP - Wamp Server)
markus - Not working   | 77.25.15.xxx | 2008-04-24 13:36:33
Gravatar image Well thanks to porting...but what do I wrong. Do I need plugins to show the left main menu correct ?
Nerovik - Javascript error   | 82.229.174.xxx | 2008-04-24 19:07:59
Gravatar image I did not undertstand your reply. <img src=hock:' />
Ameise Ink - header-deco   | 203.213.7.xxx | 2008-06-08 00:48:28
Gravatar image OMG!!! What a beautiful template. I installed it a few days ago and added virtuemart for my online store(which is integrating beautifully with the template), and easy eXtended gallery(for simple image display). I LOVE the abstract-1 header-deco and particularly want to keep it on the site. However, after installing easy eXtended galley, when the the abstract-1 header-deco comes up, it has turned from it's luminescent white to the same grey colour as the fonts in the menu buttons! The other thing I should mention is that the menu bar in the header now has enough menu items so that it now spans far enough to the right to just start to cover the abstract-1 header-deco. Any ideas how to rectify this? I REALLY want to keep this particular gif with its original white colour, because... :whistle:
One more thing I wanted to ask...I am wanting to incorporate one of my logos into the abstract-1 header-deco (by placing it on one of the 'squid tendrils' - so that it looks like it's walking along the tendril. Would you mind if I impose this on your already fabulous gif file???
My site isn't online yet for security reasons, but here is a jpeg of the page...ameiseink.com - Offline.jpg :)
Ameise Ink - header-deco   | 203.213.7.xxx | 2008-06-08 00:58:19
Gravatar image Hi,
Sorry, I meant png, not gif when I was referring to the header-deco abstract-1/2/3 files...