Theme resizing

Theme resizing

by robert maran -
Number of replies: 27

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

రేటింగుల సగటు: -
In reply to robert maran

Re: Theme resizing

by Frank Ralf -
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
In reply to Frank Ralf

Re: Theme resizing

by robert maran -
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
Attachment my_theme.jpg
In reply to robert maran

Re: Theme resizing

by Frank Ralf -
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
In reply to Frank Ralf

Re: Theme resizing

by robert maran -
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
In reply to robert maran

Re: Theme resizing

by Frank Ralf -
Hi Robert,

Thanks for clarification. Now we're getting closer కళ్ళు చికిలిస్తూ 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
In reply to Frank Ralf

Re: Theme resizing

by Frank Ralf -
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




Attachment Osaka_Shoin_placement.png
In reply to Frank Ralf

Re: Theme resizing

by robert maran -
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
In reply to robert maran

Re: Theme resizing

by Frank Ralf -
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



Attachment Osaka_Shoin_CSS.png
In reply to Frank Ralf

Re: Theme resizing

by Frank Ralf -
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
In reply to Frank Ralf

Re: Theme resizing

by Lloyd Stock -
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
In reply to Lloyd Stock

Re: Theme resizing

by Lloyd Stock -
is anyone able to point me in the right direction here?
In reply to Lloyd Stock

Re: Theme resizing

by Jon Witts -
Particularly helpful Moodlers బొమ్మ Plugin developers బొమ్మ Testers బొమ్మ
I can not see any duplication. Did you fix it?
In reply to Jon Witts

Re: Theme resizing

by Lloyd Stock -
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.
In reply to Jon Witts

Re: Theme resizing

by Frank Ralf -
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.
Attachment Login_dubbled.png
In reply to Frank Ralf

Re: Theme resizing

by Frank Ralf -
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.
In reply to Frank Ralf

Re: Theme resizing

by Claire Browne -
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.
In reply to Claire Browne

Re: Theme resizing

by Frank Ralf -
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.
In reply to Frank Ralf

Re: Theme resizing

by robert maran -

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

In reply to robert maran

Re: Theme resizing

by Frank Ralf -
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
In reply to Frank Ralf

Re: Theme resizing

by Erin Billy -
Very helpful. Thank you! చిర్నవ్వు

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!
In reply to Erin Billy

Re: Theme resizing

by Mary Evans -
Core developers బొమ్మ Documentation writers బొమ్మ Peer reviewers బొమ్మ Plugin developers బొమ్మ Testers బొమ్మ
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