Modification Template css

WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Modification Template css_fun

(1/2) > >>

bernie70:
Hello,

I want to know if following is possible:

On the left side (red section) there is the main menu. There I have a topic with some subtopics.

Now I want to have the Topic in the red section and the subtopics in the grey section below of it (the login is disabled). The content of the pages should appear below the picture in the white area.

Thanks for help,
bernie70

jacobi22:

--- Quote ---I want to know if following is possible:
--- End quote ---

everything is possible!!!

but we need more information about the template. please post a download-link or the template as a zip-file here

bernie70:
Hi jacobi22,

thank you for the answer. Sorry, that I've forgotten to post the template.

You can find it under this link:
http://WebsiteBaker.at/wb-templates/template-css_fun.html (view) or
http://WebsiteBaker.at/wb-templates/download.php?download=css_fun (download).

As you can see, the template has on the left side a red and a grey area.

With the default settings of this template the main-topics and the subtopics appear in the same font size in the red area and the Content of all pages in the white area below the picture.

As I said I want to put the main-topics in the red area and subtopics in the grey one (login is disabled, so it is "free"). The content of all pages should be placed in the white area below the picture.

Thanks for your answers,
bernie70

Argos:
Put something like this in the red area:

--- Code: ---
<?php show_menu2(0,SM2_ROOT,SM2_START+1,SM2_ALL,'[li][a][menu_title]</a>','</li>','<ul id="menu">','</ul>',false,false) ; ?>

--- End code ---

And this in the gray area:

--- Code: ---
<?php
// Submenu region, only shown when submenu's are available
ob_start();
show_menu2(0, SM2_ROOT+1, SM2_CURR+2, SM2_ALL|SM2_CURRTREE);
$childmenu=ob_get_contents();
ob_end_clean();
if ($childmenu!="") {
echo '<h3>Submenu</h3>';
show_menu2(0,SM2_ROOT+1,SM2_CURR+1,SM2_TRIM|SM2_CURRTREE,'[li][a][menu_title]</a>','</li>','<ul class="sidebar-menu">','</ul>',false,false);
}
?>

--- End code ---

Style the class "sidebar-menu" and the H3. Or use your own markup. This code shows the submenu only if there is actually a submenu. Otherwise it shows nothing at all. If you don't need a title for your submenu (like "Submenu" in this example), you can just use this code instead of the block above:

--- Code: ---
<?php show_menu2(0,SM2_ROOT+1,SM2_CURR+1,SM2_TRIM|SM2_CURRTREE,'[li][a][menu_title]</a>','</li>','<ul class="sidebar-menu">','</ul>',false,false); ?>

--- End code ---

bernie70:
Hi Argos,

thank you for the code. I tried to insert it in the templates index.php.

When I click on a menu without submenus nothing appears in the grey area - o.k.

When I click on a menu with submenus the submenu appears in the grey area and in the red one. When I click then on a menu without submenus the submenu in the grey area disappears but not in the red area.

I couldn't define the font of the submenu in the grey area - how I have to edit the style.css?

Here the Code of my index.php:

--- Code: ---
<?php if (!defined('WB_PATH')) die(header('Location: ../../index.php')); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php page_title('', '[WEBSITE_TITLE]'); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link href="<?php echo TEMPLATE_DIR; ?>/style.css" rel="stylesheet" type="text/css" />
<?php
// this allows to include the optional module files (frontend.css, frontend.js) into the head section
if(function_exists('register_frontend_modfiles')) {
register_frontend_modfiles('css');
register_frontend_modfiles('js');
} ?>
</head>
<body>


<div id="mainPan">


<div id="header">


<div id="website-title"><h1><?php page_title('','[WEBSITE_TITLE]'); ?></h1>
<br />
<?php echo WEBSITE_HEADER; ?>
</div>



<div class="search-box">
<?php include_once "search-box.php"; ?>
</div>


</div>


<div style="clear:both;"></div>


<div id="leftPan">

<div id="main-menu">
<div class="main-menu-title" align="center">Hauptmenü</div>
<?php if(SHOW_MENU) { show_menu2(0,SM2_ROOT,SM2_START+1,SM2_ALL,'[li][a][menu_title]</a>','</li>','<ul id="menu">','</ul>',false,false) ; } ?>
</div>

<div class="p10">
<?php show_menu2(0,SM2_ROOT+1,SM2_CURR+1,SM2_TRIM|SM2_CURRTREE,'[li][a][menu_title]</a>','</li>','<ul class="sidebar-menu">','</ul>',false,false); ?>
</div>

