By roam2345 on

Howdie there people BeeN a drupal fan for 8 months now and been happy with the limited themeing ability up to now.. So im trying to get a basic understanding of how things are working in the theme modual (starting with push button).

My first task is to customize the image insterted at the top of each block (want different images for different blocks).. sounds easy enough..
Done a bit of reading and getting a little stuck..

i know each block uses "box.tpl.php" right

wich goes like this

print $title

print $content

then in the css

.block .title h3 {
border-bottom: 2px solid #6699cc;
color: #369;
font-size: 18px;
font-weight: bold;
padding: 10px 5px 10px 30px;
margin-bottom: .25em;
background: transparent url(icon-block.png) left center no-repeat;
}
.block .content {
padding: 5px 5px 5px 5px;
}
.block {
margin-bottom: 1.5em;
}

lastly in the view source of the rendered html page

Events

bla bla bla bla bla

right so now my question..

do i have to edit the box.tpl.php file and create custom one's eg test.tpl.php but then how do i get selected blocks to use that file?
or do i have to create a custom

.blockTest .title h3 {
border-bottom: 2px solid #6699cc;
color: #369;
font-size: 18px;
font-weight: bold;369
padding: 10px 5px 10px 30px;
margin-bottom: .25em;
background: transparent url(icon-block.png) left center no-repeat;
}

but again how do i link specific blocks to it?

or do i have to create a new css "section" for the custom id tage eg.

.block-event-0 {
color: #222;
}

im a little lost as to where i sould be looking to make the change ould some one plz point me in the right direction..

⋅ Categories: Drupal 4.7.x

Comments

roam2345’s picture

roam2345 commented

Here is and exaple useing pushbutton as the base theme...

#block-event-0 h3 {
border-bottom: 2px solid #6699cc;
color: #369;
font-size: 18px;
font-weight: bold;
padding: 10px 5px 10px 30px;
margin-bottom: .25em;
background: transparent url(icon-block2.png) left center no-repeat;
}
#block-nice_menus-1 h3 {
border-bottom: 2px solid #6699cc;
color: #369;
font-size: 18px;
font-weight: bold;
padding: 10px 5px 10px 30px;
margin-bottom: .25em;
background: transparent url(icon-block3.png) left center no-repeat;
}
.block .title h3 {
border-bottom: 2px solid #6699cc;
color: #369;
font-size: 18px;
font-weight: bold;
padding: 10px 5px 10px 30px;
margin-bottom: .25em;
background: transparent url(icon-block.png) left center no-repeat;
}

Note the icon-block.png, icon-block2.png, icon-block3.png... the last .block .title is used for all blocks that dont have a custom style.. the two above that are custom blocks for 2 block of mine called block-nice_menus-1 and block-event-0... got that from viewing the source of the rendered html.. repace accordingly with yours..

Hope that helps some one..