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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

How to add a style sheet to a very basic module [Partly solved]


Go to End


17 Posts   2425 Views

Avatar
simples

Community Member, 77 Posts

3 August 2012 at 8:38am

Does anyone know a standard way of including a style sheet in a module?

I can create a module which prints a hello world message to the screen but I cannot style it.

If I add a link to the style sheet between head tags at helloworld\templates\Helloworld.ss, head tags appear twice in source code sent to the browser. This does not seem right to me.

I can add a requirements statement to the controller class at \mysite\code\Page.php and this works. However I would like to keep all code associated with the module inside the module's folder. So again this solution does not seem right.

Finally when I add a requirements statement to the controller class at \helloworld\code\Helloworld.php, this fails. It would appear that the contents of Helloworld.php is not being loaded and run. Indeed when I place an exit statement at the top of Helloworld.php under the opening php brace, the page being browsed is not exited. Indeed content gets sent to the screen after the include statement which loads the module.

I have tried doing all sorts of things over the past few days and I have yet to hit on the source of the problem. This is so frustrating because this is not rocket science and should be really easy.

Can anyone offer any pointers or advice?

Avatar
BenWu

Community Member, 97 Posts

3 August 2012 at 8:58am

In the controller class within your module, you can use Requimrents:css to include a stylesheet.

If you check the UserForm module, you can find:

./code/editor/EditableDateField.php:            Requirements::css(THIRDPARTY_DIR .'/jquery-ui-themes/smoothness/jquery-ui-1.8rc3.custom.css');

Avatar
simples

Community Member, 77 Posts

3 August 2012 at 10:02am

Hi Ben,

Thank you for your reply.

The problem seems to be with accessing the file which contains the module's controller class rather then what it contains.

Indeed when I put an exit statement at the top of the file, all content gets sent to the screen including content after the module is included. If the file was being accessed surely the exit statement would cause an abort.

Indeed when I do the same with the file which contains the site's controller class, no content gets sent to the screen. This suggests to me that putting an exit statement at the top of the file is valid for checking if the file is being accessed.

Having said this, I have extremely little experience with writing object code so have a poor understanding of how such code works. Perhaps my diagnosis is wrong.

However if it is right, why is the file not being recognized.

This has to be due to something really basic which I am overlooking.

Avatar
simples

Community Member, 77 Posts

3 August 2012 at 11:16am

If anyone would care to look at my site to try to see where I am going wrong, I have attached it with this post in a zip file. I am using Silverstripe Version 2.4.7. When installing the site I chose the empty theme rather than BlackCandy. All files are included in the zip except for files in the sapphire and cms folders. I have added a module folder called helloworld and in themes\tutorial\templates\Page.ss I have added an include statement to this module.

That is all I have done - really basic stuff.

Attached Files
Avatar
simples

Community Member, 77 Posts

3 August 2012 at 9:13pm

Ok, after 24 hours of struggle I think I may have sussed out a standard way of linking to a style sheet when creating a module. I did it by adding the following line

<% require css(helloworld/css/Helloworld.css) %>

above

Hello world!

in the following template

helloworld\templates\Helloworld.ss

Perhaps I am going senile!

Avatar
simples

Community Member, 77 Posts

3 August 2012 at 10:38pm

For the record this is how I came across the require control structure which I used in the template of my module to add a link to a style sheet. As you will gather from what follows I have very little understanding of how object code works.

What I was trying to achieve was to add a style sheet to my module and I thought that I would be able to achieve this by adding a requirements statement to my module's controller class. In fact I became fixated with trying to do it using this approach. As you will see I never got this to work and had to use the require control structure instead.

Since I could not add a css link through creating my own module from scratch because I could not apparently get the file which contained my template's controller class to be recognised, I decided to download from the internet a pre-built module, insert an exit statement at the top of the file containing the module's controller class and see if the browsed page got aborted early. I thought this was a way in which I could detect if the file was recognised and its contents loaded. I now have serious doubts about this test. Anyway, after downloading various templates to achieve this I eventually found a simple template in which inserting the exit statement caused the early abort. I then progressively removed files and file content in this downloaded module unitil I got to the minimum code required to cause the early abort and hence recognition of the class file. Essentially what was needed was the following line in the template's config file

Object::add_extension('Page_Controller', 'Helloworld');

and the following line in the file containing my module's controller class

class Helloworld extends Extension {}

At this point I realised that putting an exit statement at the top of the file and checking for an early abort did not appear to test if the file's content was being loaded. I discovered this as follows. After inserting the Object::add_extension statement in the template's config file I got the following error when the page was browsed.

Fatal error: Object::add_extension() - Can't find extension class for "Helloworld" in ...

I then found that I could avoid this error by re-instating a removed class extension statement in the file containing my module's controller class. On doing this, the page aborted early even though the file in which I had placed this statement contained an exit statement at the top. Hence even though the exit statement was placed above the class extension statement, the class extension statement was still being loaded since its presence prevented the fatal error.

OK, so at this point I discovered that placing an exit statement at the top of a file for checking if file content was being loaded was unreliable and in fact useless in this context. It also suggested that the requirements statement which I had placed in the module's controller class may be being reached after all. I then googled silverstripe and requirements to see if I could find more about it and how to use it. I was in fact thinking that I had specified the path wrongly. Perhaps I needed to specify a full path. This googling then directed me to the requirements section under the heading "Reference" in the Silverstripe documentation. On reading this, I found that I could include a css in a template by using the require control structure.

On further investigation of the Silverstripe documentation I found that explanation of the require control structure was really obvious. In fact it is referred to in the Silverstripe documentation under "Topics" and "css".

At this point I still do not know a way of checking if the contents of the file which contains a controller class is being loaded and I am still unable to get the requirements statement to work.

If anyone can offer me pointers or advice on these 2 issues, I would be most grateful.

Avatar
martimiz

Forum Moderator, 1391 Posts

4 August 2012 at 1:18am

Hi ssimples,

Looks like you're really learning SilverStripe the hard way! Did you ever follow the tutorials at http://doc.silverstripe.org/framework/en/tutorials/ (depending on the SilverStripe version you're using follow either 3.0 or 2.4).

Then you might know that mysite is a module just as any other, so you could always start your experiments there! I'm not sure, but I think you might have mixed up a couple of things, like for instance Page Controllers and extensions (as your Helloword_Controller is a Page_Controller, Not an extension, but it seems to miss its Page class).

I could try explaining it all here, but that's just what the tutorials will do for you. It will let you create Pages, DataObjects and Forms, all from the ground up! After that you will understand a lot of the way SilverStripe works and creating your own modules will not be much harder then.

Good luck!

Avatar
simples

Community Member, 77 Posts

4 August 2012 at 2:07am

Hi martimiz,

Thank you for the pointers.

I have worked my way through Tutorials 1 and 2 but I have yet to really look at the others.

It would be good to suss out why the call to the Requirements class which I have placed in the file which contains my module's controller class does not work. This has never worked - even before I started to insert the statements from the third party module which I referred to in my previous post. (These statements are now commented out) I understand from the css Silverstripe topic that management through the Requirements class has the advantage that modules can include their own CSS files without modifying the template. It seems cleaner to me to reference required files in a php file where plumbing goes rather than in a template where presentation goes.

However when I add the following line inside the controller class of helloworld/code/Helloworld.php

Requirements::css("helloworld/css/Helloworld.css");

a link to helloworld/css/Helloworld.css does not appear in the head section of the HTML sent to my browser.

I have been struggling to pinpoint the reason for why this is for the last couple of days and is still a mystery to me.

Go to Top