</div>



<div id="rightPan">

<div class="banner">
<img src="<?php echo TEMPLATE_DIR; ?>/top.jpg" alt="" width="600" height="300" border="0" />
</div>

<div style="clear:both;"></div>

<div class="content">
<h2><?php page_title('', '[PAGE_TITLE]'); ?></h2>
<div class="hr"> </div>
<?php page_content(); ?>
</div>
<div class="content">
<?php page_content(2); ?>
</div>

</div>


</div>


<div style="clear:both;"></div>


<div id="footer">

<?php page_footer(); ?>

</div>


<p> </p>

</body>
</html>

--- End code ---

Here is my style.css:

--- Code: ---
body {
background:#0f0f0f;
margin:0;
padding:0;
}

body,input,textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
}

a:link, a:active, a:visited {
color:#999;
text-decoration:none;
border-bottom:1px dotted #999;
outline:0;
}

a:hover {
color:#fff;
text-decoration:none;
border-bottom:1px dotted #fff;
}

img {border:0;}
form {margin:0;padding:0;}
.p10 {padding:10px;clear:both;}

hr {
border:dotted #878C40;
height:1px;
line-height:1px;
border-width:1px 0 0;
margin:0;
padding:0;
clear:both;
}

.hr {
height:1px;
line-height:1px;
border-top:1px dotted #878C40;
margin:0;
padding:0;
clear:both;
}

h1 {
display:inline;
font-family:serif;
font-size:36px;
font-weight:400;
color:#999966;
}

h2 {
display:inline;
font-family:serif;
font-size:24px;
font-weight:400;
font-style:italic;
color:#111;
}

h3 {
display:inline;
font-family:serif;
font-size:19px;
font-weight:400;
font-style:italic;
color:#111;
}

#mainPan {
position:relative;
margin:10px auto;
overflow:hidden;
width:860px;
min-height:680px;
height:auto !important;
background:#DCDF9D url(bg_mainPan.png) repeat-y;
border:10px solid #1f1f1f;
}

#leftPan, #rightPan {
position:relative;
float:left;
overflow:hidden;
}

#leftPan {
width:260px;
background:#353130;
color:#ccc;
}

#rightPan {
width:600px;
}

#leftPan h2 {
font-size:18px;
font-weight:400;
color:#ccc;
}

#leftPan a:active, #leftPan a:link, #leftPan a:visited {
color:#9bd;
text-decoration:none;
border-bottom:1px dotted #9bd;
}

#leftPan a:hover {
color:#fff;
text-decoration:none;
border-bottom:1px dotted #fff;
}

#footer {
width:860px;
margin:15px auto;
font-size:8pt;
text-align:center;
color:#ccc;
padding: 0 10px;
}

#footer a:link, #footer a:active, #footer a:visited {
margin-right:5px;
color:#ccc;
}

#footer a:hover {
margin-right:5px;
color:#fff;
}

#header {
position:relative;
float:left;
width:100%;
height:70px;
background:#000;
border-bottom:10px solid #1f1f1f;
}

#website-title {
float:left;
margin-left:20px;
margin-top:15px;
}

.search-box {
float:right;
margin-top:25px;
margin-right:25px;
}

.search-box .search-input {
width:130px;
background:#333;
border:1px solid #777;
color:#999;
}

.btn {
border:1px solid #777;
background-color:#530000;
color:#ccc;
}

.banner {
position:relative;
float:left;
width:600px;
height:300px;
}

.content {
width:580px;
padding:0 10px;
}

#main-menu {
float:left;
width:240px;
height:280px;
min-height:280px;
height:auto !important;
padding:10px;
background-color:#730000;
text-align:left;
color:#ccc;
}

#main-menu .main-menu-title {
font:bold 12px verdana;
color:#ccc;
background:#000;
margin-bottom:10px;
padding:3px;
}

#main-menu ul {
list-style-type:none;
margin:0;
padding:0;
}

#main-menu li {
padding:0 5px 1px 5px;
}

#main-menu a,
#main-menu a:link,
#main-menu a:visited {
display:block;
font-size:18px;
font-weight:400;
color:#ccc;
text-decoration:none;
border-bottom:1px dotted #a80000;
padding:2px 0 3px 15px;
}

#main-menu li.menu-current a,
#main-menu li a:hover {
color:#fff;
}

#main-menu li.menu-child a {
color:#ccc;
}

--- End code ---

Thanks,
bernie70

Navigation

[0] Message Index

[#] Next page

Go to full version