modify a template

[cagnaluia]

Hi,

first question: is it possible modify an existing template? in particular: Beautiful_day
This is a good template but I want change two things in it.

so...

second question: I would like delete the sub-menu in the right and put the subpage directly on the top main buttons, by fade-up on these..or roll-out... I don't know the right term.

How can I do?

[maverik]

http://help.WebsiteBaker.org/pages/en/advanced-docu.php

[cagnaluia]

ok, thanks...

I can see the TAG
1. <div class="navigation">
and
2. <div class="sidenav">
involve my thrubles...

I can try to delete the point number <div class="sidenav"> , BUT....
HOW CAN I put the submenù in the <div class="navigation">

This... I don't understand...

[maverik]

http://www.websitebakers.de/sm2/

[cagnaluia]

ops...
I fear I have made a mess....

from screen.css --> allcss2 template I cut this piece of code:

Code: [Select]

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ####    Header Menu #####
    #######################

    Horizontal Drop-Down Menu based off :
    http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
#navContainer {width: auto;display:block;clear:both;border-right:1px solid #000;}


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

/* Header menu */    
#header_menu {position: absolute; margin-left: 20px;background:#555;}
#header_menu li {line-height: normal;}
ul#header_menu  {z-index: 10; clear: both;}

#nav {
    height: 1.68em;
    background: #666;
    border-top: 0;
    border-bottom: 1px solid #000;
    padding:0;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 81%;
    text-transform: uppercase;
    width: auto;
    /*
    (Disappearing List-Background)
    http://www.positioniseverything.net/explorer/ie-listbug.html
    */
    position: relative; /* Fix the Stupid IE6 Bug */
}
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal;}
#nav ul li a {display: block; background: #666; padding: 5px 10px; padding-bottom: 4px; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; text-decoration: none;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}
#nav li a:active, #nav ul li a.active {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}

/* Current page Customisations*/
#nav li.menu-current a        {background: #000; color: #fff; border-bottom: 1px solid #000;}
#nav li.menu-current a        {font-weight: bold;}

/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 12em; margin: 0; display: none; text-transform: none; border: 1px solid #000; border-top: 0; font-size: 100%;}
#nav .menu li ul li {width: 12em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul a {width: 11.5em; padding: .6em .1em .6em .4em; background: #4b4c4d; color: #fff; border: 0;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover ul, #nav .menu li li:hover ul, #nav .menu li.subMenu ul, #nav .menu li li.subMenu ul {display: block;}


/* 3rd Child Menu Appreances */
#nav .menu li ul li ul li a     { width: 11.5em; padding: .6em .1em .6em .4em; background: #c6c6c6; color: #fff; }

/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
    position: absolute;
    top: 1px;
    left: 100%;
}




/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



and past it in the end of beautifulday --> default.css


SO..

I modify this line in the index.html (beautiful day...):

Code: [Select]

<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, &#39;[a][menu_title]</a>&#39;, &#39;&#39;, &#39;&#39;, &#39;&#39;, &#39;[a][menu_title]</a>&#39;); ?>

replace with this (copy from allcss2 index.html template):

Code: [Select]

<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, &#39;\n</li>&#39;, false, false, false, &#39;<ul id=header_menu"clashh="menu">&#39;</ul>); ?>

Thinking to re-use this piece in the right way.

BUT...

Opening the web site from browser I found the page..ALL BLANK ...  without anything, without source...
!!?!?

I dind't think to destroy all the site, tweaking this "<? php show_menu2(...) ..." line.


I replaced the old index.html previously saved, without success...


sing


only the change of template from the admin panel showed me the site.

[cagnaluia]

where I'm wrong?

[marathoner]

I don't know a thing about these two specific templates (and I'm not interested in spending time reviewing them) but I have a couple of thoughts.

It appears that the CSS from ALLCSS2 has both a "navContainer" and "nav" ID wrapper around the menu call. You did not indicate that you modified the index.php to include these wrappers...did you include these as well as removing any wrappers not used by this CSS? Did you look at the output generated from both templates to make sure that it's what you expected? This will show you want the browser is trying to render.

