You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 15-05-2014 11:24:08

AntoninoNeri
Contributors
Registered: 14-05-2014
Posts: 11

DIV #headerWrapper height

Hi guys, I need to change the height of the DIV named #headerWrapper.
I have tried to achieve this by adding this line in the layout.css file:

#headerWrapper{
    position:relative;
    width:100%;
    min-height:20px;
    height:95px;
}

The point is that if I use a value higher than 95px then the images of the buttons in the nav bar disappear. What can I do in order to keep them and use a bigger height?


Thanks a lot for your time and care.
BR

Last edited by AntoninoNeri (15-05-2014 11:24:30)

Offline

#2 15-05-2014 11:36:55

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: DIV #headerWrapper height

Maybe you can just make headerTitles larger (normally, headerWrapper should resize with it).

The images disappear because of the responsive webdesign. You can change that behavior in js/main.js, around line 465:
    /* Change menu if page is too small */
    if($("#headerWrapper").height()>$("#headerTitles").height()*1.3){       
        $("nav").find("img").hide();
    }else{
        $("nav").find("img").show();
    }
   
Change the *1.3 in the first line to something bigger.

Offline

#3 15-05-2014 13:38:43

AntoninoNeri
Contributors
Registered: 14-05-2014
Posts: 11

Re: DIV #headerWrapper height

Thanks a lot for your answer!!!

This fixed my issue. I did not change that value, instead I just edited the layout.css file adding the same height property to both headerWrapper and headerTitles.

May I ask you if it's possible to reduce the space between the left side of the screen and the first group of tiles and the space between the last group of tiles and the right side of the screen?


Kindest regards.

Offline

#4 15-05-2014 21:03:24

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: DIV #headerWrapper height

For the space on the left side:

You probably need to adjust the width of #centerWrapper (set it to 100%)
Also set the width of #contentWrapper to for example 860 px because it will fill the screen too.

For the blank space on the right side, you'll maybe need this:  http://metro-webdesign.info/forum/viewtopic.php?id=737

Offline

#5 16-05-2014 10:05:22

AntoninoNeri
Contributors
Registered: 14-05-2014
Posts: 11

Re: DIV #headerWrapper height

Thanks again for your help. Your tips fixed my issues smile

This UI is awesome and I hope it's going to be more flexible and easy to customize in the future, maybe starting with the final v4 ;-)


Kindest Regards

Offline

Board footer

Powered by FluxBB