Drupal Sites Showcase

A showcase of Drupal sites & Drupal projects

001 Dev Skin

Added by on Mon 29th Jun 2009
devavrata_snapshot_colors.JPG

Project Info

IMPORTANT: This theme is a pure css theme which requires a host theme – the Devavrata Core Theme (FREE Version, downloadable here.)
This is a subtheme of Devavrata Core Theme
Look Pro, Feel Pro with this theme! It’s time to take another step in theming.

NEw! video version http://www.pro.devavrata.com

This is the No.1 Drupal’s Multimedia Theme, No other theme matches its quality and performance.
Required:

Instructions:

  • Download all required files if you don’t have them yet
  • Copy the devavrata_free_bare folder to sites/all/themes/
  • Copy this 001_dev_skin to sites/all/themes/devavarata_free_bare/skins/
  • Choose this theme in the theme settings
  • Copy CCK, Imagecache, Views, Views Slideshow to sites/all/modules/
  • Goto modules, enable the above modules
  • Configure Imagecache, make a preset name of 290 × 210 or any name you want, add scale(width: 300, height: 300, ), add crop ( width: 290 height: 210, xoffset: 5, yoffset: 5)
  • Edit content type Page or any content type you want, Click on the Manage fields tab and add an imagefield type field, add new field called Image | field_image | File | Image, then make sure that the permitted types of images are set to jpg png
  • Then in the Display field tab (make sure you use the imagecache preset you created, the 290×210 or the name you put in the imagecache preset)
  • In the Views, which can be found the site building menu, add a view by clicking the add tab, put the name header_slideshow and Header Slideshow on the tag field, make sure that it is a node type
  • Then if you are in the header_slideshow views configuration page, click on the add field, select Content (scroll down, you’ll see it), then check on the field_image, click add, you’ll see another settings(almost there, be patient), check on the "link this field to its node" checkbox, label: none, and select the imagecache name you put in the imagecache preset (290×210 image)
  • Important: (everything is important) click on the style:unformatted, select slideshow, click update, you can see the settings, leave as is for a while, you can always go back to this for adjustments
  • Add Display Block type, you’ll see this near Defaults
  • CLICK SAVE
  • Add contents and upload images
  • Go to block, make sure that "header_slideshow: Block" is in the Header, click save
  • Done, please inform me if there’s something I missed in the instruction so I can correct them immediately, thanks

With the use of a few lines of CSS override and images, you can transform Devavrata Core Theme to your own theme, create your own skin and contribute to Drupal.org
Here is my sample CSS override used in 001 Dev Skin

/*************************************
* 001 Dev Skin
*************************************/

#header-region h1, #header-region h1 a {
font-size: 36px;
color: #FFF;
}
#site-name-shadow {
display: none;
}
#site-slogan h3{
font-size: 14px;
color: #FFF !important;
}
#header-region {
border: none;
background-image: url(images/header_800_slideshow_gray.png) !important;
background-repeat: no-repeat;
background-position: 0px 0px;
filter: progid:DXImageTransform.Microsoft.BasicImage(opacity=1);
filter: Alpha(opacity=100);
opacity: 1;
height: 250px;
}
#header {
position: relative;
height: 235px;
width: 290px;
margin-right: 28px;
margin-top: 15px;
margin-bottom: 0px;
}
#header .view-content{
width: 290px;
}
#logo-block {
position: relative;
top: 120px;
}
#search {
position: absolute;
top: 40px;
right: 350px;
}

Always get the latest version of Devavrata Core Theme (Free Version)