Video module 1.0

  By: admin   tags Date Added: Wednesday 28-07-2010


Hi
Today I present you with the video module. It enables users to add videos to your website. Users can add videos either by uploading files from their computers or adding the embed link using any of the video sharing websites.

Module features:
- Unlimited categories and subcategories.
- Multiple video upload at the same time.
- Set video types allowed for upload
- Using group settings you can set the size of video uploaded
- and many more.

to download the module:
http://www.diy-cms.com/download/view_file/downid_29


Tags: video, cms More details

CK-Editor Plugin

  By: admin   tags Date Added: Thursday 22-07-2010

This plugin will add a WYSIWYG (what you see is what you get) editor or a visual html editor. It replaces the tinymce editor (the defualt editor for DiY-CMS) with the CKEditor with many options.

Here is the editor image in action with Standard type selected:



First to install the plugin you need to upload the folder to the plugins directory in DiY-CMS root folder. Then you can install it from the admin area by going to plugins sections and then click on the install icon.

Second you may modifey the plugin settings as you need.
You can modifey the skin, the toolbar type, the toolbar location and many more.

Here is the setting image:




You can download the plugin from this link:
http://www.diy-cms.com/download/view_file/downid_28


Tags: ckeditor, plugin More details

Friendly Links plugin

  By: admin   tags Date Added: Thursday 15-07-2010



Hi
I have programmed a new plguin for DiY-CMS. It basically converts most of the links in DiY-CMS from dynamic to static.

So links like this:
http://www.diy-cms.com/mod.php?mod=download&modfile=view_file&downid=26

would be converted to his:
http://www.diy-cms.com/download/view_file/downid_26


to download the plugin follow any of the links above :)

hopefully in the next blogs i will be talking about how to write a plugin for diy-cms using the hooks system


Tags: plugins, firendly-links, diy-cms More details

Blue designwork theme for diy-cms

  By: admin   tags Date Added: Thursday 08-07-2010

Hi
This is a new theme for DiY-CMS. Its main color is blue and it is tabeless. I hope you like it.


Here is an image of the theme:


and you can download it through this link:
http://diy-cms.com/mod.php?mod=download&modfile=view_file&downid=25


Tags: blue-designwork, theme, designs More details

Tipz theme for DiY-CMS

  By: admin   tags Date Added: Saturday 03-07-2010

Hi
I converted another theme for DiY-CMS. It is called Tipz. The theme is light, nice and tabeless.

Here is the screenshot:


and you can download at this link in the downloads area:
http://diy-cms.com/mod.php?mod=download&modfile=view_file&downid=22


Tags: tipz, theme.designes More details

Gallery module for diy-cms

  By: admin   tags Date Added: Thursday 01-07-2010

Hi
Couple of weeks I started planning to program three modules for DiY-CMS which I thought are necessary for the completion of the CMS. They are gallery, audio and video modules.

Here is the first one, the gallery module. To download it Click Here.

Features:
- Unlimited categories and subcategories.
- Multiple images upload at the same time.
- Three types of listing: Title & photo, Photo Only or Title only.
- Add Copyright text
- Customise copyright colour and position.
- and many more.

Here is the image of the image listing in a category with photo and title type:


and this is the screenshot for viewing a single photo:


Tags: gallery, diycms, module More details

Florance theme DiY-CMS

  By: admin   tags Date Added: Saturday 19-06-2010

Hi
This is a new nice theme for DiY-CMS named Florance. It is tabless and cross-browser comptaible.

Here is the theme photo:



and here is the download link:
http://www.diy-cms.com/mod.php?mod=download&modfile=view_file&downid=20


Tags: theme, designes More details

Startie theme for DiY-CMS

  By: admin   tags Date Added: Saturday 19-06-2010

Hi
I converted another theme for DiY-CMS. It called startie. It a nice greeny and tabless design.

To see its photo:



and to download it, you can go to this link:
http://www.diy-cms.com/mod.php?mod=download&modfile=view_file&downid=19


Tags: theme, designes More details

Creative Theme for DiY-CMS

  By: admin   tags Date Added: Saturday 19-06-2010

Hi
This is a new nice theme for the DiY-CMS that I have converted. The theme is tableless and easy to modify.

Here is the theme photo:


and you can donwload it from here:
http://www.diy-cms.com/mod.php?mod=download&modfile=view_file&downid=18


Tags: theme, designes More details

A new technique to solve div height issue

  By: admin   tags Date Added: Sunday 13-06-2010

If you have not made the switch from the table-design to the tables design, you should now. Even tough that table-less design seems hard to learn, particularly to those who are used to the tabular design it comes with many benefits. The first and the foremost benefit is the great control over the different parts of the website layout. Add to the that most search engines now (i.e Google :) ) favours websites with table-less layout since table layout is considered to be tabular data.

