001 Dev Skin
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.
Note: This theme is tested on Internet Explorer7, Safari, Firefox, Explorer6?(NO, if somebody wants to fix this, you are very welcome, thanks in advance.)
You can also transform this into a video block, anybody want to try? please share and give your instructions.
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 x 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 290x210 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 (290x210 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;
}
#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;
}