Theme resizing

Theme resizing

autor robert maran -
Počet odpovedí: 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

Priemer hodnotení : -
V odpovedi na robert maran

Re: Theme resizing

autor 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
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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
Príloha my_theme.jpg
V odpovedi na robert maran

Re: Theme resizing

autor 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
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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
V odpovedi na robert maran

Re: Theme resizing

autor Frank Ralf -
Hi Robert,

Thanks for clarification. Now we're getting closer Mrnutie 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
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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




Príloha Osaka_Shoin_placement.png
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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
V odpovedi na robert maran

Re: Theme resizing

autor 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



Príloha Osaka_Shoin_CSS.png
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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
V odpovedi na Lloyd Stock

Re: Theme resizing

autor Lloyd Stock -
is anyone able to point me in the right direction here?
V odpovedi na Lloyd Stock

Re: Theme resizing

autor Jon Witts -
Obrázok: Particularly helpful Moodlers Obrázok: Plugin developers Obrázok: Testers
I can not see any duplication. Did you fix it?
V odpovedi na Jon Witts

Re: Theme resizing

autor 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.
V odpovedi na Jon Witts

Re: Theme resizing

autor 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.
Príloha Login_dubbled.png
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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.
V odpovedi na Frank Ralf

Re: Theme resizing

autor Jon Witts -
Obrázok: Particularly helpful Moodlers Obrázok: Plugin developers Obrázok: 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...
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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.
V odpovedi na Claire Browne

Re: Theme resizing

autor 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.
V odpovedi na Frank Ralf

Re: Theme resizing

autor Mary Evans -
Obrázok: Core developers Obrázok: Documentation writers Obrázok: Peer reviewers Obrázok: Plugin developers Obrázok: 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
V odpovedi na Frank Ralf

Re: Theme resizing

autor 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

V odpovedi na robert maran

Re: Theme resizing

autor 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
V odpovedi na Frank Ralf

Re: Theme resizing

autor Erin Billy -
Very helpful. Thank you! Úsmev

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!
V odpovedi na Erin Billy

Re: Theme resizing

autor Mary Evans -
Obrázok: Core developers Obrázok: Documentation writers Obrázok: Peer reviewers Obrázok: Plugin developers Obrázok: 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