Jump to:

3445 Posts in 1031 Topics by 872 members

Template Questions

SilverStripe Forums » Template Questions » stuck in tutorial 1

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

Page: 1 2
Go to End
Author Topic: 3132 Views
  • servalman
    Avatar
    Community Member
    211 Posts

    stuck in tutorial 1 Link to this post

    Hi evryone

    After today of "workforaliving" I got back to my SS tudies I'm now facing a problem with the Highlighting the current page step.

    I added the $LinkingMode, flushed and checked that the css was there and it is:
    (#Menu1 li.current,
    #Menu1 li.section {
    background:url(../images/menu1_right_on.gif) no-repeat right top;
    })

    but it is not working this is how my template looks like :

    Thanks for any ideas

    T

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
       <head>
          <% base_tag %>
          $MetaTags
          <link rel="stylesheet" type="text/css" href="tutorial/css/layout.css" />
          <link rel="stylesheet" type="text/css" href="tutorial/css/typography.css" />
          <link rel="stylesheet" type="text/css" href="tutorial/css/form.css" />
       </head>
       <body>
          <div id="Main">
          <ul id="Menu1">
    <% control Menu(1) %>
    <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
    <% end_control %>
    </ul>
             <div id="Header">
                <h1>$Title</h1>
             </div>
             <div id="ContentContainer">
                <div id="Content" class="typography">
                   $Content
                   $Form
                </div>
             </div>
             <div id="Footer">
                <span>Visit <a href="http://www.silverstripe.com" title="Visit www.silverstripe.com">www.silverstripe.com</a>; to download the CMS</span>
             </div>
          </div>
          $SilverStripeNavigator
       </body>
    </html>

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: stuck in tutorial 1 Link to this post

    hmm strange cant see anything wrong with the code. Are you sure its finding the image? Try changing just the background color so that you know it's working, something like:

    #Menu1 li.current,
    #Menu1 li.section {
    background-color:#FF0000;
    }

  • Sigurd
    Avatar
    Forum Moderator
    628 Posts

    Re: stuck in tutorial 1 Link to this post

    When you view the page, can you tell us what the following HTML changes from?

    <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>

    Then we can confirm it is a CSS or image-naming problem.

  • servalman
    Avatar
    Community Member
    211 Posts

    Re: stuck in tutorial 1 Link to this post

    Hi first I would like to thank you for those answers.

    This mornig I uploaded the file again then flushed and it worked, wich is strange. it is the second time it happens to me while I do the tutorial. I'll tell you if it happens again.

    Yet another weird thing
    I checked the source and something and something was strange the tags:

    <link rel="stylesheet" type="text/css" href="tutorial/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="tutorial/css/typography.css" />
    <link rel="stylesheet" type="text/css" href="tutorial/css/form.css" />

    are there 2 times. Is this normal I post the source below for you to see.

    Thanks again for the help.

    T
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
       <head>
          <base href="http://www.possibles.net/silvtest/" />
          <title>home</title>
    <meta name="generator" http-equiv="generator" content="SilverStripe 2.0 - http://www.silverstripe.com" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en"/>

          <link rel="stylesheet" type="text/css" href="tutorial/css/layout.css" />
          <link rel="stylesheet" type="text/css" href="tutorial/css/typography.css" />

          <link rel="stylesheet" type="text/css" href="tutorial/css/form.css" />
       <script type="text/javascript" src="jsparty/behaviour.js"></script>
    <script type="text/javascript">
    //<![CDATA[
                Behaviour.register({
                   '#switchView a' : {
                      onclick : function() {
                         var w = window.open(this.href,windowName(this.target));
                         w.focus();
                         return false;
                      }
                   }
                });

                function windowName(suffix) {
                   var base = document.getElementsByTagName('base')[0].href.replace('http://','').replace(/\//g,'_').replace(/\./g,'_');
                   return base + suffix;
                }
                window.name = windowName('site');

    //]]>
    </script>
    <link rel="stylesheet" type="text/css" href="tutorial/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="tutorial/css/typography.css" />
    <link rel="stylesheet" type="text/css" href="tutorial/css/form.css" />
    <link rel="stylesheet" type="text/css" href="sapphire/css/SilverStripeNavigator.css" />
    </head>
       <body>
          <div id="Main">

          <ul id="Menu1">

    <li class="current"><a href="/silvtest/home/" title="Go to the &quot;Home&quot; page">Home</a></li>

    <li class="link"><a href="/silvtest/about-us/" title="Go to the &quot;About Us&quot; page">About Us</a></li>

    <li class="link"><a href="/silvtest/contact-us/" title="Go to the &quot;Contact Us&quot; page">Contact Us</a></li>

    </ul>
             <div id="Header">
                <h1>Home</h1>

             </div>
             <div id="ContentContainer">
                <div id="Content" class="typography">
                   <p>Welcome to SilverStripe! This is the default homepage. You can edit this page by opening <a href="admin/" class="broken">the CMS</a>. You can now access the <a href="http://doc.silverstripe.com">developer documentation</a>, or begin <a href="http://doc.silverstripe.com/doku.php?id=tutorials">the tutorials.</a></p>
                   
                </div>
             </div>

             <div id="Footer">
                <span>Visit <a href="http://www.silverstripe.com" title="Visit www.silverstripe.com">www.silverstripe.com</a>; to download the CMS</span>
             </div>
          </div>
                      <div id="SilverStripeNavigator">
                   <div class="holder">
                   <div id="logInStatus">

                      Logged in as me - <a href="Security/logout">log out</a>
                   </div>

                   <div id="switchView" class="bottomTabs">
                      <div class="blank"> View page in: </div>
                      <a href="admin/show/1" target="cms">CMS</a>
                      <a class="current">Draft Site</a>

                      <div class="blank" style="width:1em;"> </div>
                      <a href="/silvtest/home/?stage=Live" target="site" style="left : -3px;">Published Site</a>
                      
                   </div>
                   </div>
                </div>
                   <div id="SilverStripeNavigatorMessage" title="Note: this message won't be shown to your visitors">DRAFT SITE</div>
       </body>

    </html>

  • Sigurd
    Avatar
    Forum Moderator
    628 Posts

    Re: stuck in tutorial 1 Link to this post

    Great - so this doesn't look to be a problem with SilverStripe. The CSS classes are being set; you need to debug your CSS

    <li class="current"><a href="/silvtest/home/" title="Go to the &quot;Home&quot; page">Home</a></li>
    <li class="link"><a href="/silvtest/about-us/" title="Go to the &quot;About Us&quot; page">About Us</a></li>
    <li class="link"><a href="/silvtest/contact-us/" title="Go to the &quot;Contact Us&quot; page">Contact Us</a></li>

  • servalman
    Avatar
    Community Member
    211 Posts

    Re: stuck in tutorial 1 Link to this post

    Hi

    I don't get it I did not touch the css at all (I'm folowing the tuto step by step).

    My second question was why do I have 2 times :

    <link rel="stylesheet" type="text/css" href="tutorial/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="tutorial/css/typography.css" />
    <link rel="stylesheet" type="text/css" href="tutorial/css/form.css" />
    <link rel="stylesheet" type="text/css" href="sapphire/css/SilverStripeNavigator.css" />

    in my page (see source in previous message) do'es this as something to do with css ?.

    Thanks

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: stuck in tutorial 1 Link to this post

    this will most likely be because you are defining the links both in your template and in your controller. Check Page.php and see if it has the following function under the Page_Controller class:

    function init() {
    parent::init();

    Requirements::themedCSS("layout");
    Requirements::themedCSS("typography");
    Requirements::themedCSS("form");
    }

    The innit function runs when the page is initialised and is used to add links to external items such as CSS and Java. This keeps your templates clean and allows SS to check if the item exists before adding the link.

    All you need to do is remove the hard coded links from you template and it should be good

  • servalman
    Avatar
    Community Member
    211 Posts

    Re: stuck in tutorial 1 Link to this post

    Hi thanks

    I'll try .

    So if I want to add a new CSS put it in the CSS folder (newformats.css) :

    -create CSS (newformats.css)
    - put it in the CSS folder

    and add another line in the (Page.php)

    function init() {
    parent::init();

    Requirements::themedCSS("layout");
    Requirements::themedCSS("typography");
    Requirements::themedCSS("form");

    Requirements::themedCSS("newformats");
    }

    is this correct.

    By the way another question about folders :

    Right now I'm using the tutorial folder fro evrything but once I'll be done with how do I do the same thing in the "my site" folder

    Thank you for your time

    T

    3132 Views
Page: 1 2
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.