It sounds like your questions have more to do with HTML and CSS than they do with WB. You may want to look into tools such as the Firefox addon "Web Developer" to help with this project.

Just my 2 cents

[cagnaluia]

ok.


I add the ID information to the DIV menu... (container and navigation)

this is the index.html page (of beautifulday template):

Code: [Select]

<?php

/*

 WebsiteBaker Project <http://www.WebsiteBaker.org/>
 Copyright (C) 2004-2007, Ryan Djurovich

 WebsiteBaker is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.

 WebsiteBaker is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with WebsiteBaker; if not, write to the Free Software
 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

*/

if(!defined(&#39;WB_URL&#39;)) {
    header(&#39;Location: ../index.php&#39;);
    exit(0);
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined(&#39;DEFAULT_CHARSET&#39;)) { echo DEFAULT_CHARSET; } else { echo &#39;utf-8&#39;; }?>" />
    <meta name="description" content="<?php page_description(); ?>"/>
    <meta name="keywords" content="<?php page_keywords(); ?>"/>
    <meta name="author" content="author"/>
    <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/default.css" media="screen"/>
    <title><?php echo WEBSITE_TITLE; ?> - <?php echo PAGE_TITLE; ?></title>
    <script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/easySlider1.7.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: false,
                continuous: true,
                numeric: true
            });
        });    
    </script>
</head>

<body>

<div class="top">
               
    <div class="header">

        <div class="left">
            <?php echo WEBSITE_TITLE; ?>
        </div>
       
        <div class="right">

            <h2><?php echo PAGE_TITLE; ?></h2>
           
            <p><?php page_description(); ?></p>

        </div>

    </div>    

</div>

<div id="navContainer" class="container">    

    <div id="nav" class="navigation">
        <small>
        <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, &#39;[a][menu_title]</a>&#39;, &#39;&#39;, &#39;&#39;, &#39;&#39;, &#39;[a][menu_title]</a>&#39;); ?>
        <!-- <?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, &#39;\n</li>&#39;, false, false, false, &#39;<ul id=header_menu"clashh="menu">&#39;</ul>); ?> -->
        </small>
        <div class="clearer"><span></span></div>
    </div>

    <div class="main">        
       
        <div class="content">
            <?php page_content(); ?>
        </div>
<!--
        <div class="sidenav">
            <?php show_menu2(0, SM2_CURR+1, SM2_START, false, false, &#39;<li id="navlist">&#39;);    ?>
        </div>
-->
        <div class="clearer"><span></span></div>

    </div>

    <div class="footer">
        <?php page_footer(); ?> | 2009 - 2010 <a href="http://www.promotionalwater.eu/wb">site</a>
        
    </div>

</div>

</body>

</html>

but... the problem is.... the site is completely BLANK...
without any source...

[cagnaluia]

ok, the problem is in this line...

the original beautifulday string: (a precision: show_menu2 addon installed!)

Code: [Select]

<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, &#39;[a][menu_title]</a>&#39;, &#39;&#39;, &#39;&#39;, &#39;&#39;, &#39;[a][menu_title]</a>&#39;); ?>


the original allcss2 string: (same precision: show_menu2 addon installed!)

Code: [Select]

<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, &#39;<ul id="header_menu" class="menu">&#39;); ?>

when I put this last one, all the site disappears....

[cagnaluia]

I don't know why... but now it works...

I replaced word by word, manually all the string, and test it everytime.

but now.. I have a problem with the css....

look at this http://www.promotionalwater.eu/wb/

I would like use the beautifulday buttons & colors with the allcss2 usability ... it is so hard to understand...


(for example: when I click over a button, the sub-menus hide the root button..... sing)

[cagnaluia]

well... I delete the class navigation from this:

Code: [Select]

<div id="nav" class="navigation">
so.. I will use the allcss2 menu, without any throubles