Sphinx 1.1 has seen minor improvements over the RC release. 99% were minor bug fixes, which is a direct reflection of our gracious premium members whom poured their guts out to ensure that our RC was as stable (or more) than most “final or gold” releases. From there, the community both openly and privately reported bugs, and all have been squashed.

This release does not incorporate any “new” features as it was a RC to final type release, with one exception.

While we were working out a minor kink in the downloads area, we added in the ability for users to easily add in their own custom download icons for individual file types. Images can vary with each theme, and are located in the Themes/”theme-name”/images/downloads directory.

A default set of icons has been included with this release, located in the common_files/Themes/sphinx/images/downloads directory.

Users simply add an image file with a name that corresponds to the downloads file extension. For example, for an .mp3 file, you could add mp3.gif to the downloads image directory, and it will show up as the file icon for that type of file.

We now look forward to two things on our immediate horizon. First, we’re already mapping out changes for a Sphinx 1.1.1 release, which is anticipated around the 1st of November.

Second, we’re already hard at work with SMF 2.0, and working to further the Sphinx brand. At this time, it looks like we will put a temporary hold on our highly anticipated stand alone version, and make sure we have SMF 2.0 capability as soon as humanly possible. SMF 2.0 brings a lot of changes to the table, and we do mean a lot. We firmly believe that users will be quite impressed with what the SMF folks have in store for 2.0, and it will definitely further expand the SMF brand.

From there, we will continue on with our stand alone version, and we’ve even duped convinced a third coder to pitch in on occasion to help bring this version to light.

Getting back to Sphinx 1.1, the following issues from the bug tracker have been resolved:

- 0000008: [HTML/CSS] Double radio buttons on Post (luke)
- 0000009: [Templates (Code)] Incorrect Link Format In News Template (luke)
- 0000011: [Modules] Typo in query when responding to guestbook entry… (luke)
- 0000013: [Blocks] Missing “admin” areas (luke)
- 0000015: [HTML/CSS] News only spans one column…
- 0000016: [Modules] Download section does not show image for file
- 0000020: [Modules] Log entry
- 0000022: [Modules] Associate particual icon image to a file in the download section
- 0000027: [Blocks] Log entry - undefined index: 0
- 0000028: [General/Unknown] Log entry - undefined variable secs

For more information, feel free to drop by our bug tracker.

In closing, we’d like to thank each and every Sphinx user for your support and usage of Sphinx. Without you, Sphinx would not be possible.

Enjoy!

That’s what we’re going to cover today, walking you through the basics of implementing your kick ass ideas.

Disclosure

First, understand that this isn’t exactly a beginner level article. If you do not know basic HTML/XHTML, CSS, and a little php, you will need to brush up on those skills. Don’t worry, there are plenty of forums and resources out there to help you get up to speed. Or, as an alternative, over time there will be additional themes made available by users and maybe the Developers for you to use.

Let’s get to it, shall we?

Please note that this is a basic overview, and you are expected to be able to fill in the blanks. This is not a hand-holding step by step guide, and we assume no responsibility for its misuse, etc.

Visualize, Create

First, you need to visualize what you want. Next, with Photoshop (Fireworks or a similar graphics program might work too, but we prefer Photoshop), draw it up!

This phase is your visual concept. No real need to add text and stuff, but you should at least sketch it out and get the basics out of the way.

Once complete, you will begin to copy various elements from your mock-up as you generate the HTML for it, and make new images from these pieces. Remember to take things into consideration such as file size, etc. If it is a solid color, use CSS instead. For a background that’s repetitive, take a 1, 2 or 4 px wide (or high if it is vertical) swath, and use the repeat property in CSS (x,y, etc).

Basic HTML Layout

On to actually theming your site, and creating the HTML.

We’re going to use the Sphinx default theme as a reference, so that you have a visual to look at while reading this. Now would be a good time to open up either your local Sphinx site, or your website in a new tab to reference on occasion.

First, let’s make a temporary directory locally to work with. Let’s say we make it on our Desktop, and call it my-theme. From here on, we will assume that you will be inside of this directory.

Next, remember we’re inside the my-theme directory, make another directory called images.

Next, let’s make a basic page, and work from there. Using your text editor of choice (Taco, BBEdit, TextWrangler, or similar for Mac; Kate, or even Vi for Linux; Notepad, Dev-PHP, or similar for Windoze), we’re going to make a basic HTML page to work out the basic layout, and then work on implementation into Sphinx/SMF. Let’s just call this index.html for now. Just save the blank file for the time being.

