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

Artisteer? anyone?

<< < (3/4) > >>

kweitzel:
You can always create a "normal" HTML Template and then convert it to WB. The conversion is well documented (although a bit outdated) on the helpsite.

cheers

Klaus

brent:

--- Quote from: kweitzel on October 17, 2009, 10:59:22 AM ---You can always create a "normal" HTML Template and then convert it to WB. The conversion is well documented (although a bit outdated) on the helpsite.

--- End quote ---

Thaanks,
That's the route I'd like to take. It's just the menus/submenus that are giving me a headache.

mr-fan:
hi brent,

there is no such big magic with SM2 - if you've normal menü's -

some links that may can help to learn SM2:

https://forum.WebsiteBaker.org/index.php/topic,14735.msg93269.html#msg93269
(it's a german threat but a very good starting point _the second example_ that adds classes to the menü that you can take and change with CSS)

http://code.jellycan.com/sm2test/
interesting site with some basic settings to see some examples...

http://code.jellycan.com/files/show_menu2-README.txt
sadly the only existing full description of all the parameters and usage... :roll:

regards martin


btw: for speed up the workflow you can use CSS frameworks, too..... :wink:
but the grafic skills you will need everytime...

Hans:
Maybe this helps too.

Create the most simple version of SM2, so, without classes.
Then wrap it in a  code like this:

--- Code: ---<div class="navigation">SM2 code</div>
--- End code ---

Then in your CSS use this for a vertical menu

--- Code: ---#navigation {
 width: 200px;
}
#navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navigation li {
 border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited  {
 font-size: 90%;
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 border-left: 12px solid #711515;
 border-right: 1px solid #711515;
 background-color: #B51032;
 color: #FFFFFF;
 text-decoration: none;
}


--- End code ---

or this for a horizontal menu:


--- Code: ---#navigation {  
 font-size: 90%;  
}  
#navigation ul {  
 list-style: none;  
 margin: 0;  
 padding: 0;  
 padding-top: 1em;  
}  
#navigation li {  
 display: inline;  
}  
#navigation a:link, #navigation a:visited {  
 padding: 0.4em 1em 0.4em 1em;  
 color: #FFFFFF;  
 background-color: #B51032;  
 text-decoration: none;  
 border: 1px solid #711515;  
}  
#navigation a:hover {  
 color: #FFFFFF;  
 background-color: #711515;  
}

--- End code ---

(Much more with more sophisticated options on http://articles.sitepoint.com/article/navigation-using-css/1 (also the source of the examples given).

Now use the Firebug add-on in Firefox https://addons.mozilla.org/nl/firefox/addon/1843
By hovering over the layout you can find the element you want to change the style for.
SM2 gives the styles that are connected with them so you only have to add them to your style-sheet (see attached image):

An example:


--- Code: ---#navigation .menu-current a {
font-weight: bold;
color: #FFc937;
}

#navigation .menu-parent a  {
color: #FFc937;
}

--- End code ---

EDIT: added an example.
Hans

[gelöscht durch Administrator]

jkel:
I created a script which converts the page.html from Artisteer to the template index.php of WB.

English: http://www.jkel.org/pages/en/php-scripts/art2wb.php
German: http://www.jkel.org/pages/de/php-scripts/art2wb.php

I made the design of the jkel.org page with Artisteer and used art2wb for creating the template out of it.
As you can see, even the menu on the top works (via showmenu2, but I needed some time to figure this out).

Navigation

[0] Message Index

[#] Next page

[*] Previous page