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