Universal Theme

A brand new theme MyDrupal Universal, this time for Drupal 5 version. This theme is a 2 column layout, inspired from "Internet Services" Theme. It is fixed width. For feedback/issues add comments here or in forums.

Width can be easily modified by changing the #page id in style.css. Its currently set to 800px. Everything will resize proportionately.

Colors can be easily modified too. Just change n1.gif in images folder and change few colors in style.css.

Tested on Drupal 5.1 with Firefox and IE browsers.


Click here to see LIVE DEMO

Downloads: 

Comments

Hi,
I like this theme very much.
How hard would it be to modify this theme to:
1) change the horizontal proportion so the side bar is narrower.
2) move the sidebar to the right side of the theme.

-Dave

admin's picture

For your first point. Search for this in style.css and try some modifications in width


#content #sidebar-right {
float: right;
width: 34.5%;
margin: 0 0 10px 0;

}

To move the sidebar to left modify template.php and set the left region there. You will also have to modify page.tpl.php

Thanks

how do i download this theme? :D

admin's picture

Hi ,

Its on drupal.org, in Themes section.

Thanks

Are you sure? I can not find it there... :(

admin's picture

How/where can I change the width of forum table?

admin's picture

Forums are not themed for this theme. If you know css you can add the following to the style.css and customize it as per your needs

#forum table {
width: 100%;
border:1px solid #111;
font-size: 1.1em;
}
#forum td {
padding: 0.5em 0.5em 0.5em 0.5em;
border:1px solid #bbb;

}
#forum td.forum, #forum td.posts {
background-color: #eee;
background: #f6f6f6 url("img/forum.gif") repeat-x 0% 0%
}
#forum td.topics, #forum td.last-reply {
background-color: #eee;
}
#forum td.container {
background: #fff url("img/forum_cont.gif") no-repeat;
padding-left: 35px;
padding-top: 6 px;
padding-bottom: 6 px;
border-bottom: thin solid black;

}
#forum td.container a {
color: #555;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
color: #96c;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}

Very clean looking layout. Great work.

Blake Lucchesi
www.boldsource.com

hi
i change the css file for rtl ( example : Persian) language


/* project: mydrupal universal
author: original luka cvrk , modified http://mydrupal.com */

/*
** HTML elements
*/
body {
padding: 0;
margin: 0;
direction:rtl;
font: .8em "Trebuchet MS", Tahoma, sans-serif;
line-height: 1.5em;
color: #454545;
}
a { color: #009900; }
a:hover { color: #6C757A; }
h1 a, h2 a, h3 a { text-decoration: none; }
h1 { font: bold 2.1em Arial, Sans-Serif; }
h2 { font: bold 1.5em Arial, Sans-Serif; }
h3 { font: bold 1.2em Arial, Sans-Serif; }
h4 { font: bold 1.0em Arial, Sans-Serif; }
h1, h2, h3, h4, h5, h6,
p, pre, blockquote, label,
fieldset, address {
margin: .75em 0;
}
pre {
background: #CCCCCC;
border: 1px solid #DDDDDD;
font-size: 12px;
padding: .75em 1.5em;
}
textarea {
width: 100%;
}
fieldset {
border: 1px solid #CCCCCC;
}
table {
font-size: 1em;
}
blockquote {
margin: 20px 0;
padding: 0 20px 0 50px;
background: url('images/quote.png') 10px top no-repeat;
border: none;
}

/*
** Page layout blocks / IDs
*/
#page {
margin: 0 auto;
width: 800px;
text-align: right;
}
#header, #primary, #search-theme-form, #content, #footer {
width: 100%;
display: block;
float: right;
padding: 0;
margin: 0;
}
#header {
background: #FFFFFF url(images/gradient.gif) repeat-x;
color: #808080;
margin: 13px 0 3px 0;
padding: 10px 0;
border-bottom: 1px solid #CCCCCC;
}
#header #logo img {
float: rightt;
margin: 0 10px;
}
#header h1.site-name {
font: normal 2.1em Arial, Sans-Serif;
font-weight:bold;
letter-spacing: -1px;
margin: 0 0 0 10px;
}
#header h1.site-name a {
text-decoration: none;
}
#header h1.site-name a:hover {
color: #009900;
}
#header .site-slogan {
margin: 0 0 0 10px;
}
#primary {
font-size: 1.1em;
height: 30px;
color: #FFFFFF;
margin: 0 0 5px 0;
padding: 0;
background: #00FF00 url(images/n1.gif) repeat-x;

}
#primary .title {
float: right;
color: #FFFFFF;
font-size: .9em;
width: 195px;
padding: 7px 0 6px 10px;
}
#primary ul {
margin: 0;
padding: 0;
list-style : none;
}
#primary ul li {
float: right;
margin: 0;
padding: 0;
}
#primary ul li a {
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 7px 10px 6px 10px;
}
#primary ul li a:hover {
color: #ff6600;
}
#primary ul li a.active,
#primary ul li a.active:hover {
color: #FFFFFF;
background: #009900 url(images/bar.gif) no-repeat center top;
}

