Theme für jeden content type
Eingetragen von tintiifax (36)am 14.04.2007 - 16:49 Uhr in
Wie oder wo erstelle ich ein Theme für spezielle Content Typen. Also für eine page, story usw.
geht das im node-template oder nur über das template bearbeiten übers cck ?
wie kann ma unterscheiden ob man gerade ein page oder ein stroy content offen hat
danke
- Anmelden oder Registrieren um Kommentare zu schreiben
Template
am 14.04.2007 - 22:09 Uhr
Du kannst einfach ein neues Node-Template für jeden Contenttyp erstellen.
node-page.tpl.php
node-forum.tpl.php
node-story.tpl.php
node-blog.tpl.php
usw.
vg
--
md - DrupalCenter
mdwp
danke
am 15.04.2007 - 08:43 Uhr
hab gestern in der nacht noch alles gefunden
Hallo tintiifax.
am 22.05.2007 - 10:33 Uhr
Hallo tintiifax.
Wie hast du es hinbekommen? Würde auch gern für jeden Inhaltstyp ein unterschiedliches Theme benutzen bzw. nur die Farbe ändern ohne das, dass Aufbau der Seite verändert wird. Wie geht das?
Jemand ne Ahnung?! :-)
Danke schon mal.
Gruß Oliver
Unterschiedliche Themes für Inhaltstypen
am 22.05.2007 - 11:43 Uhr
Veränder einfach das body-tag in der page.tpl.php folgendermassen:
<body id="node_<?php print $node-type?>" >Jetzt kannst du in deiner styles.css die Elemente für bestimmte Node Typen stylen.
Beispiel:
#node_blog {
background-color:#ccc;
}
#node_story {
background-color:#ff0;
}
vg
--
md - DrupalCenter
mdwp
mmhhhh?!
am 23.05.2007 - 08:40 Uhr
Ich steh da echt aufm Schlauch. Bin noch nicht so bewandert mit PHP und CSS. Muss ich den Rest in der CSS-Datei löschen? Mach ich das, passiert auch nix.
Wenn ich aber den Body-tag ändere geht die 3-Spalten Darstellung verloren, genauer er macht alle 3 Spalten untereinander.
Die Farbe des gesamtem Theme wird dabei aber nicht verändert.
Re: mmhhhh?!
am 23.05.2007 - 10:43 Uhr
Ich steh da echt aufm Schlauch. Bin noch nicht so bewandert mit PHP und CSS. Muss ich den Rest in der CSS-Datei löschen?
Nein, um Gottes willen.
Wenn ich aber den Body-tag ändere geht die 3-Spalten Darstellung verloren, genauer er macht alle 3 Spalten untereinander.
Die Farbe des gesamtem Theme wird dabei aber nicht verändert.
Vermutlich benutzt dein Theme bereits eine id für den body. Darfst du dann natürlich nicht einfach überschreiben. Du kannst aber eine neue Klasse hinzufügen und die in deinen Styles benutzen.
Ersetz einfach in meinem Beispiel die id durch class und in der styles.css schreibst du nicht mehr #node_story sondern .node_story.
Wenn du dich mit all diesen Sachen noch nicht wirklich auskennst, solltest du aber vielleicht vorerst auf solche Schmankerln verzichten.
vg
--
md - drupalcenter
Sorry, ich noch mal.
am 25.05.2007 - 11:50 Uhr
Also da sitz ich nun schon ewig dran.
Ich bekomms einfach nicht hin.
Vielleicht könntest du mir mal genau zeigen was ich verändern muss.
Ich will lediglich einem Content-Typ eine andere Farbe zuordnen. Alles andere soll gleich bleiben. Als Theme benutze ich garland.
Vielen Dank schon mal für deine Bemühung.
template.php
<?php
/**
* Sets the body-tag class attribute.
*
* Adds 'sidebar-left', 'sidebar-right' or 'sidebars' classes as needed.
*/
function phptemplate_body_class($sidebar_left, $sidebar_right) {
if ($sidebar_left != '' && $sidebar_right != '') {
$class = 'sidebars';
}
else {
if ($sidebar_left != '') {
$class = 'sidebar-left';
}
if ($sidebar_right != '') {
$class = 'sidebar-right';
}
}
if (isset($class)) {
print ' class="'. $class .'"';
}
}
/**
* Return a themed breadcrumb trail.
*
* @param $breadcrumb
* An array containing the breadcrumb links.
* @return a string containing the breadcrumb output.
*/
function phptemplate_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
return '<div class="breadcrumb">'. implode(' › ', $breadcrumb) .'</div>';
}
}
/**
* Allow themable wrapping of all comments.
*/
function phptemplate_comment_wrapper($content, $type = null) {
static $node_type;
if (isset($type)) $node_type = $type;
if (!$content || $node_type == 'forum') {
return '<div id="comments">'. $content . '</div>';
}
else {
return '<div id="comments"><h2 class="comments">'. t('Comments') .'</h2>'. $content .'</div>';
}
}
/**
* Override or insert PHPTemplate variables into the templates.
*/
function _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
if ($secondary = menu_secondary_local_tasks()) {
$output = '<span class="clear"></span>';
$output .= "<ul class=\"tabs secondary\">\n". $secondary ."</ul>\n";
$vars['tabs2'] = $output;
}
// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}
return $vars;
}
return array();
}
/**
* Returns the rendered local tasks. The default implementation renders
* them as tabs.
*
* @ingroup themeable
*/
function phptemplate_menu_local_tasks() {
$output = '';
if ($primary = menu_primary_local_tasks()) {
$output .= "<ul class=\"tabs primary\">\n". $primary ."</ul>\n";
}
return $output;
}
page.tpl.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language ?>" lang="<?php print $language ?>">
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<style type="text/css" media="print">@import "<?php print base_path() . path_to_theme() ?>/print.css";</style>
<!--[if lt IE 7]>
<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie.css";</style>
<![endif]-->
</head>
<body<?php print phptemplate_body_class($sidebar_left, $sidebar_right); ?>>
<!-- Layout -->
<div id="header-region" class="clear-block"><?php print $header; ?></div>
<div id="wrapper">
<div id="container" class="clear-block">
<div id="header">
<div id="logo-floater">
<?php
// Prepare header
$site_fields = array();
if ($site_name) {
$site_fields[] = check_plain($site_name);
}
if ($site_slogan) {
$site_fields[] = check_plain($site_slogan);
}
$site_title = implode(' ', $site_fields);
$site_fields[0] = '<span>'. $site_fields[0] .'</span>';
$site_html = implode(' ', $site_fields);
if ($logo || $site_title) {
print '<h1><a href="/'. check_url($base_path) .'" title="'. $site_title .'">';
if ($logo) {
print '<img src="/'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';
}
print $site_html .'</a></h1>';
}
?>
</div>
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>
</div> <!-- /header -->
<?php if ($sidebar_left): ?>
<div id="sidebar-left" class="sidebar">
<?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
<?php print $sidebar_left ?>
</div>
<?php endif; ?>
<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">
<?php if ($breadcrumb): print $breadcrumb; endif; ?>
<?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php if ($tabs): print $tabs .'</div>'; endif; ?>
<?php if (isset($tabs2)): print $tabs2; endif; ?>
<?php if ($help): print $help; endif; ?>
<?php if ($messages): print $messages; endif; ?>
<?php print $content ?>
<span class="clear"></span>
<?php print $feed_icons ?>
<div id="footer"><?php print $footer_message ?></div>
</div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->
<?php if ($sidebar_right): ?>
<div id="sidebar-right" class="sidebar">
<?php if (!$sidebar_left && $search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
<?php print $sidebar_right ?>
</div>
<?php endif; ?>
</div> <!-- /container -->
</div>
<!-- /layout -->
<?php print $closure ?>
</body>
</html>
node.tpl.php
<?php phptemplate_comment_wrapper(NULL, $node->type); ?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="/<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span>
<?php endif; ?>
<div class="content">
<?php print $content ?>
</div>
<div class="clear-block clear">
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php print $links; ?></div>
<?php endif; ?>
</div>
</div>
style.css
/**
* Garland, for Drupal 5.0
* Stefan Nagtegaal, iStyledThis [dot] nl
* Steven Wittens, acko [dot] net`
*
* If you use a customized color scheme, you must regenerate it after
* modifying this file.
*/
/**
* Generic elements
*/
body {
margin: 0;
padding: 0;
background: #edf5fa;
font: 12px/170% Verdana;
color: #494949;
}
input {
font: 12px/100% "Verdana";
color: #494949;
}
textarea, select {
font: 12px/160% "Verdana";
color: #494949;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 170%;
}
h2 {
font-size: 160%;
line-height: 130%;
}
h3 {
font-size: 140%;
}
h4 {
font-size: 130%;
}
h5 {
font-size: 120%;
}
h6 {
font-size: 110%;
}
ul, quote, code, fieldset {
margin: .5em 0;
}
p {
margin: 0.6em 0 1.2em;
padding: 0;
}
a:link, a:visited {
color: #027AC6;
text-decoration: none;
}
a:hover {
color: #0062A0;
text-decoration: underline;
}
a:active, a.active {
color: #5895be;
}
hr {
margin: 0;
padding: 0;
border: none;
height: 1px;
background: #5294c1;
}
ul {
margin: 0.5em 0 1em;
padding: 0;
}
ul li {
margin: 0.4em 0 0.4em .5em;
}
ul.menu, .item-list ul {
margin: 0.35em 0 0 -0.5em;
padding: 0;
}
ul.menu ul, .item-list ul ul {
margin-left: 0em;
}
ul li, ul.menu li, .item-list ul li, li.leaf {
margin: 0.15em 0 0.15em .5em;
}
ul li, ul.menu li, .item-list ul li, li.leaf {
padding: 0 0 .2em 1.5em;
list-style-type: none;
list-style-image: none;
background: transparent url(images/menu-leaf.gif) no-repeat 1px .35em;
}
ul li.expanded {
background: transparent url(images/menu-expanded.gif) no-repeat 1px .35em;
}
ul li.collapsed {
background: transparent url(images/menu-collapsed.gif) no-repeat 0px .35em;
}
ul li.leaf a, ul li.expanded a, ul li.collapsed a {
display: block;
}
ul.inline li {
background: none;
margin: 0;
padding: 0 1em 0 0;
}
fieldset ul.clear-block li {
margin: 0;
padding: 0;
background-image: none;
}
dl {
margin: 0.5em 0 1em 1.5em;
}
dl dt {
}
dl dd {
margin: 0 0 .5em 1.5em;
}
img, a img {
border: none;
}
table {
margin: 1em 0;
width: 100%;
}
thead th {
border-bottom: 2px solid #d3e7f4;
color: #494949;
font-weight: bold;
}
th a:link, th a:visited {
color: #6f9dbd;
}
td, th {
padding: .3em .5em;
}
tr.even, tr.odd, tbody th {
border: solid #d3e7f4;
border-width: 1px 0;
}
tr.odd, tr.info {
background-color: #edf5fa;
}
tr.even {
background-color: #fff;
}
tr.odd td.active {
background-color: #ddecf5;
}
tr.even td.active {
background-color: #e6f1f7;
}
td.region, td.module, td.container {
border-top: 1.5em solid #fff;
border-bottom: 1px solid #b4d7f0;
background-color: #d4e7f3;
color: #455067;
font-weight: bold;
}
tr:first-child td.region, tr:first-child td.module, tr:first-child td.container {
border-top-width: 0;
}
span.form-required {
color: #ffae00;
}
span.submitted, .description {
font-size: 0.92em;
color: #898989;
}
.description {
line-height: 150%;
margin-bottom: 0.75em;
color: #898989;
}
.messages, .preview {
margin: .75em 0 .75em;
padding: .5em 1em;
}
.messages ul {
margin: 0;
}
.form-checkboxes, .form-radios, .form-checkboxes .form-item, .form-radios .form-item {
margin: 0.25em 0;
}
#center form {
margin-bottom: 2em;
}
.form-button, .form-submit {
margin: 2em 0.5em 1em 0;
}
#watchdog-form-overview .form-submit,
.confirmation .form-submit,
.search-form .form-submit,
.poll .form-submit,
fieldset .form-button, fieldset .form-submit,
.sidebar .form-button, .sidebar .form-submit,
table .form-button, table .form-submit {
margin: 0;
}
.box {
margin-bottom: 2.5em;
}
/**
* Layout
*/
#header-region {
min-height: 1em;
background: #d2e6f3 url(images/bg-navigation.png) repeat-x 50% 100%;
}
#header-region .block {
display: block;
margin: 0 1em;
}
#header-region .block-region {
display: block;
margin: 0 0.5em 1em;
padding: 0.5em;
position: relative;
top: 0.5em;
}
#header-region * {
display: inline;
line-height: 1.5em;
margin-top: 0;
margin-bottom: 0;
}
#header-region p, #header-region img {
margin-top: 0.5em;
}
#header-region h2 {
margin: 0 1em 0 0;
}
#header-region h3, #header-region label, #header-region li {
margin: 0 1em;
padding: 0;
background: none;
}
#wrapper {
background: #edf5fa url(images/body.png) repeat-x 50% 0;
}
#wrapper #container {
margin: 0 auto;
padding: 0 20px;
max-width: 1270px;
}
#wrapper #container #header {
height: 80px;
}
#wrapper #container #header #logo-floater {
position: absolute;
}
#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
line-height: 120px;
position: relative;
z-index: 2;
white-space: nowrap;
}
#wrapper #container #header h1 span {
font-weight: bold;
}
#wrapper #container #header h1 img {
padding-top: 16px;
padding-right: 20px;
float: left;
}
/* With 3 columns, require a minimum width of 1000px to ensure there is enough horizontal space. */
body.sidebars {
min-width: 980px;
}
/* With 2 columsn, require a minimum width of 800px. */
body.sidebar-left, body.sidebar-right {
min-width: 780px;
}
/* We must define 100% width to avoid the body being too narrow for near-empty pages */
#wrapper #container #center {
float: left;
width: 100%;
}
/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
margin-left: -210px;
}
body.sidebar-right #center {
margin-right: -210px;
}
body.sidebars #center {
margin: 0 -210px;
}
/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
margin-left: 210px;
}
body.sidebar-right #squeeze {
margin-right: 210px;
}
body.sidebars #squeeze {
margin: 0 210px;
}
/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
margin: 60px 0 5em;
width: 210px;
float: left;
z-index: 2;
position: relative;
}
#wrapper #container .sidebar .block {
margin: 0 0 1.5em 0;
}
#sidebar-left .block {
padding: 0 15px 0 0px;
}
#sidebar-right .block {
padding: 0 0px 0 15px;
}
.block .content {
margin: 0.5em 0;
}
#sidebar-left .block-region {
margin: 0 15px 0 0px;
}
#sidebar-right .block-region {
margin: 0 0px 0 15px;
}
.block-region {
padding: 1em;
background: transparent;
border: 2px dashed #b4d7f0;
text-align: center;
font-size: 1.3em;
}
/* Now we add the backgrounds for the main content shading */
#wrapper #container #center #squeeze {
background: #fff url(images/bg-content.png) repeat-x 50% 0;
position: relative;
}
#wrapper #container #center .right-corner {
background: transparent url(images/bg-content-right.png) no-repeat 100% 0;
position: relative;
left: 10px;
}
#wrapper #container #center .right-corner .left-corner {
padding: 60px 25px 5em 35px;
background: transparent url(images/bg-content-left.png) no-repeat 0 0;
margin-left: -10px;
position: relative;
left: -10px;
min-height: 400px;
}
#wrapper #container #footer {
float: none;
clear: both;
text-align: center;
margin: 4em 0 -3em;
color: #898989;
}
#wrapper #container .breadcrumb {
position: absolute;
top: 15px;
left: 35px;
z-index: 3;
}
body.sidebar-left #footer {
margin-left: -210px;
}
body.sidebar-right #footer {
margin-right: -210px;
}
body.sidebars #footer {
margin: 0 -210px;
}
/**
* Header
*/
#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
color: #fff;
font-weight: normal;
text-shadow: #1659ac 0px 1px 3px;
font-size: 1.5em;
}
#wrapper #container #header h1 a:hover {
text-decoration: none;
}
#wrapper #container .breadcrumb {
font-size: 0.92em;
}
#wrapper #container .breadcrumb, #wrapper #container .breadcrumb a {
color: #529ad6;
}
#mission {
padding: 1em;
background-color: #fff;
border: 1px solid #e0e5fb;
margin-bottom: 2em;
}
/**
* Primary navigation
*/
ul.primary-links {
margin: 0;
padding: 0;
float: right;
position: relative;
z-index: 4;
}
ul.primary-links li {
margin: 0;
padding: 0;
float: left;
background-image: none;
}
ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
display: block;
margin: 0 1em;
padding: .75em 0 0;
color: #fff;
background: transparent url(images/bg-navigation-item.png) no-repeat 50% 0;
}
ul.primary-links li a:hover, ul.primary-links li a.active {
color: #fff;
background: transparent url(images/bg-navigation-item-hover.png) no-repeat 50% 0;
}
/**
* Secondary navigation
*/
ul.secondary-links {
margin: 0;
padding: 18px 0 0;
float: right;
clear: right;
position: relative;
z-index: 4;
}
ul.secondary-links li {
margin: 0;
padding: 0;
float: left;
background-image: none;
}
ul.secondary-links li a, ul.secondary-links li a:link, ul.secondary-links li a:visited {
display: block;
margin: 0 1em;
padding: .75em 0 0;
color: #cde3f1;
background: transparent;
}
ul.secondary-links li a:hover, ul.secondary-links li a.active {
color: #cde3f1;
background: transparent;
}
/**
* Local tasks
*/
ul.primary, ul.primary li, ul.secondary, ul.secondary li {
border: 0;
background: none;
margin: 0;
padding: 0;
}
#tabs-wrapper {
margin: 0 -26px 1em;
padding: 0 26px;
border-bottom: 1px solid #e9eff3;
position: relative;
}
ul.primary {
padding: 0.5em 0 10px;
float: left;
}
ul.secondary {
clear: both;
text-align: left;
border-bottom: 1px solid #e9eff3;
margin: -0.2em -26px 1em;
padding: 0 26px 0.6em;
}
h2.with-tabs {
float: left;
margin: 0 2em 0 0;
padding: 0;
}
ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,
ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {
border: 0;
background: transparent;
padding: 4px 1em;
margin: 0 0 0 1px;
height: auto;
text-decoration: none;
position: relative;
top: -1px;
}
ul.primary li.active a, ul.primary li.active a:link, ul.primary li.active a:visited, ul.primary li a:hover,
ul.secondary li.active a, ul.secondary li.active a:link, ul.secondary li.active a:visited, ul.secondary li a:hover {
background: url(images/bg-tab.png) repeat-x 0 50%;
color: #fff;
}
ul.primary li.active a,
ul.secondary li.active a {
font-weight: bold;
}
/**
* Nodes & comments
*/
.node {
border-bottom: 1px solid #e9eff3;
margin: -1.5em -26px 1.5em;
padding: 1.5em 26px;
}
ul.links li, ul.inline li {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 1em;
background-image: none;
}
.node .links, .comment .links {
text-align: left;
}
.node .links ul.links li, .comment .links ul.links li {}
.terms ul.links li {
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 1em;
}
.picture, .comment .submitted {
float: right;
clear: right;
padding-left: 1em;
}
.new {
color: #ffae00;
font-size: 0.92em;
font-weight: bold;
float: right;
}
.terms {
float: right;
}
.preview .node, .preview .comment, .sticky {
margin: 0;
padding: 0.5em 0;
border: 0;
background: 0;
}
.sticky {
padding: 1em;
background-color: #fff;
border: 1px solid #e0e5fb;
margin-bottom: 2em;
}
#comments {
position: relative;
top: -1px;
border-bottom: 1px solid #e9eff3;
margin: -1.5em -25px 0;
padding: 0 25px;
}
#comments h2.comments {
margin: 0 -25px;
padding: .5em 25px;
background: #fff url(images/gradient-inner.png) repeat-x 0 0;
}
.comment {
margin: 0 -25px;
padding: 1.5em 25px 1.5em;
border-top: 1px solid #e9eff3;
}
.indented {
margin-left: 25px;
}
.comment h3 a.active {
color: #494949;
}
.node .content, .comment .content {
margin: 0.6em 0;
}
/**
* Aggregator.module
*/
#aggregator {
margin-top: 1em;
}
#aggregator .feed-item-title {
font-size: 160%;
line-height: 130%;
}
#aggregator .feed-item {
border-bottom: 1px solid #e9eff3;
margin: -1.5em -31px 1.75em;
padding: 1.5em 31px;
}
#aggregator .feed-item-categories {
font-size: 0.92em;
}
#aggregator .feed-item-meta {
font-size: 0.92em;
color: #898989;
}
/**
* Color.module
*/
#palette .form-item {
border: 1px solid #fff;
}
#palette .item-selected {
background: #fff url(images/gradient-inner.png) repeat-x 0 0;
border: 1px solid #d9eaf5;
}
/**
* Menu.module
*/
tr.odd td.menu-disabled {
background-color: #edf5fa;
}
tr.even td.menu-disabled {
background-color: #fff;
}
td.menu-disabled {
opacity: 0.5;
}
/**
* Poll.module
*/
.poll .bar {
background: #fff url(images/bg-bar-white.png) repeat-x 0 0;
border: solid #f0f0f0;
border-width: 0 1px 1px;
}
.poll .bar .foreground {
background: #71a7cc url(images/bg-bar.png) repeat-x 0 100%;
}
.poll .percent {
font-size: .9em;
}
/**
* Autocomplete.
*/
#autocomplete li {
cursor: default;
padding: 2px;
margin: 0;
}
/**
* Collapsible fieldsets
*/
fieldset {
margin: 1em 0;
padding: 1em;
border: 1px solid #d9eaf5;
background: #fff url(images/gradient-inner.png) repeat-x 0 0;
}
html.js fieldset.collapsed {
background: transparent;
padding-top: 0;
padding-bottom: .6em;
}
html.js fieldset.collapsible legend a {
padding-left: 2em;
background: url(images/menu-expanded.gif) no-repeat 0% 50%;
}
html.js fieldset.collapsed legend a {
background: url(images/menu-collapsed.gif) no-repeat 0% 50%;
}
/**
* Syndication icons and block
*/
#block-node-0 h2 {
float: left;
padding-right: 20px;
}
#block-node-0 img, .feed-icon {
float: right;
padding-top: 4px;
}
#block-node-0 .content {
clear: right;
}
/**
* Login Block
*/
#user-login-form {
text-align: center;
}
#user-login-form ul {
text-align: left;
}
/**
* Admin Styles
*/
div.admin-panel,
div.admin-panel .description,
div.admin-panel .body,
div.admin,
div.admin .left,
div.admin .right,
div.admin .expert-link,
div.item-list,
.menu {
margin: 0;
padding: 0;
}
div.admin .left {
float: left;
width: 48%;
}
div.admin .right {
float: right;
width: 48%;
}
div.admin-panel {
background: #fff url(images/gradient-inner.png) repeat-x 0 0;
padding: 1em 1em 1.5em;
}
div.admin-panel .description {
margin-bottom: 1.5em;
}
div.admin-panel dl {
margin: 0;
}
div.admin-panel dd {
color: #898989;
font-size: 0.92em;
line-height: 1.3em;
margin-top: -.2em;
margin-bottom: .65em;
}
table.system-status-report th {
border-color: #d3e7f4;
}
#autocomplete li.selected, tr.selected td, tr.selected td.active {
background: #027ac6;
color: #fff;
}
tr.selected td a:link, tr.selected td a:visited, tr.selected td a:active {
color: #d3e7f4;
}
/**
* CSS support
*/
span.clear {
display: block;
clear: both;
height: 1px;
line-height: 0px;
font-size: 0px;
margin-bottom: -1px;
}
/*******************************************************************
* Color Module: Don't touch *
*******************************************************************/
/**
* Generic elements.
*/
.messages {
background-color: #fff;
border: 1px solid #b8d3e5;
}
.preview {
background-color: #fcfce8;
border: 1px solid #e5e58f;
}
div.status {
color: #3a3;
border-color: #c7f2c8;
}
div.error {
color: #c52020;
}
.form-item input.error, .form-item textarea.error {
border: 1px solid #c52020;
color: #494949;
}
/**
* Watchdog.module
*/
tr.watchdog-user {
background-color: #fcf9e5;
}
tr.watchdog-user td.active {
background-color: #fbf5cf;
}
tr.watchdog-content {
background-color: #fefefe;
}
tr.watchdog-content td.active {
background-color: #f5f5f5;
}
tr.watchdog-warning {
background-color: #fdf5e6;
}
tr.watchdog-warning td.active {
background-color: #fdf2de;
}
tr.watchdog-error {
background-color: #fbe4e4;
}
tr.watchdog-error td.active {
background-color: #fbdbdb;
}
tr.watchdog-page-not-found, tr.watchdog-access-denied {
background: #d7ffd7;
}
tr.watchdog-page-not-found td.active, tr.watchdog-access-denied td.active {
background: #c7eec7;
}
/**
* Status report colors.
*/
table.system-status-report tr.error, table.system-status-report tr.error th {
background-color: #fcc;
border-color: #ebb;
color: #200;
}
table.system-status-report tr.warning, table.system-status-report tr.warning th {
background-color: #ffd;
border-color: #eeb;
}
table.system-status-report tr.ok, table.system-status-report tr.ok th {
background-color: #dfd;
border-color: #beb;
}
Einfach Übung...
am 25.05.2007 - 12:29 Uhr
Eine Möglichkeit ist die von Meinolf bereits beschriebene: http://www.drupalcenter.de/node/3053#comment-9496
D.h.: Du machst eine Kopie Deiner node.tpl.php Datei und benennst Sie um, wenn Du z.B. für Story-Nodes eine neue Hintergrundfarbe haben möchtest, in node-story.tpl.php. Dann fügst Du z.B. dem erstem Div in dieser Datei eine zusätzliche CSS-Klasse hinzu - z.B. @class="story"@ - das sieht dann so aus:
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?> story">Danach kannst Du die neue Klasse per Stylesheet (style.css) formatieren, für die Änderung der Hintergrundfarbe, kannst Du z.B. folgendes hinzufügen:
.story {
background-color: #ff0000;
}
Es gibt aber noch andere, elegantere Möglichkeiten. Wenn Dir das zu kompliziert ist, kannst Du auch mal dieses Modul testen: http://drupal.org/project/contemplate Evtl. vereinfacht es Dir das "themen" ein wenig.
--
bv - drupalcenter.de
Post lesen
am 25.05.2007 - 12:37 Uhr
Les doch einfach meinen obigen Post richtig, da steht ja drin was du wo ändern musst.
Allerdings ist das Garland Theme für solche Anpassungen nicht sonderlich gut geeignet, da dort das meiste über Hintergrundbilder gemacht wird.
Probier meinen Vorschlad mal mit einem einfachen Theme wie "Zen" oder "Bluemarine" aus, damit du eine Vorstellung von der Vorgehensweise bekommst.
In Garland macht man Farbänderungen eigentlich über den Color Chooser.
vg
--
md - DrupalCenter
mdwp
Sooooo...
am 30.05.2007 - 10:42 Uhr
Also habe es soweit hinbekommen am Beispiel des Bluemarine-Theme. Danke noch mal. Die Hintergrundfarbe des Story-Content konnte ich ändern.
Wie kann ich aber noch die Headerfarbe ändern? Oder die Sidebar-Farbe?
Da Olli
Header
am 30.05.2007 - 10:56 Uhr
Du musst halt immer nach dem entsprechenden CSS-Selektor - id oder Klasse - schauen und diesen dann stylen.
Beispiel:
#node_story #header{background-color:#ff0;
}
vg
--
md - DrupalCenter
Erst suchen dann fragen
mdwp