Next, lets make another file to work with. Let’s call it style_sphinx.css, and save it blank as well.

Now, our my-themes directory looks like this:

my-themes
– images
– index.html
– style_sphinx.css

Now, we’re going to generate some HTML and CSS.

With both the index and style files open, let’s look at our Photoshop mock-up and visualize the HTML we need to accomplish it.

Write up a basic head section for your html, that includes a <link> to our style sheet.

We’re not going to worry about validation, yet, but we will soon. Right now, this is like a very rough draft. However, you should script up your HTML inside your body tag to be as compliant as possible initially, when I said “don’t worry” a second ago, I was referring mainly to the doctype and head of the document.

So, again we’re referring to our default template as a “visual” for this article, we know we need a header area with a logo for our site, and a “welcome” area for users/guests; a stretch of menu links; buttons for collapsing left, top, and right blocks; left blocks, center area for the main content of the page; bottom blocks; right blocks; bottom menu; and finally our footer area.

So, now we generate out basic layout. Let’s make a note right here. dreamweaver and frontpage just don’t cut it, but it’s your call and your site. We’re referencing writing from scratch, as it’s easier to do it right the first time than to have to do the work and then go back and redo it/clean it all up.

OK, we know our default theme isn’t exactly “perfect” code bliss, but wait for 2.0 and it will be.

Also, we’re not going to get into a div/table debate. We’ll leave that up to you.

As we go along, we’re adding and editing our CSS file, using ID’s and classes as appropriate, and making default background colors that are close to what images will be used (if applicable).

So we’ve scratched out the basics areas mentioned above. Now we’ll need some images to fill it in a bit. So, for example, we go back to our Photoshop file and grab a 1px wide portion of our header background. Repeating this image makes the same background, and the image loaded is still very small. Continuing on, we grab some other images as well for our portal related stuff like block title or what have you.

Note, we aren’t playing with the output from other files yet, just the main portal output present on all pages, etc.

So now we have a generic layout, let’s add a little text to it to play with and style.

Right, now we have the basics working in a “dummy” file, it’s time to integrate!

Theme Integration

First, and most important, we’re going to make a new theme directory inside of the Themes directory on our site.

Next, let’s copy over the following directories and files from our default theme:
- images
- fonts
- index.template.php
- index.php (so folks definitely can’t browse the directory)
- style.css (this contains all the styles for the forum side of things)

Remember, you only need to have the templates you edit present in your theme. The others will be pulled from the default theme. With the exception of style sheets, images, etc.

Now, the fun shall begin.

–Sphinx Default Theme–
Template Areas

Template Structure

First, we need to understand the template structure, and the areas we’re dealing with. Referring to the image to your right, you’ll notice 3 areas we’re concerned with.

They are:
- template_main_above
- non-index template output
- template_main_below

template_main_above

This area, depicted by the yellow outline in our example image, is everything in the final output source that occurs before the main page content. Again, using our default theme as an example for visual reference, this would include the header, main menu, collapsible block links, our left side and top blocks.

Non-index output

This area, depicted by the red outline in our example image, is the main content for whatever page we are on. For example, the board index or the News or Article areas. We will not be concerned with this area yet, but we need to know that this areas output is controlled by whatever additional template is required.

template_main_below

This area, depicted by the green outline in our example image, is also in the index.template.php file. This controls the output that comes after the individual page template, and from there closes out the remainder of the document source. This would include bottom block, right blocks, the bottom menu and closing with the footer.

Main Above/Below Output

Now we’re going to convert the HTML in our basic index file, and code it into our theme.

Let’s make a duplicate copy of the index.template.php file to use as a guide while we make the merger.

Opening the copy, and moving it to the side, we now open the index.template.php file.

Moving down to the template_main_above function, we locate the closing of the document head section, and the start of the body.

We now are going to copy over our HTML parts as necessary from our draft index file into our main_above area. This is where some basic PHP knowledge comes into play. Remember, we’re not here to teach that, we’re here to provide the basic info for making your theme.

The HTML will be enclosed in echo statements. Replace and modify as need be, and follow along with it. Working around the if statements, and certain tag/function aspects. Most little things can be left as is from the default index.template, so compare yours to the copy you made if something goofs up. For example, collapsible blocks, etc.

As a reminder, the HTML being copied is only from the body of our draft index template, and only that portion up to the non-index template output. Skipping the actual menu layout, and left/top block layout (for individual items), and leaving the main layout pieces for these areas.

Repeat this procedure for the templat output after the non-index output, to close out the document. Don’t forget that you only need the main pieces for bottom and right blocks, and the bottom menu.

