Placed in: 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   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..
Reply | Quote
Marco - Please explain   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
Reply | Quote
arievianza - user 5   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!
Reply | Quote
arievianza - well stupid me!   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 :(
Reply | Quote
Marco - Fix!   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
Reply | Quote
arievianza   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?
Reply | Quote
Marco - Sure   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!
Reply | Quote
arievianza   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!
Reply | Quote
Chillfresh   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?
Reply | Quote
Marco - Thanks!   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!
Reply | Quote
Chillfresh   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! :)
Reply | Quote
Janusz - MainMenu color   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 ?
Reply | Quote
Marco - Colors elsewhere   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!
Reply | Quote
Zoonzoomder - margins   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!
Reply | Quote
Marco - Yes, you can   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.
Reply | Quote
Zoonzoomder - Still - no margin on the right   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?
Reply | Quote
Anonymous   2008-02-14 20:02:53
Gravatar image Marco,

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

Thanks again!
Reply | Quote
arievianza - what you've found out?   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...
Reply | Quote
Marco - Check his CSS   2008-02-20 18:24:45
Gravatar image Try to check his CSS file and compare it with yours ;) .
Reply | Quote
arievianza   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?
Reply | Quote
Zoonzoomder   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?
Reply | Quote
arievianza - compatible w/ simple image gal   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?
Reply | Quote
arievianza - additional   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
Reply | Quote
Marco - E-mail   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,,,
Reply | Quote
arievianza - already email you   2008-02-18 18:10:10
Gravatar image ok... I already email you...
sorry 4 the inconvinience...
Reply | Quote
Doctor - 1.x availabl ?   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 ... ]
Reply | Quote
Marco - Not for 1.5   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!
Reply | Quote
Doctor   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
Reply | Quote
doctor   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
Reply | Quote
Marco - No worries   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.
Reply | Quote
doctor   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
Reply | Quote
arievianza - yea it happened to me too...   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...
Reply | Quote
zeroonenine - same problem   2008-03-18 16:47:11
Gravatar image same problem, guru, please help us ;)
Reply | Quote
grishnak - How to remove javascript error in IE7   2008-12-15 07:18:38
Gravatar image Hi I managed to hack the code to remove the javascript error reported in IE7

Open the file: mf_whitesquid/mf_scriptdlmenu/mf-scriptdlmenu.js

Place a comment in front of line 9:

Before
Code:
mfsdl_current = mfsdl_activemenu[0]

After
Code:
// mfsdl_current = mfsdl_activemenu[0]



Comment out lines 36 - 56 as follows:

Code:
	//Set active item



/*

	if (mfsdl_activemenu[0])



	{



		actitem = document.getElementById("mfsdl-mainnav"+mfsdl_activemenu[0].toString())



		if (actitem)



		{



			if (actitem.className) actitem.className += " active"; else actitem.className = "active";



		}	



		mfsdl_recover = mfsdl_activemenu[0]



	}



	if (mfsdl_activemenu[1]) {



		actitem = document.getElementById("mfsdl-subnavitem"+mfsdl_activemenu[1].toString())



		if (actitem)



		{



			if (actitem.className) actitem.className += " active"; else actitem.className = "active";



		}	



	}



*/

It is important to leave the last brace (}) uncommented.

and finally, Comment out lines 80 - 108 as follows:

Code:
/*



function mfsdl_setHover () {



	if (mfsdl_current == mfsdl_recover) return



	mainx = document.getElementById("mfsdl-mainnav"+mfsdl_current.toString())



	if (mainx)



		mainx.className += ' hover';



}







function mfsdl_clearHover () {



	if (mfsdl_current == mfsdl_recover) return



	mainx = document.getElementById("mfsdl-mainnav"+mfsdl_current.toString())



	if (mainx)



		mainx.className = mainx.className.replace(/[ ]?hover/, '');



}







function mfsdl_hide () {



	subx = document.getElementById("mfsdl-subnav"+mfsdl_current.toString())



	if (subx)



		subx.style.display = "none"



	mfsdl_clearHover ()



}







function mfsdl_show () {



	subx = document.getElementById("mfsdl-subnav"+mfsdl_current.toString())



	if (subx)



		subx.style.display = "block"



	mfsdl_setHover ()



}



*/


Not the most elegant solution I know :whistle: , but, I haven't noticed any problems from doing this, however, if someone has a cleaner method I'm sure there are a few of us that would appreciate it :cheer:
Reply | Quote
grishnak - oops   2008-12-15 07:59:46
Gravatar image Spoke too soon, after clearing the cache there is still an error :confused: .

I placed /* */ around the contents of mf_whitesquid/mf_scriptdlmenu/mf-scriptdlmenu.js, effectively commenting out the complete content of that file.

You may be able to just remove that file, just make sure you make a backup of it.

