I like Splash but I need it to be 100% wide on the screen.
How can I do that?
Hi Michael,
Follow the instruction in splash/style/sl.css
/* Content
-----------------------*/
#page { /* Defining fluid or fixed theme.. for fluid theme change width to 100%*/
width: 960px;
margin: auto;
}
Here's a list of usefull Moodle Docs
Mary
Hi Mary,
thanks for your help, now everything is okey .
Michael
Hi,
I also tried to change the splash theme to 100% width.
When I dock the sideblockes, they are hidden behind the vertical dock bar.
When I choose red-color, it works. The left blocks slides to right so that the vertical dock bar can be inserted. For the other colors, it doesn't work.
How can I solve this problem?
Toshimi
DockHideBlocks.jpg
Hi,
You will need to add the following to the CSS ...
body.has_dock { width: 97%; margin-left:3%}
That should fix it....hopefully!
Mary
Thank you for a great hint! The problem was solved.
I added the following to the CSS.
body.has_dock { width: 98%; margin-left:30px;}
It looks better.
Toshimi
Where in the CSS was that added - a bit clueless but would like to give that a shot tomorrow.
Thanks
Kay
You would add this to the main CSS file for Splash ... namely
moodle/theme/splash/style/sl.css
HTH
Mary
That does help a lot thank you Mary.
Kay
Hello,
Thanks for your tip!. I have tried this, but I have a problem. I don't know if is possible to solve it: The bar menu is placed to the left.You can see the image below.
I attach a screenshot of my site demo
Were you able to get your menuing system in the right place? I don't seem to be able to get the fluid solution to work well. My menu starts creeping over into the left hand side of the design.
Untitled-1.gif
I figured out how to move the menu system by adding margin space in the sl.css file:
#custommenu { /* setting font colour and removing borders */
padding-left: 6px;
height: 33px;
font-size: 1.2em;
margin-top: 0px !important;
padding-top: 0px !important;
margin: 0 0 0 30px !important;
}
.navbar { /* moodles breadcrumb holder*/
border-width: 0 0 1px 0;
margin: 0;
padding: 5px 15px;
font-size: 0.9em;
color: #333;
margin: 0 0 0 30px !important;
}
Now if I could just remember how I got our name into this box the last time around...
Hi,
Sorry I did not answer this sooner, I got caught up trying to fix another problem which took best part of 4 hours! By which time I was too tired to look into this problem, although I did spend a little time on this too. There are allsorts of settings in this theme which have been addressed in the latest version, which will be in Moodle 2.3. It's basically a re-write of the theme's css, and address some of the layout issues with this theme.
OK, on to the problem you are trying to solve. The best thing about Splash theme is that it does have a Custom Settings page which you can find if you navigate to Site Administration > Appearance > Themes => and then choose the Splash 'link' from the list of theme names you will see at this point. This is NOT the theme selector page, that is one of the links, Splash is towards the bottom of that list as you will find it's in alphabetical order.
In this Customs Settings page you will be able to add the 'tagline' for your site, add a small logo, and also ADD custom CSS. This is the place you make the CSS changes NOT in the css file itself, contrary to what I said in an earlier comment.
I would have suggested adding margin-left: 30px; so that's a good move. There should be no reason to add !important. If it does not work without that then there is likely something wrong somewhere else with the CSS, usually a cascading issue.
But like I said this theme has been changed quite a bit in Moodle 2.3
Cheers
Mary
Hi Mary,
Thank you so much for the response. I LOVE this theme. It is so visually pleasing. Now all I have to do is figure out how to use it 
What I would like to do now is just widen the pageheader. so that I have more room in the center of the screen. Nothing I've tried has worked. I have tried to upload an image several times now and have to keep retyping this to you so I can't show you.
With Firefox Inspect Element, it looks like it is #page-header-wrapper. The only code I find for this is in the sl file. What am I missing?
.pagelayout-report #page #page-header {
width: 1500px;
margin:0 auto;
}
Hi,
To make this a fluid theme that sets itself to the size of your screen, all you need do is change width in the sl.css wherever you see 960px change the value to 100%
The page-header wrapper whatever, should resize to the screen size if you do what I suggested above and in the other post here too.
Mary