Blocks and Menu’s

Now we need to make our individual menu and block outputs, maybe.

I say maybe simply because you may be able to use the default menu and block templates, but modify the existing CSS to fit.

For now, we’ll assume you need to make a few changes.

Let’s make a new directory in our theme called “portal”, and then a “blocks” directory inside of that.

Now, we’ll copy over the following from the default/portal/ directory:
- Menus.template.php
- index.php

Then copy over the following from default/portal/blocks/ directory:
- Blocks.template.php
- index.php

Now modify as needed to match what you’re doing in your HTML/CSS.
If you need to add a new function for your menu, we’ll assume you know how to do this.

Finalizing Your Theme

Now that we have made the edits to the main above, below, block and menu files according to our needs (you may have not needed to edit the block or menu files), we can now first see that we have what we desired.

Note: We haven’t touched the forum CSS yet, so don’t freak. We’re checking what’s around it first.

Not what you thought it would be? Excluding the non-index template stuff, make edits and adjustments to the above/below stuff until it is. This may take some time to get used to.

Non-index template stuff

This is the stuff not covered in the above/below functions we’ve already edited. How far you take these edits is up to you and beyond the scope of this article.

We’re going to need to match up the CSS with our theme now, by editing our style.css file.

As you may have noticed, starting with Sphinx 1.1 we are “promoting” a separation of the forum css and the portal specific css. Mainly because in the long run it is easier for theming, and knowing where to look for certain things. Not that the portal doesn’t use those style, but so that you as a user can know from where each style comes from and overall what area it will effect.

By calling the style_sphinx.css file second in your document, you can “overwrite” certain basic characteristics, and keep track of your edits and changes. If you would prefer to combine it all into a single file, fell free to do so.

We recommend finding the images referenced in style.css, and making new ones with the same name. It’s just easier that way. Again, it’s your call.

Next, we’ll edit colors and such to match our theming efforts.

Next, we’ll verify it’s meshing and looking like we want. Tweaking as necessary.

Finally, we may need to do something with the remaining images being used. Like buttons, the tab looking links in the forums and admin areas, etc.

The tab setting is in the index.template.php file, up towards the top in the template_init function. Set $settings[’use_tabs’] to false if you don’t want the tabs.

Next comes those forum images. Buttons, icons, and all that jazz. They can be found in the images directory and its sub-directories. All we’re going to say is have a good time. There’s a lot to edit and play with.

(Remember, you can add new thumbnail sized images to the News and Articles images directories, and they’ll show up in news and article management to select from. ;))

Finishing Touches

Check your theme with the validator at the W3C site, and don’t forget to test it in as many browsers as possible. BrowserShots is a great tool if you don’t have much access to other browsers.

Did we mention to be sure to validate your code? Having a browser rendering in quirks mode kinda sucks, plus standards are the right thing to do for so many reasons!

In Closing

OK, that was a long winded read. However, it hopefully will help get you started on the right track to integrating and creating your own custom theme for your site. At the very least, hopefully we’ve left you with a better idea of how things work overall.

Really, the sky is the limit and the only thing to hold you back is the strength of your knowledge. The stronger your knowledge, the closer to the sky you can climb.

Oh yes, remember that basic layout you worked up as a draft? Now that you have it, you can apply it to other things you may add to your site as well. Like a photo gallery, blog, or other great bridges that are sure to come from Dynamic Systems and Content Solutions!

Keep it handy, you may need it.

This brings to light (finally, we know) SMF 1.1 compatibility, and several overall improvements to the code base.

Some of these improvements include, but are not limited to the following:

- Corrections for any reported bugs from previous versions.

- Improved Block Management main interface.

- Collapsible blocks

- Improved default theme

- Improved database queries

- Recent Topics block by recently active or recently added topics

- Vastly improved User Info block

- Further clean up of code and output source

- Lots of additional things as well!

We are committed to this release, and we’re already planning Sphinx 1.1.1 once 1.1 goes final. Our current estimated time frame to 1.1 final is approximately 60 days, depending on bug reports and severity with the RC package. This will allow plenty of testing time, and allow for time to get any issues sorted and corrected.

From there, we will continue to stick to an approximate schedule of releases every 60-90 days, depending on issues and improvements.

In addition to this, we will be continuing work on our 2.0 release as well, which is still tracking for development release in later this year. However, 1.1 will not sit stale during this time, as mentioned we are committed to its releases and update cycle.

In closing, we’d like to thank our premium members for giving this a shakedown and helping us produce even higher quality public releases.

