Do It Yourself CMS » Blog »


Florance theme DiY-CMS

  By: admin   tags Date Added: Saturday 19-06-2010 12:25 pm

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

Here is the theme photo:
[attachment:1]


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 11:49 am

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

To see its photo:
[attachment:1]


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 11:35 am

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:
[attachment:1]

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 05:56 pm

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.

[attachment:1]
Figure 1



[attachment:2]
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)

[attachment: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

Early Morning theme for DiY-CMS

  By: admin   tags Date Added: Sunday 13-06-2010 03:29 pm

Hi
Here is another converted theme for DiY-CMS. It is light, tabless and can be easily modified or changed.


Here is the theme photo:
[attachment:1]


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


Tags: theme, ealry-morning, designes More details

Twitter theme for DiY-CMS

  By: admin   tags Date Added: Sunday 13-06-2010 03:25 pm

Hi
Here is another theme the I have converted to DiY-CMS. This theme resemlbes the famous social network website Twitter. It is suitable for website with perosnal content or blogs. The theme is tabless and can be modified easily.


Here is the theme photo:
[attachment:1]


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


Tags: theme, twitter, designes More details

Blootoon theme for diy-cms

  By: admin   tags Date Added: Sunday 13-06-2010 03:05 pm

Hi
Here is a new theme for DiY-CMS. I have converted to DiY-CMS due to its nice colors and light desgin. It can be modified easliy throught the style sheet.

here is the theme screenshot:
[attachment:1]

and here is the link to download the theme:
http://www.diy-cms.com/mod.php?mod=download&amp;modfile=view_file&amp;downid=15


Tags: blootoon, themes, designes, blue More details

Search Module 1.0

  By: admin   tags Date Added: Wednesday 02-06-2010 03:55 pm

Hi
Searching contents is a vital part of any website since it saves a lot of time for the visitor and for the owner of the website. I think one of the most important things that the DiY-CMS was lacking since its launch was the search part. Therefore, I programmed this search module with many options in order to make the search process very effective through any website that is using DiY-CMS.

Visitor can type any number of keywords and select whether he wants to find them all in one post or anyone of the keywords in a post. Visitor can also select where to search, in News, Forums, Downloads sections or in all of them together with the option of searching in the title or the post.

The visitor can also order the search results in Descending or Ascending order. He can also sort the results by date, number of comments, number of readers or the author of the post.

The visitor can also refine the search by choosing the time scope of the search and how many rows to display in each search results page.

Here is a screen shot for the search module index page:
[attachment:1]

And you can download it through the download area in this website.
http://www.diy-cms.com/mod.php?mod=download&amp;modfile=view_file&amp;downid=12

Additionally, most of the themes that I will convert in the future will contain a search box that will not function correctly unless this module is installed in your website. (You still can remove the search box from the theme if you do not want to provide search functionality in your website).


Tags: search, modules, updates More details

Pages
 1 
2 3 > »