Dynamic web pages

Dynamic web pages

by Vijay N -
Number of replies: 13

I am not sure if it comes under the same category but here is something I am looking to achieve.

With a static width size for your .surround class when a browser is minimised it either fits perfectly with the surround or it cover the left and right border of the surround area. I have seen some webpages where when you reduce the minimise the size of the browser the middle portion (.surround) gets reduced as well hence fitting perfectly within the minimised page. Occasionally I need to accomodate this for the front page and word document pages that our users open from any other page.

 

I hope its clear what I am trying to achieve please let me know if you would like more explanation. Can anyone help??

 

Vijay

Average of ratings: -
In reply to Vijay N

Re: Dynamic web pages

by Mary Evans -

Hi vijay,

Whenever I design a theme I try to make it fluid, in that it will resize to any browser setting. The way this is achieved is using a simple layout, as found in  Moodle 1.9 Standard theme, or the Base theme in Moodle 2.0, and make canges to the CSS for the #page element, like so...

#page { width: 95%; margin: 0 auto; padding: 0;}

This simple bit of code sets the parameter for the outer shell of the theme. Whatever happens inside this #page structure, providing all width values of all elements are in percentages, and that padding is accounted for in these final width setting, as padding ADDS to the width, then all will work nicely.

Moodle 2.0 is a little more tricky as you have to make absolutely sure the side-pre-only and side-post-only and content only settings in the CSS are exactly right for your theme. Getting this wrong spells catastrophy for your theme, because this is what the layout for the theme hinges on.

Hope this is useful to you...indeed I might have even got the your question wrong!In which case this is perhaps not what you need! LOL

Mary

Average of ratings: -
In reply to Mary Evans

Re: Dynamic web pages

by Vijay N -

Thank you for that, still not sure where it goes on the KCS theme , it seems the way they have designed is having each module or plugin (quiz, lesson, etc.) have #page added to it (eg:- #mod-quiz-edit #page .quizattemptcounts{...}) But I dont a stand alone #page with  its own parameters.

Average of ratings: -
In reply to Vijay N

Re: Dynamic web pages

by Mary Evans -

I'm not a mind reader vijay,

...you never mentioued anything about KCS theme!!!

Average of ratings: -
In reply to Mary Evans

Re: Dynamic web pages

by Vijay N -

sorry, so is there a way out for this?

Average of ratings: -
In reply to Vijay N

Re: Dynamic web pages

by Mary Evans -

Yes there is Vijay.

I have added a text file with some CSS fixes for you to try.

Make a copy of your style_layout.css if one exists in your theme. And providing it is the KCS theme you are using the fix should work, although I would like to see a copy of your header and footer to make sure, as the original site, which I have brought up to the top of the forum, has a mistake in the header.  I just need to check to see if yours is flawed too as this will, more than probably, break the theme in IE6 & IE7 & possibly IE8 too.

Mary

 

Average of ratings: -
In reply to Mary Evans

Re: Dynamic web pages

by Vijay N -

and here is the footer file attached.

Average of ratings: -
In reply to Vijay N

Re: Dynamic web pages

by Mary Evans -

There is a problem with these 2 files Vijay, I'll see  what the effect the code fixes have on the theme as a whole. I'll be back later with an update.

Cheers

Mary

Average of ratings: -
In reply to Vijay N

Re: Dynamic web pages

by Mary Evans -

Hi Vijay,

The problem with both the header and the footer is that there is a mismatch of div tags, more opening than closing in the header.

The footer has duplicated HTML for the table structure. Also the css for the footer has been commented out, not sure why.

I am assuming you know how to fix these things.

To make the whole site more flexible, all you need to do is change all the fixed width values to 100% but make .surround 95% like the examples I uploaded here.

Let me know how you get on.

Cheers

Mary

 

Average of ratings: -
In reply to Mary Evans

Re: Dynamic web pages

by Vijay N -

I've had another look at the two files, it seems the way they have structure is that opening tags in the header are closed in the footer with the last div tag as content class which is open in the header.html and closed in the footer.html. Quite interesting, never seen that method of applying tags in different files. So when the header ends it open up the content and closes with the footer. All the div are in the right numbers.

Average of ratings: -
In reply to Vijay N

Re: Dynamic web pages

by Mary Evans -

But the div tags in the header should all close in the header.

If you look in Standard theme's header.html you will see that the divs are opened and closed using php...

<?php print_container_start(true, '', 'header-home'); ?>   
<?php print_container_end(); ?>

Notice where they are opened and where they are closed.

There is no reason your theme should be different. I don't think this it is design feature but rather someone not understading what they are doing.

In fact the header and footer do't really need to be altered that much, but some designers like to be creative and start to dismantle something which works efficiently and ends up with a theme which people ask to make it do something it was not designed to do.

Standard theme on it's own works beautifully, and with the correct styling can look as you want it to.

Did you try changing the .surround width to 95% and #page to 100% and margins to 0 auto, plus change all the fixed width settings?

Mary

 

Average of ratings: -
In reply to Mary Evans

Re: Dynamic web pages

by Vijay N -

Hi Mary,

Thanks for the tips, I am still working on it, been busy with other bits and peices on moodle. While we are on the subject of using KCS theme, I also wanted to try changing the "different colors" background which covers the header as well. You will find the red color coming in different shades. Where is this effect taking place, I am trying to remove that and use the same red color equally ?

Not sure how to best describe this post, hope you can get what I am trying trying to pull here.

Average of ratings: -
In reply to Vijay N

Re: Dynamic web pages

by Mary Evans -

All your theme images are. in your school's theme images folder.

The background for the header is HERE

The background for the sideblock header is HERE

I sugest you take a look in that folder, Vijay.

Mary

 

Average of ratings: -