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.

Template Questions /

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

CSS, can't get it working


Go to End


2 Posts   1903 Views

Avatar
Fakey

Community Member, 3 Posts

10 March 2010 at 9:12am

Hello silverstripe people,

I'm new here so i'll introduce myself real quick before i start asking some questions ;)

My name is Bryan i am 18 years old and i live in the netherlands. I'm currently studying IT and i enjoy webdesign/development alot.
My hobby's are music and anything that has to do with computers.

So lets get to the question part.

I've got a client who i am designing a website for, but as i am short on time (got a big project coming up) i needed to download a open source CMS.

After messing around with CMS Made Simple (wich refused to work on the public webserver), i found SilverStripe.
So this is my first SS project and i'm already stuck.

I was following the tutorial on the site to get the website to work.
Got it working etc. except for 1 thing:
The background is light blue whilest in my CSS i defined it to be light orange, same with the on-mouse-over state that is build in with SS.

Here is my page.ss:

--- HTML ---
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Brenda's Little Aussies.nl</title>
<% base_tag %>
<link rel="stylesheet" type="text/css" href="/themes/tutorial/css/css_Content.css"/>
<link rel="stylesheet" type="text/css" href="/themes/tutorial/css/css_Layout.css"/>
<link rel="stylesheet" type="text/css" href="/themes/tutorial/css/css_Navigation.css"/>
<link rel="stylesheet" type="text/css" href="/themes/tutorial/css/css_Tags.css"/>
</head>
<body bgcolor="#d9b078">
<center>
<div id="layout_Container">
<div id="layout_Banner"></div>
<div id="layout_Navigation">
<ul id="nav_Buttons">
<li id="nav_Sep"></li>
<% control Menu(1) %>
<li id="nav_Button" class="$LinkingMode"><a href="$Link" id="nav_Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li> <li id="nav_Sep"></li>
<% end_control %>
</ul>
</div>
<div id="layout_Content">
<span id="content_Title">$Title</span><p></p>
<span id="content_Body">$Content $Form</span>
</div>
<div id="layout_Footer">
<span id="footer_Disclaimer">All images on this website belong to their respective owners</span><br/>
<span id="footer_Copyright">Design by BD-Designs &copy;</span>
</div>
</div>
</center>
$SilverStripeNavigator
</body>
</html>
--- END HTML ---

And this is the body part of my css (wich is in css_Tags.css)

--- CSS ---
body {
background-color: #d9b078;
}

--- END CSS --

And the on mouse over state in css_Navigation.css

--- CSS ---
li.current {
color: #ffdec5;
}
--- END CSS ---

When i run the script and add ?flush=1 at the end (or not) the background is light blue.

I used the tutorial template folder and just cleared that out as i had no clue how to change the template once i have selected one.

I hope someone can help me.

Thank you in advance.

Sincerely,

Bryan a.k.a. Fakey

Avatar
Willr

Forum Moderator, 5523 Posts

10 March 2010 at 4:49pm

Handy tip for working with CSS is to install Firebug. Its a plugin for firefox. You'll be able to check easily then if your css file is even being included, or if its been overridden by styles from another one.

Install that, then check your css is loading, then check what rules are overriding it.