Endar Template version: 1.0 for SMF 1.1

This template is provided free of charge for both personal and commercial use. However it is not under an open source licence. There are restrictions to it's usage.

These restrictions are few and are as follows.

• All style and graphics are copyright www.Endar.org and must not be reused in other works without permissions.

• Neither the code or files from this downloaded template package, nor derivatives of, can be redistributed without permissions.

• The information, copyright and any links in the template footer must not be removed or edited without permission. This includes any code (X/HTML).
  
  Hue and colour and image changes to tie in with any of your own modifications to the template are permissible. Provided they don't obscure the visibility of the copyright information.

• This template/skin is provided "as is". Use of this template or it's constituent parts is entirely at your own risk. The template has been tested for deficiencies but responsibility will not be accepted for any problems resulting from the use of this skin.

Bearing in mind the above. You can edit and change this template in any way you please. Should you wish clarification on these matters or to be given permission to distribute to others a derivative template, remove copyright info, etc. Then please get in touch.

Beta 1 [1st of August 2005]

First public release, beta, due to expected bugs.

Beta 2 [26th of August 2005]

(Private) release . Decided to keep public releases only along side public versions of SMF 1.1

• Clear added to newsbox as long news overflowed outside box when viewing as guest.

• Some small XHTML errors fixed

• All files updated with the requisit changes for SMF 1.1 Beta 4. Far too many to mention.

RC1 [21st of September 2005]

Second public release. Decided to call it RC1 to make it more obvious which version of SMF 1.1 it was created for.

• Fixed a problem with quick reply functionality due to a form within a form.

• Changed the majority of small font sizes in the admin panel to be more ledgible. The CSS for this also effects the calendar.

  Will probably review smallest font size theme wide at a later date.

• All files updated with the requisit changes for SMF 1.1 RC1.

RC2 [4th of January 2006]

Third public release. Called RC2 to make it more obvious which version of SMF 1.1 it was created for.

• Updated for full functionality with SMF 1.1 RC2 public.

• French language graphics included.

RC3 [25th August 2006]

Fourth public release. For SMF 1.1 rc3

• Updated for full functionality with SMF 1.1 RC3.

• Fixed bug introduced in PM message display at last version.

• Fix bug where the link for memberlist searching was messed up and unfunctional at last version.

• Fix error message recieved in admin error listings due to posticon selector being missing.

• Fix error message recieved in admin error listings due to guest viewing who's online.

• Fix HTML mistakes in userCP

• CSS changes for IE7 rendering

v.1.0 [4th December 2006]

Fifth public release. For SMF 1.1

• Updated for full functionality with SMF 1.1 final.

• Fix for failed avatar uploads regression in last version.

• CSS changes for IE7 rendering

Hide this section

Installation Instructions

Installing this skin is, or should be, easy.

1. Go to your SMF admin panel >> "Configuration" >> "Themes and Layout"

2. Scroll down the page a until you see the section "Install a New Theme".

3. Now where it says: "From a file:". click the browse button.

4. Browse and find the Endar.zip file you downloaded and select it. Then hit the install button.

Congratulations, the skin has been installed and is ready for your members to use.

Hide this section

An explanation

Endar was made as a custom template for Miraenda (Whom many of you in the SMF community may know.) the owner and admin of www.Endar.org.

It was Miraenda's very generous decision to release the template to the community. So should you want to show any gratitude for this template, well then you know to whom that thanks is deserved.

Endar is constructed without the use of tables except for a few specific areas.

• The calendar, whilst the rest of the board had at least a plausibly sematic table free rendition. I couldn't think of another way to do the Calendar.

• The "SMF Bulletin Board Code" Table in the "Posting" help section. For similar reasons to the calendar.

• The whole admin panel which other than CSS styling has not been altered whatsoever, this seemed prudent. Though there's a possibility of this changing come SMF 1.1 final.

• The last content block (Forum History.) in the board stats page. This due to my own lack of javascripting knowledge. It did work as a detailed list but only with javascript turned off. Where a page reload allowed the display to update correctly. A little more effort or knowledge on my part may remedy that.

• The split posts mod panel for the same reasons as mentioned regarding the "Forum History" section of the stats.

The decision to dispense with the use of tables, is not any sort of statement on semantics or accessibility. I'm an advocate of accessibility but if this template was made with that as the top priority. There would have been wider use of tables in the mark up.

Forums, at least the more popular feature crammed variety, like SMF are full of information which can be best described semantically using tables. They're chock full of tabular data. I know this.

That said I did try to follow standards and make it as semantically correct as I could. Though I fell down in several areas, I'm sure. There are some hard coded bits of style for example. Other failings will be due to my own limits on knowledge.

There are also some areas where I would perhaps choose a different mark up now that they're done. Perhaps these will be revisited but no promises.

Browser compatibility

Endar appears to works well in modern browsers that keep good pace with standards. We're talking Gecko engined browsers like Firefox. Opera also and I'd strongly assume Safari, though I've not been able to check, any info on that would be good. The new IE7 does pretty well too.

Last I was able to check Konqueror worked decently enough too.

Internet explorer in all it's previous to IE7 incarnations was a different matter. A huge chunk of the stylesheet is devoted to hacks intended to make things work in the various flavours of IE. However, though I'd suggest using a different browser if at all possible. A lot of time spent means that it does work in IE version 5 and upwards, best in 6.

IE 5.0 worst. However it is perfectly usable last I checked

IE on the Mac I have no idea about, I may even hide the stylesheet from it in a later version of the theme.

Due to the nature of the template, it required that the vast majority of the XHTML was written from scratch. There's not much left of the original default HTML left. This means that despite my own testing there will doubtless be bugs which live use will show up.

If you find any you believe important enough to report you can do so at The Jasidog forums.

Hide this section

Basic Customisation

You may already have downloaded a zip archive called "endar-psds". If not you will need to download this in order to customise your header and footer. If you don't already have it download the PSD files.

In this zip file is a sliced PSD of the logo/header and also one for the footer. Presuming you have photoshop you can use these to add your own text and/or images.

Then simply place the images in the, Themes/Endar/Images/ directory of your message board.

Note both the header and footer PSD files are missing layers/images from the default header and footer. These layers are those with Characters from The World of Endar. Which missing as they are specific to the Endar.org site.

The PSD files were also somewhat simplified (layers merged etc.) in order to try and keep the file sizes down.

Should you be without photoshop or having difficulties you can ask for help or the adding of your logo text at The Jasidog forums.

It's also planned to add a separate download in future with a more generic Header and footer PSD. If it doesn't materialise you can always give me a prod.

Header Details

Note that the border graphics in the logo PSD, top and sides must be included in your new header. As they join up with. Are part of the whole graphical border round the board.

This was perhaps not a wise move for those customising but things weren't done with that in mind.

If you alter the height or the image types used, say PNG files instead of GIF. If Indeed you want to make more drastic c changes you'll need to edit the css file. Either by opening the file ( Endar/style.css ) or using the admin panel editor.

Look for this section to make your changes in -

/* header section */

#header {
background: #E2DBBF url(images/head-tile.gif) repeat-x top;
}
#header-right {
background: url(images/head-right.gif) no-repeat top right;
}
#logo a {
margin: 0;
padding: 0;
background: url(images/logo.gif) no-repeat left top;
display:block;
text-decoration: none;
padding: 114px 0 0 0;
overflow: hidden;
height: 0px !important; 
height /**/:114px; /* for IE5/Win only */
}

The "#header" section is where the image that titles across the header background is defined. "#head-right" is the image on the far right of the header and "#logo a" the corresponding image on the left (The logo).

Most important is "#logo a" this is for your logo and also crucially it gives the overall height of the header. This is defined in two places.

Both in "padding: 114px 0 0 0;" where the value "114px" should be replaced with your header height in pixels.

And in "height /**/:114px; /* for IE5/Win only */", only change the pixel value none of the surrounding comment. This defines the header height for Internet Explorer 5.

If you know enough CSS to understand the rest you really don't need to be reading this and can change the whole thing much further under your own steam. Including changing the HTML in the "index.template.php" if need be.

Footer Details

Note that the border graphics in the footer PSD, bottom and sides must be included in your new footer. As they join up with. Are part of the whole graphical border round the board.

If you alter the height or the image types used, say PNG files instead of GIF. If Indeed you want to make more drastic c changes you'll need to edit the css file. Either by opening the file ( Endar/style.css ) or using the admin panel editor.

Look for this section to make your changes in -

/* footer */

#footer {
background: #E2DBBF url(images/foot-tile.gif) repeat-x top;
margin-top: -1px; /* fixes intermitant (resolution dependant) bug */
}
#foot-left {
background: url(images/foot-left.gif) no-repeat top left;
}
#foot-right {
background: url(images/foot-right.gif) no-repeat top right;
height:219px;
}

The "#footer" section is where the image that titles across the footer background is defined. "#foot-right" is the image on the far right of the header and "#foot-left" the corresponding image on the left.

Most important is "#foot-right" as crucially it gives the overall height of the footer.

Where the value "height:219px;" is given you should replace if need be with your footer height in pixels.

Again if you know enough CSS to understand the rest you really don't need to be reading this and can change the whole thing much further under your own steam. Including changing the HTML in the "index.template.php" if need be.

An important note on the footer.

Should you find that after customising your footer the board copyright information floats over the bottom edge of the footer. This will be because of some alteration to the height of the slices. If it happens it will not be something visible in IE but in other browsers. To fix. look for the following in the CSS file.

.copy-r {
font-family: Verdana,Arial,sans-serif;
color: #E8E1C7;
text-align:center;
font-size: 90%;
margin-top:-10px;
padding-bottom: 10px;
font-weight: bold;
background-color: transparent;
}

Change that to -

.copy-r {
font-family: Verdana,Arial,sans-serif;
color: #E8E1C7;
text-align:center;
font-size: 90%;
margin-top:0;
padding-bottom: 10px;
font-weight: bold;
background-color: transparent;
}

Hide this section

To alter the forum width is pretty painless. Endar is set at 94% of the page width by default. So it's fluid but you could use a fixed width, pixel value.

To change it all you need to do is open up the Endar CSS from the admin panel or even easier the CSS file it's self. The "style.css" is located in the Endar template folder.

Your-SMF-Install/Themes/Endar/style.css

Look for the following -

/* overall width of forum */
#wrapper {
padding:2% 0 0 0;
margin:0px auto;
width:94%;
text-align:left;
}

Where it says "width:94%" edit the percentage value to suit. So for example if you wanted an overall width of 80% for the forum. You would change it to the following.

/* overall width of forum */
#wrapper {
padding:2% 0 0 0;
margin:0px auto;
width:80%;
text-align:left;
}

If you wanted a fixed width (Say 750px.) you would change it as follows.

/* overall width of forum */
#wrapper {
padding:2% 0 0 0;
margin:0px auto;
width:750px;
text-align:left;
}

Easy eh?

Hide this section

If you need any problems and need help or have questions about the Endar template you can ask at The Jasidog forums

The best place to look for updates or addons to the theme is the SMF section on the Jasidog site.

Hide this section