Theme resizing

Theme resizing

- robert maran の投稿
返信数: 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

robert maran への返信

Re: Theme resizing

- 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
Frank Ralf への返信

Re: Theme resizing

- 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
添付 my_theme.jpg
robert maran への返信

Re: Theme resizing

- 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
Frank Ralf への返信

Re: Theme resizing

- 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
robert maran への返信

Re: Theme resizing

- 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
Frank Ralf への返信

Re: Theme resizing

- 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




添付 Osaka_Shoin_placement.png
Frank Ralf への返信

Re: Theme resizing

- 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
robert maran への返信

Re: Theme resizing

- 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



添付 Osaka_Shoin_CSS.png
Frank Ralf への返信

Re: Theme resizing

- 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
Frank Ralf への返信

Re: Theme resizing

- 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
Lloyd Stock への返信

Re: Theme resizing

- Lloyd Stock の投稿
is anyone able to point me in the right direction here?
Lloyd Stock への返信

Re: Theme resizing

- Jon Witts の投稿
画像 Particularly helpful Moodlers 画像 Plugin developers 画像 Testers
I can not see any duplication. Did you fix it?
Jon Witts への返信

Re: Theme resizing

- 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.
Jon Witts への返信

Re: Theme resizing

- 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.
添付 Login_dubbled.png
Frank Ralf への返信

Re: Theme resizing

- 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.
Frank Ralf への返信

Re: Theme resizing

- Jon Witts の投稿
画像 Particularly helpful Moodlers 画像 Plugin developers 画像 Testers
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...
Frank Ralf への返信

Re: Theme resizing

- 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.
Claire Browne への返信

Re: Theme resizing

- 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.
Frank Ralf への返信

Re: Theme resizing

- Mary Evans の投稿
画像 Core developers 画像 Documentation writers 画像 Peer reviewers 画像 Plugin developers 画像 Testers
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
Frank Ralf への返信

Re: Theme resizing

- 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

robert maran への返信

Re: Theme resizing

- 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
Frank Ralf への返信

Re: Theme resizing

- 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!
Erin Billy への返信

Re: Theme resizing

- 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