#secondary {
font-size: 0.89em;
height: 15px;
color: #333;
margin: 0 0 5px 0;
padding: 0;
}
#secondary .title {
float: right;
color: #333;
font-size: .89em;
width: 195px;
padding: 7px 0 6px 10px;
}
#secondary ul {
margin: 0;
padding: 0;
list-style : none;
}
#secondary ul li {
float: right;
margin: 0;
padding: 0;
}
#secondary ul li a {
display: block;
color: #333;
font-weight: bold;
text-decoration: none;
padding: 7px 10px 6px 10px;
}
#secondary ul li a:hover {
color: #009900;
}
#secondary ul li a.active,
#secondary ul li a.active:hover {
color: #009900;
text-decoration: underline;

}

#mission,
#search-theme-form {
color: #808080;
font-weight: bold;
}
#search-theme-form .welcome {
float: right;
padding: 2px 10px;
margin: 0;
}
#search-theme-form .search-form {
display: block;
float: left;
width: 573px;
height: 40px;
background: #FFFFFF url(images/searchbg.gif) no-repeat right;
margin: 0 0 5px 0;
}
#search-theme-form .search-form .title {
color: #808080;
float: right;
padding: 12px 2px 0 20px;
}
#search-theme-form .search-form .form-item {
float: right;
width: 300px;
height: 24px;
background: #FFFFFF url(images/input.gif) no-repeat;
margin: 8px 0 0 0;
padding: 0;
}
#search-theme-form .search-form .form-item .form-text {
float: right;
width: 292px;
border: 0px;
margin: 2px;
padding: 2px;
}
#search-theme-form .search-form .form-submit {
float: right;
width: 65px;
height: 24px;
background: #009900 url(images/submit.gif) no-repeat;
border: none;
font: bold 1em Arial, Sans-Serif;
color: #FFFFFF;
margin: 8px 20px 0 4px;
padding: 4px;
}
#search-theme-form .search-form .advanced {
float: right;
font-weight: normal;
padding: 12px 0 0 0;
}
#search-theme-form .search-form .advanced a {
color: #808080;
}
#content #main {
float: left;
width: 65%;
margin: 0 0 10px 0;
background: #faffed;

}
#content h1.title,
#content #mission h2.title,
#content .block h2.title {
color: #FFFFFF;
margin: 0;
padding: 7px 0 7px 5px;
font: bold 1em Tahoma, Arial, Sans-Serif;
}
#content h1.title,
#content #mission h2.title,
#content .block h2.title {
background: #669900 url(images/corner.gif) no-repeat top right;
margin: 0 0 3px 0;
}
#content #main .block {
margin: 10px 0 0 0;
}
#content #sidebar-right {
float: right;

width: 34.5%;
margin: 0 0 10px 0;

}
#content #sidebar-right .block {
margin: 0 0 3px 0;
padding: 0;

}
#content #sidebar-right .block h2.title {
background: #6C757A url(images/corner.gif) no-repeat top right;
margin: 0 0 3px 0;
}
#content #sidebar-right .block .content {
background: #faffed;
margin: 0;
}
#mission .content {
padding: 8px;
}
#content #sidebar-right .block .content {
color: #414141;
}
#footer {
clear: both;
text-align: center;
padding: 10px 0 10px 0;
margin: 0;
line-height: 1.8em;
background: #ffffff url(images/n1.gif) repeat-x;
color: white;

}
#footer .block {
text-align: right;
}
#footer a {
color: white;
font-weight: bold;
}
.breadcrumb {
padding: 3px 10px;
}
.messages {
border: 1px solid #CCCCCC;
}
.error {
border-color: red;
}