In addition we would like to thank you, our users, for giving this a chance to flourish its young roots as it takes off to become your portal of choice.

I’ll bet it does with the bloggers out there. If not, where’s your head?
This is an anti-spam option, for the record.

Here’s the problem with spam bots.

Captcha’s work, usually, but those dirty spam bots are still eating up your bandwidth. So if a [b]spam bot[/b] hits your site 1000 times before giving up, how much bandwidth did it just eat up and waste.

Bad Behavior is one of the leading anti-spam solutions in the blogging world, and has enjoyed great success. We’re pleased to be able to offer the same cleansing feeling for your Sphinx portal and forums.

Not familiar with what Bad Behavior is or does?
Check out the Bad Behavior Website for more info.

This Add-on for Sphinx is now available in the downloads area located in our community

To put it blunt, I hate spammers. Hate is a strong word, and one that is taken too lightly most of the time. I kid you not, I’m not taking it lightly. Not whatsoever. They are the absolute scum of the earth. In our always evolving efforts to help protect your sites, we decided to make the port of Bad Behavior. Which I will admit, I am a big fan of.

Granted nothing is perfect, but the more layers of resistance you can add, the better off you are.

So give it a whirl, and see what you think. Then enjoy surfing your site, while Bad Behavior quietly works its magic in the background.

It’s been a long time coming, and we’ve busted our tails to make this as stable as possible early on to speed up the testing process. Needless to say, your development team has been testing the heck out of it.

I would like to give a big thanks to the DragonPrime - LoGD Resource Community for their testing of Sphinx 1.1 as a pre-beta/alpha release, and making sure it was stable enough for our beta testing release. Their users found the little stuff, and have helped tweak it up to where it should speed up the public release candidate by quite a bit. Between them and Mark Zerr’s testing of 1.0, it’s combining efforts which are leading to an even more stable code base. Thanks again, folks.

Please note that this is a beta version under our new release schedule, and is available for open testing to any registered member of our forums who have donated to the project and upgraded to our Premium Membership option.

What, you haven’t upgraded yet? Why not upgrade now and enjoy our additional support options and get the opportunity to help test and shape the future of Sphinx?

Feeling left out? Well, there’s no reason to. As we’ve mentioned previously, release testing used to be held in a closed environment under an “alpha” title, and the first public release would have been labeled as “beta. We’ve simply switched up the names, and opened testing versions to those who would like to participate, instead of being by invite only. What would have been a public beta, is now simply called a release candidate. So you’re still getting the same release access as you always have.

Also, support is still what you’ve come to expect and trust as well. The forums are open, as always. Upgrading does allow a few extra options, which many users will find nice, but if you are unable to help support the project through donating we understand and aren’t leaving you out in the cold.

With Sphinx 1.1, not much has changed in terms of features. The main reason behind this is to speed up the release process and get it into your hands as quick as possible. We have discussed a few minor tweaks and additions, some of which have made it into 1.1, and some of which may end up in 1.1.1.

What are they? We’re not telling, but it should make managing multiple themes and blocks easier in the long run.

Thanks for using Sphinx!

Looking forward, we’re still running tests on Sphinx 1.1. We’ve found a few minor things over the past day or two, but nothing that is major. Mostly things are in the area of new variables to play with, new css classes in the default templates, and some fields that were moved or changed in the database.

Once our 1.1 release is available for public consumption, we encourage everyone to move on it. At that time we will only support security fixes with our 1.0 release, as it is meant to be a transitional release between the old Enigma project and our new Sphinx project. For 1.1 we will still provide an upgrade path from Enigma 1 and 2, beyond that we’re still discussing. Most likely we’ll have one for that as well, but it’s many months off.

Some concerns have come through my email in the past few days, and I’d like to put those to rest. Mainly the concerns have been over what 1.1 will bring, and if it will be supported past the initial release. Yes, it will be. While we don’t anticipate any real earth shattering feature inclusions, mainly because we don’t want to write something twice because of the 2.0 road map, we will still be supporting bug, maintenance, and security fixes. So as an example, if SMF releases 1.1.3 and makes a change that effects the Sphinx portal, we will have a fix and update for it accordingly. If their path through the 1.0 branch is any indication, there shouldn’t be any problems running their update packages through the package manager. As always, please allow us the chance to try any new update packages first so that we can ensure your production environments will not be affected.

All in all, 1.1 is on track for release as we have anticipated. We’re still waiting testing, so that we can make releases as stable as possible. We’re also awaiting bug reports from our 1.0 release, as some of those may also be relevant to 1.1 as well. Granted some code and various functions have been changed, but just in case.

