Jump to:

23334 Posts in 17381 Topics by 2859 members

General Questions

SilverStripe Forums » General Questions » SilverStripe CMS v3.0.3 .. navigation

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 644 Views
  • Lemonie
    Avatar
    Community Member
    70 Posts

    SilverStripe CMS v3.0.3 .. navigation Link to this post

    To try and learn more about Silverstripe I have been building my own theme from scratch. My main site is v2.4.7 and am using v3 on my development site.

    My navigation from the old site is not working on the new one so can anybody point me in the right direction ? I need the code for navigation.ss and layout.css for a simple dropdown menu like my old site.

    www.homelesshounds.org.uk

  • IOTI
    Avatar
    Community Member
    189 Posts

    Re: SilverStripe CMS v3.0.3 .. navigation Link to this post

    the code should remain mostly the same from your 2.4.7 site. Could you post the code from your 2.4.7 site and maybe then I could make some recommendations?

    Either way you should be using something like

    <ul>
    <% loop $Menu(1) %>
    <li><a href="$Link"></a><% if Childlren %>
    <ul>
    <% loop $Children %>
    <li><a href="$Link"></a></li>
    <% end_loop %>
    <% end_if %>
    </ul>
    </li>
    <% end_loop %>
    </ul>

  • Lemonie
    Avatar
    Community Member
    70 Posts

    Re: SilverStripe CMS v3.0.3 .. navigation Link to this post

    Hiya

    This is my old code which when added just gives me a Server error .. Sorry, there was a problem handling your request.

    <ul id="menu">
    <% control Menu(1) %>
    <% if Children %>
    <li class="$LinkingMode"><a class="sub" href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a>
    <ul>
    <% control Children %>
    <li>
    <a <% if Children %>class="fly"<% else %><% end_if %> href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a>
    <% if Children %>
    <ul class="fly">
    <% control Children %>
    <li>
    <a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a>
    </li>
    <% end_control %>
    </ul>
    <% end_if %>
    </li>
    <% end_control %>
    </ul>
    </li>
    <% else %>
    <li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a><div>
    <ul></ul>
    </div></li>
    <% end_if %>
    <% end_control %>
    </ul>

    /* ================================================================
    This copyright notice must be untouched at all times.

    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssmenus.co.uk
    Copyright (c) 2009- Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */

    ul#menu {
       width: 950px;
       margin: 0 auto;
       padding-top: 0px;
       overflow: visible;
    background: #fff url(http://i136.photobucket.com/albums/q193/rustybum1/Homeless%20Hounds/Website/PurpleNav.png) repeat center bottom;
    }

    ul#menu ul {
    padding:0;
    margin:0;
    list-style:none;
    position:absolute;
    left:-9999px;
    }

    ul#menu table {
    border-collapse:collapse;
    font-size: 2.9em;
    float:left;
    margin:-1px;
    }

    ul#menu ul li {
    list-style: none;
             margin: 0 2px;
             float: left;
             line-height: 2.8em;
             display: block;
    }

    ul#menu ul li a {
    display:block;
    line-height:20px;
    margin:0;
    padding:0 10px;
    background:transparent;
    width:150px;
    }

    ul#menu li {
    display:inline;
    margin:0 -2px;
    text-align:left;
    }

    ul#menu li a {
    display:inline-block;
    height:35px;
    margin:5px 0 0 0;
    padding:0 0px 0 0;
    background: url() right top;
    line-height:30px;
    font-size: 1.3em;
    font-family: Arial;
    text-decoration:none !important;
    color:#fff;
    }

    ul#menu li a.sub {
    background: url() right top;
    }

    html>/**/body ul#menu li {
    display:inline-block;
    padding:0;
    }

    * html ul#menu li a.sub {
    margin-right:3px;
    }

    * html ul#menu li a {
    margin-bottom:-4px;
    }

    ul#menu li a b {
    display:block;
    height:36px;
    float:left;
    padding:0 0 0 20px;
    background: url() left top;
    cursor:pointer;
    }

    ul#menu li a:hover {
    position:relative;
    background-position:right bottom;
    color:#fff;
    }

    ul#menu li a:hover b {
    background-position:left bottom;
    }

    ul#menu li:hover {
    position:relative;
    }

    ul#menu li:hover > a {
    background-position:right bottom;
    color:#fff;
    }

    ul#menu li:hover > a b {
    background-position:left bottom;
    }

    ul#menu :hover ul {
    left:1px;
    width:105px;
    top:41px;
    }

    * html ul#menu :hover ul {
    top:36px;
    }

    ul#menu :hover ul li {
    display:block;
    float:left;
    margin:0;
    border-bottom:1px solid #fff;
    }

    ul#menu :hover ul li a {
    display:block;
    float:left;
    margin:0;
    height:25px;
    line-height:25px;
    width:140px;
    background:#0F0209;
    color:#fff;
    }

    ul#menu :hover ul li a.fly {
    background:#0F0209 url(../images/arrow-over.gif) no-repeat right center;
    }

    ul#menu :hover ul li a:hover {
    background:#26FF3B;
    color:#26FF3B;
    }

    ul#menu :hover ul li:hover > a {
    background:#9D5D80;
    color:#fff;
    }

    ul#menu :hover ul li a.fly:hover {
    background:#9D5D80 url() no-repeat right center;
    }

    ul#menu :hover ul li:hover > a.fly {
    background:#9D5D80 url() no-repeat right center;
    }

    ul#menu :hover ul ul {
    left:-9999px;
    }

    ul#menu :hover ul :hover ul {
    left:105px; top:0;
    width:150px;
    }

    ul#menu :hover ul :hover ul li {
    display:block;
    float:left;
    margin:0;
    border-bottom:1px solid #fff;
    }

    ul#menu :hover ul :hover ul li a {
    display:block;
    float:left;
    margin:0;
    height:25px;
    line-height:25px;
    background:#fff;
    color:#fff;
    }

    ul#menu :hover ul :hover ul li a:hover {
    color:#fff;
    background:#501033;
    }

  • IOTI
    Avatar
    Community Member
    189 Posts

    Re: SilverStripe CMS v3.0.3 .. navigation Link to this post

    Taking a quick look through your code everything seems fine. I would recommend changing your <% control %> blocks to use <% loop %> instead.

    Do you have dev mode enabled? If not, try enabling it from _config.php and let me know if you get a more descriptive error.

  • Lemonie
    Avatar
    Community Member
    70 Posts

    Re: SilverStripe CMS v3.0.3 .. navigation Link to this post

    Will change control to loop.

    This is what I got when I enabled dev mode ...

    http://sstripe.homelesshounds.org.uk/SStripe.htm

  • IOTI
    Avatar
    Community Member
    189 Posts

    Re: SilverStripe CMS v3.0.3 .. navigation Link to this post

    Looks like you might have a few issues, but regarding the menu i believe the culprit is

    "Uncaught SSTemplateParseException: Parse error in template on line 6. Error was: Unknown open block "control" encountered"

    I think that usually means one of your template tags (the <% %> blocks) is wrong (either miss-spelled or missing) but looking at the code it seems right. After you change the control to loop let me know if that helps at all.

    644 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.