Themes

Theme resizing

 
Picture of robert maran
Theme resizing
 

Hi,

I have created a theme for the front page and I would like it to stretch across the whole width of the screen so that it encompasses the "you are logged in as.."  (At the moment the theme only covers about 3/4 of the width of the screen.I know I have not explained this so well ,but I don't know the technical jargon to use..

Hope someone can help me with some simple instructions on how to acheive this.

Cheers

Robert

 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
Hi Robert,

Have you modified an existing theme? If yes, which one? Or can you at least post a screenshot?

There are many factors which influence the total width of a theme so some more information is needed.

Please see also Themes FAQ and CSS FAQ for further information.

hth
Frank
 
Average of ratings: -
Picture of robert maran
Re: Theme resizing
 
Hi Frank
Thanks for replying. No, the theme is something I made up and uploaded as logo to site files. A screen shot of what I meant to try and convey is attached. It probably explains it better than what I tried to express in words.

Hope it makes sense

Cheers
robert

 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
Thanks for the screenshot. Do you perhaps also have a link to a live site (I've only come as far as http://www.osaka-shoin.ac.jp/univ/student/departments/info/eih/class_sekiya.html )?

If your are using such a wide graphic in the header section I suppose it pushes the rest of the content to the right.

You should try using Firebug to find out what's going on.

hth
Frank
 
Average of ratings: -
Picture of robert maran
Re: Theme resizing
 
Hi Frank
Unfortunately it will not be possible to link to a live site. Now that I have read your replies, I should amend the terminology I have been using ( or lack of!).
The theme standard theme, and as you have pointed out I am using an original graphic in the header section. Is there a way to modifiy the code so that it can cover the "login as" part of the page as well? I notice that other themes seem to all do this. Any help appreciated....

Cheers
Robert
 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
Hi Robert,

Thanks for clarification. Now we're getting closer wink If I understand you correctly you are using the Standard theme but only exchanged the logo with your own. And instead of the logo pushing the login field to the right you want to sit it on top of your logo?

I'll look into it again. In the meantime you could also have a look at the many free themes available for Moodle (http://moodle.org/mod/data/view.php?id=6552 ). Perhaps there's one that fits your requirements more closely than Standard theme.

Cheers,
Frank
 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
The trick is to take the login field out of the normal flow of elements on the page and position it "absolute":

.headermenu {
background-color:fuchsia;
position:absolute;
right:20px;
text-align:right;
top:10px;
}

See the screenshot for how this is achieved using Firebug (the background color is only for demonstration purpose).

Please note that this is only a proof of concept. You might have to experiment a little with the settings. You will find some good tutorials via the above mentioned FAQ pages.

hth
Frank





 
Average of ratings: Useful (1)
Picture of robert maran
Re: Theme resizing
 
Hi Frank
OK, yes your screen shot shows exactly what I would like to achieve. Can this be set also in the moodle theme folder so that in every user's browser, the same effect would be achieved? If it can, could you directly me to the folder/ file I should tweak?

Thanks for your help on this again. Much appreciated!

Robert
 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
The cleanest way to modify the CSS of an existing theme is to leave it's files untouched but add your modifications in a separate file.

1) So put the following CSS in a file called "osaka.css":

div.headermenu {
background-color:transparent;
}

div.logininfo {
position:absolute;
right:2px;
top:10px;
}

form#chooselang {
position:absolute;
right:2px;
top:55px;
}

2) I suppose you are using the "Standard Logo" theme, so put that file in the theme folder.

3) Open the config.php in that folder and add the name of your CSS file (without the .css extension):

$THEME->sheets = array('gradients', 'osaka');

Voilá!

I separated login info and language chooser so you can position them separately so that they fit nicely around the green line of your logo.

For finetuning the positions use Firebug.

For an even cleaner separation of your own code and the standard themes you should create your own theme by using one of the existing ones as parent theme (e.g. "Standard Logo").
See How do I create a custom theme? for further information.

Cheers,
Frank




 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
The above code will position the login and choose language fields in the top right corner of your browser window.

If you want to position the fields relative to your logo, use the following variation of the CSS:

div#header-home{
position:relative;
width: 960px;
}

div.headermenu {
background-color:transparent;
}

div.logininfo {
position:absolute;
right:4px;
top:0px;
}

form#chooselang {
position:absolute;
right:2px;
top:48px;
}

Cheers,
Frank
 
Average of ratings: -
Picture of Lloyd Stock
Re: Theme resizing
 
Hi Frank et al,

