+ Post New Thread
Results 1 to 15 of 15
Web Development Thread, Moodle Theme Help in Coding and Web Development; Hi, I have pulled apart the Moodle clouds theme. I would like it to that the page will go to ...
  1. #1

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    16,045
    Thank Post
    888
    Thanked 1,727 Times in 1,490 Posts
    Blog Entries
    12
    Rep Power
    453

    Moodle Theme Help

    Hi,

    I have pulled apart the Moodle clouds theme. I would like it to that the page will go to a width of 1280 but when displayed on a higer Res screen i would like to to display the background.

    After much messing arround i cannot find how do change it. Can anyone advise please?
    Attached Files Attached Files

  2. #2
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    Designing for variable width monitors can always be a problem.

    Could you be a little clearer with what your problem is. When you say you would like to display the background do you mean that the background image is not repeated correctly?

    I'm not familiar with the theme, could you provide a screenshot or preferably a live link so I can have a tinker.

    Thanks

  3. #3

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    16,045
    Thank Post
    888
    Thanked 1,727 Times in 1,490 Posts
    Blog Entries
    12
    Rep Power
    453
    The background is a solid colour.

    We have alot of wide screen computers around school. Currently them theme is set to stretch to the size of the screen. But the problem with this is that it is causing the header to repeated itself as it is not long enough. I want it so it will resize freely on the display until it gets 1280px wide then it wont go any wider

    Thanks allot.

  4. #4
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    Ah, got you.

    Without seeing a live version of the page it's a little difficult to say what might be causing the problem as I can't see which classes apply to what.

    I can see a that the id 'page' and 'page-home' have a min-width: 920px. This means anything over 920px wide it will expand.

    Try changing it to max-width: 1280px.

    The only prob with that though is I don't think IE6 supports min/max widths.
    Last edited by ctaylor2; 29th July 2009 at 12:47 PM.

  5. #5
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    Found a hack to enable max-width in ie6 here if you want to use it: min/max-width fix for IE6 - CSS - Snipplr

  6. #6
    apoth0r's Avatar
    Join Date
    Apr 2007
    Location
    Northants
    Posts
    1,221
    Thank Post
    151
    Thanked 180 Times in 132 Posts
    Rep Power
    52
    On a similar not with the same theme, how do i get it to centre the main window, at the moment i'm kind of going to one side :/

  7. #7

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    16,045
    Thank Post
    888
    Thanked 1,727 Times in 1,490 Posts
    Blog Entries
    12
    Rep Power
    453
    Quote Originally Posted by apoth0r View Post
    On a similar not with the same theme, how do i get it to centre the main window, at the moment i'm kind of going to one side :/
    I couldn't find that, that why i ended up making it stretch.

  8. #8
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    To make your content centre you can use margin: 0 auto. You need to specify a width to make this work though.

    If you look at the css for my site: http://www.bolsover.derbyshire.sch.u...hool/style.css

    I use the class:

    Code:
    .centred {
    margin:0 auto;
    width:880px;
    }
    For the id
    Code:
    main-wrap
    which surrounds the main part of the page

  9. #9

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    30
    Or you could use tables lol

    <table width="100%">
    <tr>
    <td class="left"> </td>
    <td class="middle"> </td>
    <td class="right"> </td>
    <td>
    <table>

    td.left {
    background: url("left.png") repeat-x;
    }
    etc....

  10. #10
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    52
    Quote Originally Posted by danIT View Post
    Or you could use tables lol

    <table width="100%">
    <tr>
    <td class="left"> </td>
    <td class="middle"> </td>
    <td class="right"> </td>
    <td>
    <table>

    td.left {
    background: url("left.png") repeat-x;
    }
    etc....
    No bad! W3 doesn't like tables for layouts.

    maybe try adding

    Code:
    #ID {
    min-width: 980px;
    max-width: 1280px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    }
    This will make the min-width 980px, then up until 1280px it will take up 80% of the screen, but when it hits 1280px it won't expand further. It should also center it throughout.
    Last edited by mossj; 29th July 2009 at 01:21 PM.

  11. #11

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    16,045
    Thank Post
    888
    Thanked 1,727 Times in 1,490 Posts
    Blog Entries
    12
    Rep Power
    453
    Quote Originally Posted by mossj View Post
    No bad! W3 doesn't like tables for layouts.

    maybe try adding

    Code:
    #ID {
    min-width: 980px;
    max-width: 1280px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    }
    This will make the min-width 980px, then up until 1280px it will take up 80% of the screen, but when it hits 1280px it won't expand further. It should also center it throughout.
    Thanks, how would i put this into the CCS file?

    Thanks

  12. #12

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    30
    Sorry, here's another way, not sure if its valid but it works

    <!--HTML-->
    <div class="container">
    <div class="row">
    <div class="cell">CELL A</div>
    <div class="cellmiddle">CELL B</div>
    <div class="cell">CELL C</div>
    </div>
    </div>

    /*CSS
    .container {
    display: table;
    }

    .row {
    display: table-row;
    }

    .cell {
    display: table-cell;
    width: 10%;
    height: 100px;
    border: 1px solid blue;
    padding: 1em;
    }
    .cellmiddle {
    display: table-cell;
    width: 90%;
    height: 100px;
    border: 1px solid blue;
    padding: 1em;
    }

  13. #13

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    16,045
    Thank Post
    888
    Thanked 1,727 Times in 1,490 Posts
    Blog Entries
    12
    Rep Power
    453
    Quote Originally Posted by mossj View Post
    No bad! W3 doesn't like tables for layouts.

    maybe try adding

    Code:
    #ID {
    min-width: 980px;
    max-width: 1280px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    }
    This will make the min-width 980px, then up until 1280px it will take up 80% of the screen, but when it hits 1280px it won't expand further. It should also center it throughout.
    Thanks, managed to twig a place for it.


    Does anyone know how to set a maximum width for a forum post?

    Thanks

  14. #14

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    16,045
    Thank Post
    888
    Thanked 1,727 Times in 1,490 Posts
    Blog Entries
    12
    Rep Power
    453
    Anyone please?

  15. #15

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    30
    Something along the lines of..........

    TABLE .forumpost {
    width: 100%;
    }

    Think you'll then need to play around with the forum post headings to get the display you want.

    Do you have the web developer toolbar for FF installed, its very useful.

SHARE:
+ Post New Thread

Similar Threads

  1. *NEW* EduGeek Moodle Theme
    By danIT in forum EduGeek Moodle
    Replies: 11
    Last Post: 31st July 2009, 09:00 AM
  2. New Moodle Theme
    By danIT in forum Virtual Learning Platforms
    Replies: 0
    Last Post: 18th May 2009, 05:16 PM
  3. Name my Moodle Theme!
    By danIT in forum Virtual Learning Platforms
    Replies: 14
    Last Post: 30th March 2009, 10:49 AM
  4. The HCHS Moodle Theme
    By FN-GM in forum Virtual Learning Platforms
    Replies: 2
    Last Post: 30th March 2009, 08:41 AM
  5. Another Moodle Theme
    By danIT in forum Virtual Learning Platforms
    Replies: 5
    Last Post: 23rd March 2009, 08:56 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •