TechnoBlog : open your blog.

Would you like some nice form on your comments ?

Here is what Technoblog recommands :

That's the way your forms will be printed with Firefox ou Opera. With IE, this will keep the "square" borders but will still be working (well, IE is not a CSS addict...)

Get the line /* Comentaires */ in your stylesheet (Design -> Advanced Configuration -> Stylesheet). This is where forms design is handled.
Then replace the input { } and textarea {} styles by the following code :
input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #01717f;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #000;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}

NB : the background color and the border color are #addfe8, try to replace this color code by one of your elements (banner, links, column, title...) : you may find every color code in your stylesheet. (exemple : #99cc33 ou #4E8ABE). An advice : use some bright colors...

An other sample used on Technoblog :

CSS code :

input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}

I advise you to replace the color code #cc6600 by a color of your choice according to your blog design...

As Lionel asked me for inserting javascript code in a blogSpirit blog, here is an exemple with the "add to bookmark feature".

Technical notes :
BlogSpirit blogs use Smarty technology which is a php template parser.
Smarty tags are like {tag}{/tag}, that's why javascript code may be misunderstood if they contain ths type of caracter. The solution is to use the following Smarty tags : {literal]{/literal} between your javascript code (works also for CSS code)

"Add to bookmarks"
I really disagree with this type of feature which work only with some versions of IE (not working on Gecko type browser : Firefox, Safari, Netscape...)
Create a new custom box and insert the following code :

<script type="text/javascript">
{literal}
function add_favoris() {
var site_name = "Technoblog !";
var site_url = "http://technoblogs.blogspirit.com";
if ((navigator.appName.indexOf("Microsoft",0)>=0) && (parseInt(navigator.appVersion)>=4)) {
window.external.AddFavorite(site_url,site_name );
} else {
alert("This d*feature works only with Internet Explorer 4+, perfom a Ctrl+D to add "+var site_name+" to your bookmarks.");
}
}
{/literal}
</script>
<a href="javascript:add_favoris();">Add to my bookmarks</a>


NB : this script only works with IE 4 or more (your IE should be OK), if you want to use this script, don't forget to replace 'site-name' and 'site_url' by your blog title and url.

NB2 : {literal}{/literal} tags are used to avoid the SYNTAX ERROR message when updating your template or custom box. If you still have this message or your blog don't display well, try to :
- check if your tag is closed with : {/literal}
- check if the 'literal' tags are just around some javascript or css code not html code

Go to the "advanced design" section ("Design" header") and edit your Stylesheet template.

Locate your "body" style (should be the first one) and update it as shown below in strong caracters :


body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #008da8;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000;
font-size: 120%;
word-spacing: normal;
text-align: center;
}


You may edit the font-size as you wish, to reduce it insert a percentage < 100, to increase it insert a percentage > 100.

Finally !

A new Blogspirit version is born with the following new features :

- Custom Blocks that will let you insert HTML or Javascript code for any feature you may find on the Internet such as multimedia modules, search motors or sponsorised links. ("Columns content" section)
- Trackbacks. Did you ever want to comment a post directly on your blog ? Trackbacks let you do that, you'll find this new feature in the "new post" -> "advanced settings" sections. More is coming soon about Trackbacks on Technoblogs.
- Security from "evil links" and spamming. Blogspirit has already a system to protect every blog from spamming, you will now have a security level on your own blog by closing automatically comments and trackbacks on old posts after 1 month, 2 weeks or 3 days... ("Post Settings" section).
- International Bloging : chinese blogs will now have an blog administration in chinese ! Blogspirit supports any language from any country for bloging.

New features mean new tips that will be soon available on TechnoBlog !

What you need to do to get all these new features. :

Restaure ONLY the following templates (Design-> Advanced Design) :
Index
Archive
Categories
Comments
Permalink
About Page
List Item
Album Templates : all
Atom
Syndication

NB : You may restaure these templates by ticking each template and clicking on "Restaure original version", don't forget to not tick the "Style" template and the "Calendar" template (you could have mean surprises on your blog...)



If you have already modified your templates by yourself, you will need to check the differences and edit your templates. (Leave a comment for help if needed and I will post something on it).

Uplaod the mid file (name.mid) in the files repository ("Control Panel" -> "File Manager"). The edit your calendar template ("Design" -> "Advanced Design") and insert the folowing :

<embed src="http://myblog.blogspirit.com/files/my_music_file.mid"
hidden="true" autostart="true"></embed>

It is possible for you to insert your own banner instead of title of your blog. For that, follow these steps :

1. Go in the section "File Manager" of the heading "Control Panel"
2. Upload your banner image on blogspirit:

* Click on the " images " directory
* Add your banner with the 'Upload' form
* Once the finished loading, note address (the URL) of your banner. The address should be like: http://myblog.blogspirit.com/images/mybanner.jpg

Note that if your banner is on another server you do not need to upload it on our server, on the other hand it is necessary for you to know his URL to reach this image.
3. Go now in the section "Advanced Settings" of the heading "Design".
4. Locate the "Style Sheet" template and click on "Edit Template".
5. A window of modification of the css file opens. We will help you step by step to modify CSS code (the code of the style sheet) to insert your banner. Note that for each modification the code to be added for your banner is in comments: between "/*" and "*/".

* Locate the style " #banner ".

o Insert at the end of the style the following code:
" display: none; "

* Locate the style " #banner-img ".

o Replace: " background-color: #xxxxxx; ", by this line:
" background: #xxxxxx url([banner_URL].jpg) no-repeat 0% 0%; "
o Insert at the end of the style the following code:
" display: block; "
o Give to the attribute "height:" the height of your banner (in pixels).
Example: if your banner is 90px, write: " height: 90px; "

* Locate the style " div.img-link a ".

o Give to the attribute " height: "the height of your banner (in pixels).
Example: if your banner is 90px, write: " height: 90px; "

* For the modifications related to design 4 (by counting starting from the top left towards the line) only.

o On the level of the styles " #container .container-decorator1 ": replace " 90px "in
" background: transparent url(http://[... ]) no-repeat 0% 90px; "
by the following sum:
Height of your image + margin of 9px
Ex: your image is 120px height, the code to be inserted is: " 129px "

* For the modifications related to design 5 (by counting starting from the top left towards the line) only.
o On the level of the styles " #container .container-decorator1 " and " .album-container .container-decorator3 " : replace " 90px "in
" background: transparent url(http://[... ]) no-repeat 0% 100px; "
by the following sum:
Height of your image + margin of 8px..
Ex: your image made 120px in height, the code to be inserted is: " 128px "

6. Click on the "Save information" button to apply the changes: your banner is inserted in your blog! You can check it by clicking on the "View blog" link in top of the page.

If such were not the case, check well that you proceeded to each stage (the code to insert must-to be the same). Also check that the URL given for your banner is quite valid: to check it simply, copy the URL of your banner in a navigator: if your image does not appear, your address is false.

It is also probable that your banner is not sufficiently broad for space available (771px), in this case insert a code color to fill remaining space :
background: #xxxxxx url([banner_URL].jpg) no-repeat 0% 0%; (where #xxxxxx is the code color).

You can return to a basic solution, in the section "Advanced settings" of the heading "Design", tick a template then click on the "Restore original Version". Caution! All your modifications of design will be lost.

--------------------------------

Note that this is not the only method to display your own banner, but this one was tested on :
Win : IE 5.01 5.5 6 - Firefox 0.8 0.9 1 - Mozilla 1.7 - Opera 7.52
Mac : IE 5.1 - Safari - Firefox

Do not forget that all the code needed is in comments in your style sheet (/* code */) : delete '/*' & '*/' to valid this code.

--------------------------------

Edit : Here's a sample of the way your CSS shoud look like :


#banner {
height: 90px;
background-color: #d9c0e6;
color: #fff;
display : none;
}
#banner h1 {
padding: 15px;
font-weight: bold;
padding-bottom: 10px;
}
#banner h2 {
font-size: 80%;
padding: 0px 0px 0px 15px;
}
#banner a {
color: #fff;
font-weight: bold;
font-size: 70%;
text-decoration: none;
}
#banner-img {
display: none;
display : block;
background: #fff url("http://[BLOG].blogspirit.com/images/[BANNER].jpg") no-repeat 0% 0%;
height: [HEIGHT]px;
}
div.img-link a {
display: block;
text-decoration: none;
width: 100%;
height: [HEIGHT]px;
}

--------------------------------

In #banner-img, '#fff' is the background color which 'complete' your banner area, choose the one used in #banner.

How to insert an image on my blog ?

1. Get the URL

Example with Blogspirit Logo.
Edit a new post and paste the following code :


<img src="" alt="" title="" />

First let's get the image url on Blogspirit Home Page.
Make a right click on the image then properties (with Internet Explorer 6). Copy the URL near "location:".
Insert it on the "src" parameter (source) in your post :

<img src="http://www.blogspirit.com/graphics/portal/logo.png" alt=""
title="" />


2. Some design parameters


You can edit the "alt" parameter (alternative). It displays text when image is not available. Same thing for "title" parameter.

<img src="http://www.blogspirit.com/graphics/portal/logo.png" alt="Blogspirit"
title="blogspirit.com" />



Your image is not centered ?
You just need to put in a box