Following the thread on this page thus far (since we've been facing a similar problem), please can you advise as follows
- http://79.170.40.170/lloydstock.com/ep/
- I seem have to have the "You are not logged in. (Login)" text duplicated.

I'd be grateful to understand how I can remove this duplication?
Let me know if you need me to provide more info.

Thanks!

ls
 
Average of ratings: -
Picture of Lloyd Stock
Re: Theme resizing
 
is anyone able to point me in the right direction here?
 
Average of ratings: -
Head
Re: Theme resizing
Particularly helpful MoodlersPlugin developersTesters
I can not see any duplication. Did you fix it?
 
Average of ratings: -
Picture of Lloyd Stock
Re: Theme resizing
 
huh? I didn't do anything...?

Well that's good. Thanks for pointing out!

One other thing
- can I get everything central on the page? At the moment the header graphic sits tight on the left whereas the rest of the page content stretches to fill the page. If I have everything constrained to match the dimensions of the header graphic and centred it would look a lot nicer.
It'd be good to know css better but sometimes I feel like it's black magic.

Thanks for your help.
 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
I can (see screenshot), FF3, Win 2000.

The second one is the one from the footer. In the CSS you position both as "absolute":

div.logininfo {
color:white;
position:absolute;
}

Try positioning the one in the footer separately:

div# footer div.logininfo {
position: relative;
}

Cheers
Frank


PS
I nearly missed this posting. Better open a new discussion for any new problem.

 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
Better do it the other way round and just make your changes to the top logion info more precise so the footer won't be affected:

div.headermenu div.logininfo {
position:absolute;
}

Cheers,
Frank

PS
CSS FAQ and Themes FAQ are good starting points for learning more about theming.
 
Average of ratings: -
Head
Re: Theme resizing
Particularly helpful MoodlersPlugin developersTesters
Ah... I see why I missed the duplication... Unless your browser window is smaller than the header graphic the white text is invisible against the white background of the header...
 
Average of ratings: -
Picture of Claire Browne
Re: Theme resizing
 
Hi,

I have a problem with my customised theme.

When you drag any browser window to get it smaller the blocks on the right dissappear after a while of dragging.

is there a way of telling moodle to rescale and keep everything on the page?

I have attached my custom theme.
 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
Hi Claire,

Please start a new discussion for your problem as it doesn't seem to be related to the problem/solution discussed here.

There is probably a fixed width set somewhere in your theme which causes the described behavior.

tia
Frank

PS
CSS FAQ and Themes FAQ are good starting points for learning more about theming.
 
Average of ratings: Useful (1)
Picture of Claire Browne
Re: Theme resizing
 
Hi,

Since posting this, I have found out the cause. I thought I deleted the post but never mind.

thanks for your help.
 
Average of ratings: -
It's only an avatar...
Re: Theme resizing
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters
Cool! Oh I do love it when I learn something new! Gosh you are a mine of information Frank.

Thanks for this info about changing position of login. I'm going off to read your article How to create a custom theme.

Cheers

Mary
 
Average of ratings: -
Picture of robert maran
Re: Theme resizing
 
Hi Frank,
Many thanks for this information and your quick response. I will pass it on to our IT people and get them to implement it.

Cheers
Robert
 
Average of ratings: -
Picture of robert maran
Re: Theme resizing
 

Hi Frank,

I tried following the steps you outlined to try and change the theme size on a moodle that is on my computer, but I'm afraid that it didn't change to as per your screen shot. Any ideas why not?

Cheers

Robert

 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
Hi Robert,

please provide details on what you did (theme, CSS fiels etc.) and what exactly is not working.

One reason that modifications don't show is that the browser cache still contains an old version. So refresh you page or disable the browser cache temporarily while working on a theme.

hth
Frank
 
Average of ratings: -
Picture of robert maran
Re: Theme resizing
 
Hi Frank
Thanks for replying. I will keep trying and see if i can get the desired result. Will keep you posted and thanks for your kind help.

Cheers
Robert
 
Average of ratings: -
Picture of Erin Billy
Re: Theme resizing
 
Very helpful. Thank you! smile

One question--in this bit:

$THEME->sheets = array('gradients', 'osaka');

What would I put instead of 'gradients'? I've added custom CSS for my quizzes. Would it be... like this?

$THEME->sheets = array('question', 'myCustomCSS');

(I'm guessing that 'gradients' refers to 'gradients.php', in which case 'question' would refer to 'question.php'.)

I got this working exactly the way I want at the moment by add the custom CSS to my existing custom theme, but I'd rather do things the 'right' way.

Thanks!
 
Average of ratings: -
It's only an avatar...
Re: Theme resizing
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters
Hi,

Gradient refers to the name of the css file in Standard Theme, and has nothing to do with PHP files.

If your custom CSS file is called mycustomcss.css then by all means add mycustomcss to the array as you have stated.

As for the PHP question. No, you have that wrong. As mentioned about the gradient refers to the css file.

If you don't have a css file called gradient.css then I think you can safely take that name off the array list, just add the name of your existing css file, whatever its name.

Hope this clears up the missunderstanding?

Mary
 
Average of ratings: -
Frank Ralf
Re: Theme resizing
Documentation writersPlugin developers
See Theme config file for details. CSS FAQ and Themes FAQ are also good starting points for learning more about CSS and theming.
 
Average of ratings: -