I now receive no errors in IE7
Reply | Quote
doctor   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
Reply | Quote
doctor   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:
Reply | Quote
doctor - Error   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
Reply | Quote
taha - facing the same problem   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
Reply | Quote
strategynode - how to move the splitmenu to t   2008-03-07 19:08:05
Gravatar image How can i move the slit menu to the right??
Reply | Quote
doctor - Moved   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:
Reply | Quote
strategynode - thanks   2008-03-10 07:57:13
Gravatar image thanks lot for the tip
Reply | Quote
matt - Thanks!   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!
Reply | Quote
nerovik - Scrolling menu   2008-04-02 16:03:54
Gravatar image Fantastic template. Is it possible make main menu scrolling ?
Thanks
Reply | Quote
Nerovik - Javascript error   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)
Reply | Quote
markus - Not working   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 ?
Reply | Quote
Nerovik - Javascript error   2008-04-24 19:07:59
Gravatar image I did not undertstand your reply. <img src=hock:' />
Reply | Quote
Ameise Ink - header-deco   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 :)
Reply | Quote
Ameise Ink - header-deco   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...
Reply | Quote
Marco - Contact me   2008-06-08 11:26:49
Gravatar image Hi there Ameise Ink,

Could you please contact me through the contact form? We'll get in touch over the mail, maybe I can help you there ;).

Good to hear you like the template.

Greetings,,,
Reply | Quote
Ameise Ink - Font colours   2008-06-12 18:16:33
Gravatar image Hi Marco, template is coming along nicely, however, in making some changes, the overall look has changed "slightly" and was looking for some advice on how to rectify things a little :whistle:
1. I was wanting to know if there is some way to modify the squid code so that I can incorporate it more into my header.
2. I need to change the font on just the main body, but can't for the life of me work out how to do it without effecting everything else...
3. I would like to know how to get the footer .gif file back - as it got lost when I changed the mainbody colour around (and I can't remember specifically how I did this!!)
4. To the right of the top/split menu - I am getting tiny random icons (like print,pdf etc..). Hmmm, was wondering how to remove them...
5. I can't change the padding between the image seen on the main page and the text - can you help me with this?
6. I 'fluro green' (?)navigation text that comes up when I go through the menus (eg: Amieis Ink Images/ Prints/ For Sale) is too small to see with the dark background. I was hoping you could tell me where the code is to make this font slightly bigger?
You css code is so much more detailed than other templates, so I am finding it quite a challenge!!!
Lisa
Posted image
Reply | Quote
Ray - test url - testing template for full upgrade   2008-08-25 21:03:40
Gravatar image Marco -
can you help with the 'code' that needs to be taken out with the error:

javascript error:
mfsdl_activemenu is undefined - Line 9 Char 2
(IE7 - Windows Vista - Linux Server)

thanks,
Ray
Reply | Quote
Abhi - Thanks   2008-10-15 17:34:03
Gravatar image Hey buddy...

I downloaded the template and building my site on it.... just a simple question.....can i hide the menu from the left and keep the split menu visible....and working ?

am a newbie :X
Reply | Quote
Anonymous   2009-01-08 14:11:23
Gravatar image good :D
Reply | Quote
your's   2009-01-24 07:47:49
Gravatar image thanks, this template it's so my favorite...
Reply | Quote
tiger - content edit   2009-02-10 21:48:17
Gravatar image anyone know where in the code i can edit the content background colour ie. the bit above the turned page image. I want to change it to balck with white fonts.

thanks
Reply | Quote
Mike - Background in Firefox   2009-03-04 09:48:32
Gravatar image Hi

First of all, it's a great template!
In the forum, I found the following problem:

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.

However, I didn't find the answer -> In firefox, the rightside not fully extend to bottom of the screen. Is there any update which solves that problem?

regards
mike
Reply | Quote
Nickie - Change color of links   2009-06-02 21:37:12
Gravatar image Hi can anyone tell me how to change the color of the links? I'm not very fond of the green text links.
Any help would be much apppreciated.
:)
Reply | Quote
Paulo - Menu Flash   2009-07-31 15:22:53
Gravatar image Hi.
Why my main menu dont's work in flash?

Can you hel me?

Sorry my inglish but i'am portuguese
Reply | Quote
Windayani - mf_whitesquid Menu Probem   2009-11-14 16:07:17
Gravatar image I am just learning Joomla and very interested in using your template, just now I'm finding a problem that is his Main Menu appears in 2 places at once. First on the top left (where it belonged) and the second on the Top Menu. If I remove one of the existing menu in the Main Menu the menu at the end of Top Menu also be deleted. While the actual Top Menu can not appear on the Top Menu of his own.

Where lies the fault, I do not understand how to edit the script. Is this my problem can help ..??

regard,
Reply | Quote
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Unsubscribe from e-mail notifications.
 
< Prev
[ Back ]
Subscribe

3532 readers subscribed here. Subscribe today!