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.

General Questions /

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

First time making own template, what is the go with file name locations, I don't be seem to be able to reference them correctly?


Reply


3 Posts   679 Views

Avatar
TF-35Lightning

Community Member, 137 Posts

22 March 2010 at 7:22pm

Hi all,
I am trying ot setup my very first SS Template. Now what i have done is grabbed a copy of the tutorial template and have copied that entire directory and renamed it to "billy".
I have then edited the _config.php with

SSViewer::set_theme('billy');

Okay that works, now when I've gone in and started to try and put my own images into the Page.ss file I've run into trouble.
I've added a few peices of code from the online tutorial about templates to my Page.ss

<% base_tag %>
etc and some of the others

Now heres where I am having trouble.
I edited one of the layout.css files to see if I can get an image to show up from my own directory and it did: (background image)

body {
   width: 100%;
   height: 100%;
   font-size: 62.5%;
   /* reset font-sizes to 1em == 10px */
   
   background-image: url(../images/ui/billy_bg.jpg);
   background-repeat: no-repeat;
   background-position: center top;
   background-color: #1d3c18;
   margin:0;
   padding: 0;
}

But when I go to edit that Page.ss and try and put an image into that file I don't seem to be able to get a correct file location.

Eg:
<img src="billy/images/UI/billy_logo_1.jpg" width="246" height="190" />
The image does not show up.

And upon investigation of my code rendering in the browser I have.
<img src="billy/images/UI/billy_logo_1.jpg" width="246" height="190" />

So I presume I have to do something to get these images to work (I have tried "/", "../" etc etc etc)

The other really strange thing is too that I notice inside my render page code is that I have 2 sets of external stylesheets which I don't know why.
In my code I have:

<head>
<% base_tag %>
      
<link rel="stylesheet" type="text/css" href="billy/css/layout.css" />
<link rel="stylesheet" type="text/css" href="billy/css/typography.css" />
<link rel="stylesheet" type="text/css" href="billy/css/form.css" />

</head>
<body>

In the rendered html browser view code source it shows:

<head>
<base href="http://localhost/www_billy_ss/"></base>
      
<link rel="stylesheet" type="text/css" href="billy/css/layout.css" />
<link rel="stylesheet" type="text/css" href="billy/css/typography.css" />
<link rel="stylesheet" type="text/css" href="billy/css/form.css" />

<link rel="stylesheet" type="text/css" href="http://localhost/www_billy_ss/themes/billy/css/layout.css?m=1269234911" />
<link rel="stylesheet" type="text/css" href="http://localhost/www_billy_ss/themes/billy/css/typography.css?m=1170309896" />
<link rel="stylesheet" type="text/css" href="http://localhost/www_billy_ss/themes/billy/css/form.css?m=1170309896" />
<link rel="stylesheet" type="text/css" href="http://localhost/www_billy_ss/sapphire/css/SilverStripeNavigator.css?m=1233532194" />

</head>
<body>

Now I'm presuming my css image background command works because of these other css linked stylesheets some how are inserted into the page.

I'm a bit stuck, any help would be much apprecaited.

Avatar
TF-35Lightning

Community Member, 137 Posts

22 March 2010 at 7:26pm

PS.

And yes I am doing a lot of ?flush=1
And browser cache clearing when I am testing also.

Avatar
Willr

Forum Moderator, 5513 Posts

22 March 2010 at 7:46pm

Couple notes - links inside CSS files are relative to the CSS file. So ../images/ works as this says go up a directory then into the images directory.

However for file paths in the templates it uses the Base URL (due to the base tag) so to include an image from the billy theme you would need to do

<img src="{$ThemeDir}/images/myImage.jpg" alt="Image" />

Also you may be getting 2 sets of CSS files if you have your own link tags to the css files in the Page.ss file. If you are including CSS files use the <% require themedCSS() %> property to make sure files aren't included twice rather then the standard <link> tags.