Space at top of page with Evolve-D

Space at top of page with Evolve-D

by Albert Leatherman -
Number of replies: 11

Hi Mary, Chris, et al. Thanks to your help last year, I was able to reduce the height of the empty space at the top of the page in Evolve-D, where the breadcrumbs had been before I removed them using .breadcrumb {display: none} in the theme's custom CSS. To reduce the height of the empty space that was left after the breadcrumbs were removed, I just changed

.logosmall {

...

    height: 75px;

...

}

to

.logosmall {

...

    height: 0px;

...

}

in /theme/evolved/style/custom.css.

However, there is still a good bit of empty space, which I would like to minimize since my education project is aimed at smartphone users, making screen real estate valuable. Any idea how to further reduce the space at the top of the page? Please see the attached pics for a better idea of what I'm trying to do. Thanks.






Average of ratings: -
In reply to Albert Leatherman

Re: Space at top of page with Evolve-D

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers 
html { margin: 0; padding: 0}
body { margin: 5% auto; padding: 0;}
Average of ratings: -
In reply to Mary Evans

Re: Space at top of page with Evolve-D

by Albert Leatherman -

Hi Mary, many thanks as aways for getting back to me so quickly. I went to Site Administration > Appearance > Themes > evolve-D > General Settings and inserted the following in the Custom CSS box:

html { margin: 0; padding: 0}
body { margin: 5% auto; padding: 0;}
However, the effect was only to cause the "footnote" contents (theme_evolved | footnote) to move up into the colored part of the window, instead of staying in the footer where they belong. Is there anything else I could try to get rid of the extra space at the top of the screen where the breadcrumbs were? As I mentioned in my original post, since my site is built for tiny screens on mobile phones, that space is pretty valuable. Thanks a lot.

Average of ratings: -
In reply to Albert Leatherman

Re: Space at top of page with Evolve-D

by Albert Leatherman -

Well, I made a little progress. One step forward and one step back. I went to /theme/evolved/style/custom.css and used

html { margin: 0; padding: 0}
body { margin: 0; padding: 0;}
instead of

html { margin: 0; padding: 0}
body { margin: 5% auto; padding: 0;}
That did the trick (got rid of extra top space) for desktop browsers but left the top space and, worse, made things appear too wide on mobile browsers. Please see attached pics. Any idea what to try next? Thanks.
Attachment Screen Shot 2017-11-29 at 12.24.22 AM.png
Average of ratings: -
In reply to Albert Leatherman

Re: Space at top of page with Evolve-D

by Albert Leatherman -

Other pic

Attachment IMG_9137.PNG
Average of ratings: -
In reply to Albert Leatherman

Re: Space at top of page with Evolve-D

by Albert Leatherman -

In case it's relevant, here's all my custom CSS at Site Administration > Appearance > Themes > evolve-D > General Settings (without the changes described in my message a few minutes ago):


#coursesearch {

  display: none;

}

.path-course-view .completionprogress {display: none;}

.breadcrumb {display: none}

.navbar .brand {

    color: transparent;

    display: block;

    float: left;

    font-size: 0;

    font-weight: normal;

    margin-left: -10px;

    padding: 10px 20px;

    text-shadow: none;

    background-position: left top;

    background-repeat: no-repeat;

    line-height: 20px;

    width: 10px

}

.usermenu .moodle-actionmenu.show[data-enhanced] .menu li:first-child { display: none; }

.modified {display:none;}

div.wiriseditorwrapper {

    width: auto !important;

    max-width: 450px;

}

div.wirisembeddeddecoration {

                max-width: 100%;

}


And here are my current contents of /theme/evolved/style/custom.css, if relevant (again, without the changes described in my message a few minutes ago):


/* Custom CSS Settings

-------------------------*/

.logosmall {

    background: url( [ [ setting:logosmall ] ] ) no-repeat;

    display: block;

    float:right;

    height: 0px;

    margin: 0;

    padding: 0;

    width: 150px;

}

a.brand {

      background-image:  url( [ [ pix:theme|my_navbar_logo_small ] ]);

      background-position: left top;

      background-repeat: no-repeat;

  }

[ [ setting:customcss ] ]


Average of ratings: -
In reply to Albert Leatherman

Re: Space at top of page with Evolve-D

by Albert Leatherman -

Hi Mary and Chris, just following up on this post. Since your earlier suggestion worked for desktop browsers but not mobile browsers (see my previous post), I'm thinking that a more elegant solution might be to get rid of the 75-pixel-tall space built into the Evolve-D theme for a logo, if that it what is causing the space at the top to begin with. I don't use a logo and would like to eliminate that extra space. Is there something I can do to get rid of that vertical space that I think is being reserved for a logo? Thanks.

Average of ratings: -
In reply to Albert Leatherman

Re: Space at top of page with Evolve-D

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Albert,

Try adding the following...change the percentage

#region-main:before {   top: 2%; }

You can find all the css for this in the evoled/style/evolved.css

That's the only thing I can think of that is probably giving that massive space;

Hope it fixes it?

Cheers

Mary

Average of ratings: -
In reply to Albert Leatherman

Re: Space at top of page with Evolve-D

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Albert,

Further to my last comment...

The styles I added was takeng from this...which is in
evolved / style / evolved.css

/*box shadows*/
@media screen {

 #region-main:before, #region-main:after {
      content: " ";
      position:absolute;
      z-index:-1;
      -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
          -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
                   box-shadow:0 0 20px rgba(0,0,0,0.8);
       top: 50%;
      bottom: 0;
      left: 10px;
      right: 10px;
         -moz-border-radius:100px / 10px;
                  border-radius:100px / 10px;

       }
}

So my earlier comment needs extra @media info like
min-width and max-width: 

Hope this helps?

Cheers

PS: Added later:

Try something like this...

@media only screen and (max-device-width: 480px) {
    #region-main:before {
        top: 2%;
    }
}

Mary

Average of ratings: -
In reply to Mary Evans

Re: Space at top of page with Evolve-D

by Albert Leatherman -

Hi Mary, thanks for the detailed reply. I'm not sure if I understood completely, but in /evolved/style/evolved.css I replaced this:

/*box shadows */

@media screen{

.block, .service {

    position:relative;       

    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

with this:

/*box shadows */

@media screen{

.block, .service {

    position:relative;       

    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}


@media only screen and (max-device-width: 480px) {

    #region-main:before {

        top: 2%;

    }

}

However, the annoying space at the top is still there. Did I do correctly what you suggested? 


Average of ratings: -
In reply to Albert Leatherman

Re: Space at top of page with Evolve-D

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

If you added it to the file itself then you need to Purge all caches or else you wont see the changes/

I forgot you keep messing with the theme...LOL

Average of ratings: -
In reply to Mary Evans

Re: Space at top of page with Evolve-D

by Albert Leatherman -

Yes, I am meticulous about purging all caches each time I try something new. In this case, it didn't change things unfortunately.

Average of ratings: -