Right now 1.1 is in a beta release stage, which will be the final stage of testing before a public available release.

Some minor concern has been brought to my attention in terms of our new offerings of Premium Member status, which includes additional support options and early access to code releases. Mainly the rumbles have been in terms of support being limited to the community and code not being available as soon as it could be.

While that may be one way to look at it, here are our intentions with this.

For early code releases:

While the terms of alpha and beta are being used for our early code releases, these are in name only. These would be packages/releases that would have remained internal, or offered to a very select few people anyway. No different than previous alpha releases, as we’ve also had a select invite only group for those as well.

With that in mind, we are actually opening up the testing availability to essentially anyone that wants to participate. This approach is being taken so that even more people can access the test releases than before. Previously these would have been by invite only, and limited to 10 or less people. By opening it up, this allows for people who really would like to test cutting edge versions but may have not been selected for early testing. A win win situation for all.

For additional support options:

The support you’ve come to expect still remains. Being not only supported by other knowledgeable members of the community, but by the developers as well. That will not change. Ever.

In addition to the standard support we will be offering additional support options for Premium Members, but that absolutely does not mean that regular community members are now “second class”, or will be ignored through the forums. This additional option will simply be above and beyond the already first class support that you’ve come to expect from Chris and I. Perhaps a better comparison or explanation would be that the additional support would be on a more personal level in terms of interaction with us, while sometimes a simple forum post can come across as non-personal thanks to the electronic communication platform known as the internet.

Support for regular members will not sway, rest assured.

So now, what exactly is up with the Premium Membership anyway? Here is how we approached this issue.

We looked at the project donations, and what community members who were in a position to be able to help a great, free project with some of the bills were getting out of it. Well, besides that satisfactory feeling of supporting a worthy cause. Maybe a little link love, but not much in addition to that. So, after looking at several other projects and their handling of charitable contributions from members, we decided that throwing a few bones back to those who were able to donate would be the right thing to do. Not because we felt we have to, but because we feel that we should in some way show our appreciation.

So, we decided to open up what would normally be internal code packages, and offer a little more privatized support as well. Where they can get a little one on one interaction time with the developers, in addition to the usual interaction within the forums. Let’s face it, sometimes when needing help we’re all a little nervous of posting our problems in the eye of the public. Usually these would be sent with a PM, but now they have an additional route as well.

We’re still working with this new concept, and we are taking into consideration several levels of interaction. Perhaps a level which only includes early code releases, or the option to simply upgrade support.

As always, donations are much appreciated and we’re thankful for the support we’ve received thus far. Your donations help us keep the server bills in check, allow for integrations with other “paid” applications, and keeps us from needing to mow lawns on the weekend when we could be writing more code.

So, in closing, we would like to thank everyone for their support and input thus far, and we look forward to building on the successes we’ve built to date.

It’s built around the SMF template engine, for now, which allows for some pretty interesting theming capabilities. Just check out our community and see for yourself.

Have an existing SMF theme for your site that you would like to use? Sure. Just make room for the block areas you want, like left or right or both (or top, bottom, etc), and then add the call to the dsp() function in your footer somewhere.

By default, Sphinx comes with a nice pretty default theme, and we’ll be working to add more themes as we have time.

Please note though, that since were a two person show at the moment, that our primary focus is on Sphinx. Any additional themes and mods from the Community are greatly appreciated.

So with that, that’s about all for our initial look at theming Sphinx 1.x…

For our upcoming 2.x branch, you can throw all of this out the window. Why? It’s too darn complicated for an average user. Nothing against you folks, but if we could all speak PHP it wouldn’t be a problem. It is a problem though. You want control of your website, and in our upcoming 2.x release(s) we’ll give you back the power to theme your site until your heart is content.

If you can make a simple html template, add some css, and then add a couple of “tags” where you want certain content, you’re going to absolutely love Sphinx 2.0 and beyond.

You thought Enigma 1.x was easy? You ain’t seen nothing yet, folks.

Welcome to Sphinx, and the beginning of a new chapter in your website and content management lives.

Welcome to Sphinx, currently public with version 1.0, which is a fork/continuation of the Lunabyte Systems Portal, Enigma.

If you would like specifics, feel free to brush up on the history of the project, or browse around for some of the features if you are not yet familiar with what Sphinx can do.

For now, we invite you into our home and community where you can sign up and get busy with moving your website forward.

Thanks for the patience, understanding, and support. Enjoy Sphinx!