Theming Blocks title
Jimmel - July 24, 2009 - 23:27
Hi
I am creating a new theme at the moment. I want to create a block theme similar to the admire_grey theme in that I want the block title to be reversed out and a border around the content with the content box in white. But i cannot seem to get the css for the block title to move to be flush with the block at the top and i also cannot seem to get the text of the block title to be centred vertically within the block title.
I know this may not make much sense but if anyone out there can help me I can provide more specific information if and when it is needed, such as the page.tpl.php and style.css files.
This is a new theme and I don't really want to have to use an existing template from other themes.
Thanks a lot.
_
If the CSS positioning of an element doesn't seem to work, it's generally because you're trying to position it within a container that's the same size - result: no effect. For your specific problem, you need to make sure that .block h2.title is set to width: 100%, i.e. the full width of the block) before text-align et. will have any effect.
Use FireFox and Firebug; it will help you pinpoint exactly where the styles you're seeing are defined.
BTW, If you're creating a new theme, I'd very strongly suggest that you base it on Zen; see http://drupal.org/project/zen
It's a brilliant starting point with everything you need already in place - just add your own CSS - much, much easier than adapting an existing theme.
I use it for every new theme I create, and I've recreated the theme for several non-Drupal sites in an evening (for each one) using it.
Pete.
...
h2 is a block level element, it always expands to the full width of its containing element unless its floated or displayed inline.
Likely this is either a matter of margin/padding/line-height etc OR the selector is not specific enough.
OP, post a link, its all just guess work without one...
Zens Ok, bit long in the tooth now, other starter themes have smoked its ass in recent times, there just so many other options now and many with more specific features so theres no need to just rely on Zen - choose one thats right for the job, not shoehorn the job into one solution fits all...
Professional Drupal Design and Theme Services
Yes the h2 element always
Yes the h2 element always expands to the the width, so I don't have a problem with the width. The problem in the main is with the height and the fact that the h2 element does not stay flush with the top of the block element. Here is the CSS which I am using for the theme.
#footer {
width: 100%;
background-color: #99Cc33;
height: 50px;
float: left;
bottom: auto;
}
#rightside {
color: #000000;
float: right;
width: 21%;
clear: none;
height: auto;
padding: 2%;
}
#header {
width: 100%;
background-color: #FFFFFF;
position: relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 100px;
background-image: url(images/header.gif);
}
a {
font-size: 14px;
font-family: "Lucida Sans";
color: #333333;
text-align: left;
}
a:link {
}
a:hover {
color: #999999;
}
#content {
text-align: left;
background-color: #FFFFFF;
height: auto;
width: 46%;
float: left;
padding: 2%;
}
#searchbox {
position: absolute;
top: 40px;
right: 38px;
background-color: #FFFFFF;
height: 40px;
width: 130px;
}
.breadcrumb {
font-family: Futura;
font-size: 14px;
color: #CC6600;
}
#header2 {
height: 100px;
width: 800px;
padding-top: 0%;
padding-right: 0px;
padding-bottom: 0%;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#leftside {
color: #000000;
float: left;
height: auto;
width: 21%;
padding: 2%;
margin: 0px;
}
#wrapper {
width: 100%;
background-color: #FFFFFF;
height: auto;
position: absolute;
right: 0%;
bottom: 0px;
left: 0%;
background-repeat: repeat-x;
background-image: url(images/background.gif);
top: 0px;
}
#footer2 {
background-color: #99Cc33;
height: 50px;
width: 800px;
position: relative;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#maincontent {
width: 100%;
margin-right: auto;
margin-left: auto;
height: auto;
background-color: #FFFFFF;
clear: both;
float: left;
}
#wrapper2 {
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
text-align: center;
height: 100%;
left: auto;
right: auto;
}
#navbar {
background-color: #99Cc33;
height: 30px;
width: 100%;
position: relative;
top: 0px;
clear: both;
float: left;
}
body {
}
#navbar ul{
}
p {
font-size: 14px;
font-family: "Lucida Sans";
color: #000000;
}
li {
margin: 0px;
padding: 0px;
}
h1 {
color: #66CC33;
font-family: "Lucida Sans";
font-size: 18px;
font-weight: bold;
}
ul {
margin: 0px;
padding: 0px;
}
h2 {
font-family: Futura;
font-size: 16px;
color: #FF0000;
}
#navbar ul li{
display:inline;
line-height:30px;
margin:0;
float:left;
background-position: right;
height: 30px;
width: 100px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10;
}
#navbar ul li a{
font-family: Futura;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
position: relative;
text-align: center;
top: 0px;
right: 0px;
}
#navbar ul li a:hover{
text-decoration:none;
white-space: nowrap;
display: block;
position: relative;
top: 0px;
right: 0px;
color: #000000;
background-color: #FF0000;
}
.form-item .description
{
font-size: 0.85em;
font-family: Futura;
}
ol li
{ padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0.3em;
padding-left: 0pt;
margin-left: 2em;
font-family: "Lucida Sans";
color: #333333;
font-size: 14px;}
#leftside .block{
margin:0 0 12px 0;
border:1px solid #c7c7c7;
background-color: #fff;
background-image: url(images/lefblockbg.gif);
background-repeat: repeat-x;
background-position: top;
}
#leftside h2{
font-size:13px;
font-weight:bold;
display:block;
border:1px solid #fff;
background-color: #336699;
background-position: top;
height: 30px;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 5px;
color: #FFFFFF;
}
#leftside .block .content {padding:4px; }
#rightside .block{
border:1px solid #000000;
background-color: #00CC33;
height: auto;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-bottom: 6px;
margin-left: 0;
}
#rightside .block h2.blocktitle{
font-size:13px;
font-weight:bold;
border:1px solid #fff;
background-color: #FF0000;
color: #003399;
}
#rightside .block h2{
font-size:16px;
font-weight:bold;
background-color: #33CC33;
color: #FFFFFF;
font-family: "Lucida Sans";
line-height: 16px;
text-align: center;
position: relative;
}
#rightside .block .content{
background-color: #FFFFFF;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
}
ul.primary
{
border-collapse: collapse;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0em;
white-space: nowrap;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
height: auto;
line-height: normal;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #bbbbbb;
margin: 0px;
width: 100%;
}
.item-list ul li
{
list-style-type: disc;
list-style-image: none;
list-style-position: outside;
font-family: "Lucida Sans";
font-size: 14px;
background-position: left;
margin: 0pt;
padding: 0pt;
}
It fairly basic at the moment but I am trying to keep it simple and it is not finished yet. I do not want to use an existing templete such as zen because these templates have tags, classes and div's which I don't need or want. the idea is to build a template from scratch so that I have total control over what i am doing. I wonder if the problem is with the block.tpl.php as i have used the admire_grey block file which is
<?phpif ($block->subject):
?>
<?phpprint $block->subject
?>
<?phpendif;
?>
<?phpprint $block->content
?>
Or is it just the CSS that is wrong and can be fixed.
Thanks for all your quick replies.
...
Try this:
First remove the position:relative off the h2's I cant see why that is needed.
remove the font-sizes, line-height, margin and padding off all h2's for now (you can adjust these later).
Place this at the top of your stylesheet:
h2 {font-size: 1em;
margin: 0;
padding: 0;
line-height: 1; /* unitless line-height */
}
Professional Drupal Design and Theme Services
Thanks jmburnz, that works.
Thanks jmburnz, that works. Another way of it working is by setting leftside h2 margins to 0 and altering the padding. It was annoying for a while, (you know when you get stuck on something) but now that I know its just the css setting it make things a lot easier as i presume it will be the same for altering the nodes and other aspect of drupal theme settings.
Also to the others, firebug helped me sort out the css settings as it allowed me to see the changes to the css in realtime. Before firebug I was using firefox developer tool which although handy is not as convenient as firebug when it come to altering the css.
Thanks for all your help
P.S.
jmburnz, I like the idea behind your theming site, its good to know that something like that is out there and available to the drupal community, especially for theming designers, of which drupal needs a lot more.
Thanks Jimmel, and you're
Thanks Jimmel, and you're welcome in, anytime :)
Professional Drupal Design and Theme Services
Good advice
That's good advice. I messed around with the Amity Island theme for ages trying to get the results which I wanted and in the end I went to Zen and got the result which I wanted relatively quickly.
I can understand why people tend to avoid using Zen though. When you first load it up my reaction was like 'What the hell is this? It looks useless!'. But that was simply because I didn't have an understanding of what it was designed for at that time. It's flexible and well commented, plus, I ended up learning a hell of a lot while redesigning my site with it. That's not to say that there weren't points of infuriation along the way, some of which I still put down to poor Drupal documentation, but still, it's by far the most sensible route in my opinion.
Rich