There are two layouts that are used commonly across website “the two columns” (figure 1) and “the three columns” (figure 2) layout. That is the content in the middle and menus on the sides.


Figure 1




Figure 2



The problem:
This layout, when using a table-less layout, comes with a downfall. If the contents container in the middle extends to be more than the side menus bars, the container of the side menus will not extend to the height of the contents. This will affect the appearance of the website. (figure 3)


Figure 3



The first solution that comes to one’s mind is to set the side menus bar’s height to be div {height: 100%}. Nonetheless, this solution is not sufficient since the div container does not have any thing to factor the height. To come over this issue you have to set all the parent containers to 100%.
Another solution is to use Faux Columns. In short this technique sets a background that extends over the contents container and the side menus bars (the author used an example of one side layout, but the concept can be applied to two sides) and then the background is repeated vertically. So the side menu bars will “appear” to be extending down the entire page while in fact it is the background of the contents container.
Even thought this method provides a nice cheat to the issue of div height it limits the designer with the options that he would have in terms of side menus container’s width and background repetition.

The solution:
An extra efficient solution exists, no matter how desperate is the problem. Using div position and stack order one can easily design a website layout that contains extendable side menus bars.

First we set up the layout with the style sheet:


<head>
#main-container {
width: 1000px;
}
#left-side-bar {
float: left;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
}
#contents {
float: left;
font: normal 12px arial, sans-serif;
width: 600px;
background-color: #ddeec8;
}
#right-side-bar {
float: right;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
}
</head>

<body>
<div id="main-container">

<div id="left-side-bar">Side bar text </div>

<div id="contents">Lorem ipsum dolor sit amet </div>

<div id="right-side-bar">Side bar text </div>
<div style="clear:both">
</div>
</body>


Click here to see the layout in example 1.
To make the background stretches vertically to be as high as the longest div container we will create a duplicate of the div containers that we want to extend (with few changes) and their relevant CSS selectors (I will create one for each menu bar in this tutorial, but you can create a duplicate for any container you like).

I will add these selectors to the page head with simple change:

#left-side-bar-bg {
float: left;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
/* add absolute position to this selector*/
position: absolute;
/* add top and bottom margins of the absolute position*/
top: 0;
bottom: 0;
/* since this is the selector for left menus bar we add the left margin */
left: 0;
}
#right-side-bar-bg {
float: right;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
/* add absolute position to this selector*/
position: absolute;
/* add top and bottom margins of the absolute position*/
top: 0;
bottom: 0;
/* since this is the selector for right menus bar we add the right margin */
right: 0;
}


And I will also add these two divs to the page body and within the main-container div:

<div id="left-side-bar-bg"></div>
<div id="right-side-bar-bg"></div>


Click Here to see the end results in example 2.

You probably noticed that in example 2, the div containers that I have created are not extended within the parent div container. To solve this we add:
position: relative;
to the main-container selector. This will tell the browser to extend the new div containers within the main-container div.

Click here to see the new created containers in example 3.

In example 3 we notice that the new div we create are places over the original side menu bars. This were stack order comes in handy. Using z-index propriety we can "order" the div containers stack that we have. The larger the number is the higher the div is. Please note that z-index propriety will not work with "position: static" which is the default positioning of any div container, so we will change the position of the original side menu containers to "relative" in order for them to be ordered correctly.

Now the final CSS will look like this:

#main-container {
width: 1000px;
position: relative;
}
#left-side-bar {
float: left;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
position: relative;
/* set z-index to a high number to keep the container on top of its duplicate */
z-index: 99;
}
#contents {
float: left;
font: normal 12px arial, sans-serif;
width: 600px;
background-color: #ddeec8;

}
#right-side-bar {
float: right;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
position: relative;
/* set z-index to a high number to keep the container on top of its duplicate */
z-index: 99;
}
#left-side-bar-bg {
float: left;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
/* add absolute position to this selector*/
position: absolute;
/* add top and bottom margins of the absolute position*/
top: 0;
bottom: 0;
/* since this is the selector for left menus bar we add the left margin */
left: 0;
/* set z-index to 0 to keep it the container lower than the original one */
z-index: 0;
}
#right-side-bar-bg {
float: right;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
/* add absolute position to this selector*/
position: absolute;
/* add top and bottom margins of the absolute position*/
top: 0;
bottom: 0;
/* since this is the selector for right menus bar we add the right margin */
right: 0;
/* set z-index to 0 to keep the container lower than the original one */
z-index: 0;
}


Click here to see full page in example 4.

Using this technique you can even add an image as a background.
Click here to see image background in example 5

I hope this tutorial is useful and help designers overcome the issue of div height.


Tags: div-height, css More details


Pages
« < 1
 2 
3 4 > »