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

Applying CSS to Silverstripe - No Way!


Reply


6 Posts   1441 Views

Avatar
TerryMiddleton

Community Member, 108 Posts

7 May 2009 at 9:54pm

Is there a way to apply a projects css theme/style to SS so that when we are looking at the page data it renders the same as what the users will see on the website.

For example, on this project we render bullets very specifically with a certain bullet. In the CMS, it doesn't show the bullet until you look at the page in a browser.

Or, if I set a piece of text to an H4, for example, it doesn't apply the CSS that I've set for the project.

I'm sure it's simple, but just wanted to see if it's possible.

Thanks,

Terry

Avatar
banal

Community Member, 901 Posts

7 May 2009 at 11:49pm

The styles in typography.css are loaded in the WYSIWYG editor.
Actually, it's editor.css, but as you can see there, typography.css is being included with an @import statement

Avatar
TerryMiddleton

Community Member, 108 Posts

10 May 2009 at 11:17am

banal,

Thanks for the reply. Actually where do you see that it's editor.css and the @import?

Is this in the cms/css directory or are you look at a php file?

Terry

Avatar
banal

Community Member, 901 Posts

10 May 2009 at 6:52pm

Edited: 10/05/2009 6:54pm

Hi Terry

As far as I know, the editor.css file is included by the CMS (CMSMain.php), and it's used to load styles for the WISYWYG Editor. Usually, editor.css can be found in mysite/css or the themes/yourtheme/css directory.
The @import statement is a CSS directive to load other css files. This statement is part of the CSS standard. Here's an article that describes it: http://www.cssnewbie.com/css-import-rule/

So to summarize:
1) CMS includes editor.css,
2) editor.css uses @import statement to import the typography.css styles

At least that's the common behavior. Of course you can edit the editor.css and import other stylesheets too.

Avatar
Kalileo

Community Member, 127 Posts

11 May 2009 at 1:27am

Terry, you might want to have a look at Firefox and the Firefox plugin Firebug. It will show you which CSS rules are applied and where they come from, with the file names of the CSS files.

Avatar
TerryMiddleton

Community Member, 108 Posts

11 May 2009 at 1:42am

banal,

Thank you 100 times. It was way to simple. I figured it was. I was able to simply add an @import for the css that I was using for the live site and it took.

Thank again.

Also Kalileo, yes, willr turned me on to this plugin. What a great plugin and a must have. It really help troubleshoot problems.

Thank you for your response.

I'm about to launch this new site, my first one. The client is exceedingly happy. Exceedingly!

I couldn't have done it without the help of this forum.

Terry