/*
** Styling from K2
*/
.itemhead .title a {
float: right;
color: #333333;
font-weight: bold;
}
a.editlink {
float: left;
width: 16px;
height: 16px;
margin: 4px 0 0 !important;
background: url('images/pencil.png') right center no-repeat;
}
.metadata { /* Time and category for blog entries */
font-size: smaller;
clear: both;
margin: 2px 0 0 0;
padding: 5px 0 0 0;
color: #AAAAAA;
line-height: 16px;
}
.chronodata {
padding: 2px 0 2px 20px ;
background: url('images/time.png') left center no-repeat;
}
.tagdata {
padding: 2px 0 2px 20px;
background: url('images/tag_blue.png') left center no-repeat;
}
.commentslink {
padding: 2px 0 2px 20px;
background: url('images/comment.png') left center no-repeat;
}
#sidebar-right ul, #sidebar-right ol {
margin: 5px 0 0;
padding: 0;
text-align: right;
margin-right:10px;
}
#sidebar-right ol {
margin-left: 15px;
}
#sidebar-right ul li, #sidebar-right ol li {
margin: 0;
padding: 1px 0;
}
#sidebar-right ul li {
list-style-type: none;
list-style-image: none;
}
#sidebar-right ul li.expanded {
list-style-type: circle;
list-style-image: url('images/menu-expanded.png');

}
#sidebar-right ul li.collapsed {
list-style-type: disc;
` list-style-image: url('images/menu-collapsed.png');
padding: .2em .5em 0 0;

margin-right:10px;
}
#sidebar-right ul li.leaf {
list-style-type: square;
list-style-image: url('images/menu-leaf.png');
padding: .2em .5em 0 0;
margin-right:10px;
}

/*
** Common declarations for child classes of node, comment, block, box, etc.
** If you want any of them styled differently for a specific parent, add
** additional rules /with only the differing properties!/ to .parent .class.
** See .comment .title for an example.
*/
.title{
font-weight: bold;
color: #222;
margin: 0 auto 0 auto; /* decrease default margins for h.title */
}
.title a {
font-weight: bold;
color: #111;
border-bottom: 1px solid gray;
margin: 0 auto 0 auto; /* decrease default margins for h.title */
}
.submitted {
color: #999999;
font-size: .8em;
}
.links {
color: #999999;

}
.links a {
font-weight: bold;
}
.node , .comment{
padding: 8px;
border: 1px solid #888;
margin: 0 2px 10px 2px;
background: #ffffee;

}

.block .content,
.box .content {margin-right:10px;
padding: 8px;
}
.sticky {
padding: .5em;
background: #ffffCC;
border: 1px solid red;
}
.node .taxonomy {
color: #999999;
font-size: .8em;
padding: 1.5em;
}
.node .picture {
border: none;
float: left;
margin: 0 0 .5em .5em;
}
.comment {
border: 1px solid #CCCCCC;
margin: 0 0 8px 0;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: .8em;
float: left;
color: red;
}
.comment .picture {
border: none;
float: right;
margin: 0 0 .5em .5em;
}
#mission{
background: #FFFFFF url(images/gradient.gif) repeat-x;
}
#designer a, #designer{
margin: 1em 0 0 0;
font-size: .8em;
font-weight: bold;
color: #aaa;
}

you can see demo in : http://www.irdrupal.com

thank

Hi
I add forum style to the this theme
You can see demo in the http://www.irdrupal.com/forum
site.
If you love it tell me to teach you it.

Hai,

Thanks for developing the theme for drupal 5.Also it looks very nice.is there the similar theme available for drupal6.If so how can i download it.isit available in drupal.org

Thanks

http://www.drupal-web-developers.com