Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

stuck in tutorial 1


Go to End
Reply


15 Posts   3271 Views

Avatar
servalman

Community Member, 211 Posts

8 January 2009 at 6:09am

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" xml: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>

Avatar
Carbon Crayon

Community Member, 598 Posts

8 January 2009 at 7:25am

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

Avatar
Sigurd

Forum Moderator, 628 Posts

8 January 2009 at 9:02am

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.

Avatar
servalman

Community Member, 211 Posts

8 January 2009 at 9:04pm

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" xml: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>

Avatar
Sigurd

Forum Moderator, 628 Posts

8 January 2009 at 9:17pm

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>

Avatar
servalman

Community Member, 211 Posts

8 January 2009 at 9:31pm

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

Avatar
Carbon Crayon

Community Member, 598 Posts

8 January 2009 at 10:28pm

Edited: 08/01/2009 10:33pm

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 :)

Avatar
servalman

Community Member, 211 Posts

8 January 2009 at 10:47pm

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

Go to Top