Author Topic: Modification Template css_fun (Read 7691 times)

bernie70 · « **on:** January 29, 2013, 12:31:05 AM »

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 · « **Reply #1 on:** January 29, 2013, 01:29:24 PM »

Quote

I want to know if following is possible:

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 · « **Reply #2 on:** January 29, 2013, 10:15:58 PM »

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 · « **Reply #3 on:** January 30, 2013, 02:03:23 PM »

Put something like this in the red area:

Code: [Select]


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

And this in the gray area:

Code: [Select]


<?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); 
	} 
?>

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: [Select]


<?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); ?>

bernie70 · « **Reply #4 on:** January 30, 2013, 10:28:39 PM »

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: [Select]


<?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>

<!-- main wrapper start -->
<div id="mainPan">

  <!-- header area start -->
  <div id="header">
    
      <!-- title and top logo start -->
      <div id="website-title"><h1><?php page_title('','[WEBSITE_TITLE]'); ?></h1>
        <br />
        <?php echo WEBSITE_HEADER; ?>
      </div>
      <!-- title and top logo end -->

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

   </div>
   <!-- header area end -->
    
	
   <div style="clear:both;"></div>    
		
   
   <!-- leftPan start -->
   <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>
   <!-- leftPan end -->	
		
		  
   <!-- rightPan start -->	
   <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">&nbsp;</div>
		<?php page_content(); ?>
	  </div>
	  <div class="content">
		<?php page_content(2); ?>
	  </div>
	  
   </div>
   <!-- rightPan end -->

</div>
<!-- mainPan end -->
    
  <div style="clear:both;"></div>
	
<!-- footer start -->
<div id="footer">
   
   <?php page_footer(); ?>

</div>
<!-- footer and -->	
    
<p>&nbsp;</p>
    
</body>
</html>

Here is my style.css:

Code: [Select]


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;
}

Thanks,
bernie70

Argos · « **Reply #5 on:** January 30, 2013, 11:42:02 PM »

Quote from: bernie70 on January 30, 2013, 10:28:39 PM

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.

Sorry, it should be this in the red area:

Code: [Select]


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

And just use exactly that for the PHP part of the main menu, don't use the if(SHOW_MENU) part that I see in your template. It's old code and does not belong to the showmenu2 setup.

The font styling of the submenu has nothing to do with WB, it's basic CSS, so is not really something to ask for help about here. But to give you a start: copy the styles for the main menu to begin with, and add class p10 in it, like so:

Code: [Select]

#main-menu .p10 a, #main-menu .p10  a:link, #main-menu .p10  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 .p10 li.menu-current a, #main-menu .p10 li a:hover {color:#fff;}
#main-menu .p10 li.menu-child a {color:#ccc;}

Then change styles to your liking. You can also use UL class sidebar-menu to style if you want.

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: Modification Template css_fun (Read 7691 times)

bernie70

Modification Template css_fun

jacobi22

Re: Modification Template css_fun

bernie70

Re: Modification Template css_fun

Argos

Re: Modification Template css_fun

bernie70

Re: Modification Template css_fun

Argos

Re: Modification Template css_fun