Moderbb questions

Can someone tell me how can I make smaller the upper part here? I want the body of the forum to have same size. I don't like that it covers the whole page of the forum hiding the background on the sides. I use modernbb http://prig.forumgreek.com/forum

Also on the bottom how can I change the colors? I would like to try something else instead of grey



My css code in case something is editable

Code:

input[type="text"],.inputbox {
  color: #000000;
}
input[type="text"],.inputbox {
  color: #000000 !important;
}

 
a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}
 
.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
}
 
.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
          border-radius: 4px;
}
 
.fancybox-opened {
  z-index: 930;
}
 
.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
 
.fancybox-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}
 
.fancybox-inner {
  overflow: hidden;
}
 
.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}
 
.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 10px;
}
 
.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: top;
}
 
.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}
 
#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}
 
#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}
 
.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}
 
.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}
 
.fancybox-prev {
  left: 0;
}
 
.fancybox-next {
  right: 0;
}
 
.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}
 
.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}
 
.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}
 
.fancybox-nav:hover span {
  visibility: visible;
}
 
.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}
 
/* Overlay helper */
 
#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}
 
#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* Title helper */
 
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}
 
.fancybox-opened .fancybox-title {
  visibility: visible;
}
 
.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}
 
.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
          border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}
 
.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}
 
.fancybox-title-inside-wrap {
  margin-top: 10px;
}
 
.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}

#fa_popup_overlay {
  background-color:#333;
  opacity:0.8;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
 
#fa_popup {
  font-size:10px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  background:#222;
  border-radius:3px;
  position:fixed;
  top:50px;
  left:12%;
  right:12%;
  bottom:30px;
  padding:3px;
  width:auto;
  overflow:hidden;
  box-shadow:0px 3px 10px rgba(34, 25, 25, 0.4);
}
 
#fa_popup_content {
  border:1px solid #333;
  border-radius:3px;
  padding:3px;
  overflow:auto;
  height:90%;
}
 
.fa_popup_title {
  color:#999;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  border-bottom:1px solid #999;
  margin:8px 0;
  padding-bottom:2px;
}
 
input.fa_popup_button, a.fa_popup_button {
  color:#FFF !important;
  font-size:12px;
  font-weight:bold;
  text-indent:0;
  text-decoration:none !important;
  background-color:#17A;
  border:none;
  border-bottom:2px solid #058;
  border-radius:3px;
  display:inline-block;
  line-height:20px;
  padding:0 6px;
  cursor:pointer;
  transition:300ms;
}
 
input.fa_popup_close {
  background-color:#C31;
  border-color:#A10;
  min-width:25px;
  position:absolute;
  top:2px;
  right:2px;
}
 
input.fa_popup_button:hover, a.fa_popup_button:hover {
  background-color:#666;
  border-color:#444;
}
 
input.fa_popup_button:focus, a.fa_popup_button:active, a.fa_popup_button:focus {
  background-color:#C93;
  border-color:#A91;
  outline:none;
}
 
.fa_popup_error {
  color:#300;
  font-size:12px;
  background:#966;
  border:1px solid #855;
  border-bottom-width:2px;
  border-radius:3px;
  padding:9px 6px;
  margin:6px;
}
 
.fa_popup_friends {
  background:#444;
  border:1px solid #333;
  border-bottom-width:2px;
  border-radius:3px;
  display:inline-block;
  padding:3px;
  margin:3px;
  float:none;
  overflow:hidden;
}
 
#fa_popup .add_success { color:#8B5 }
#fa_popup .deny_success { color:#E53 }
#fa_popup .add_failed { color:#EB5 }
 
.fa_popup_loading {
  color:#999;
  font-size:14px;
  font-weight:bold;
  text-align:center;
  padding:25px;
}
 
.fa_popup_more {
  text-align:center;
  margin:3px;
  clear:both;
}
 
/* data corrections */
#fa_popup_content > td { display:block }
#fa_popup.pun tbody.statused span.status { position:static }

.signature_div img{
max-width: 1000px !important;
max-height: 272px !important;
}
 ul.forums {
              max-height: 20000px;
          }


img {
  transition: all 0.2s ease-in-out;
}
img:hover {
  transform: scale(1.1);
}

Can someone tell me how can I make smaller the upper part here? I want the body of the forum to have same size. I don't like that it covers the whole page of the forum hiding the background on the sides.

As far as I know that can't be done with CSS directly.

But you can do this.
Insert this in your CSS:

Code:

.headerbar { max-width: 1400px; }

Now create a new Javascript
Placement: In all pages
Code:

Code:

$(document).ready( function() {
  $(window).resize(function() {
    var header = document.querySelector('.headerbar');
    header.style.right = 'calc(-50% + ' + header.clientWidth / 2 + 'px)';
  });
});

This should do what you want. Anyway in your forum the width of the wrap has an integer value, so it looks a bit weird when the width of the screen is fewer than 1400px.
I would recommend adding something like this in your CSS.

Code:

#wrap, .wrap, .headerbar { width: 100%; }

Also on the bottom how can I change the colors? I would like to try something else instead of grey

That one is easy but there are many things you can customize there.
The background colors would be with this CSS

Code:

.statistics {
  background-color: #ff0000;
}
#page-footer {
  background-color: #00ff00;
}

And here I added some of the text and border colors if you want to play a bit more with this.

Code:

.copyright-body {
  border-color: #f0f0f0;
}

#fa_night_container {
  background-color: #000000;
  color: #cccccc;
  border-color: #f0f0f0;
}

.footerbar-system, .footerbar-system a {
    color: #000 !important;
}

If I use this code only the right part dissapears after the menu.

Code:

.headerbar { max-width: 1400px; }

I tried putting the banner in the center but then the navigation menu dissapears lol.


Also in the code for the bottom if I put #000 it becomes transparent instead of black. With #0000 if turns back to the grey it was and not to black. Your red and green colors worked although, so I chose to match it with the same grey I had in the body of the forum.

Do you want to change the text or background color at the bottom?

Background color, make it black

Well, I'm looking at your forum again and seems you almost got it.
You will need the

Code: .headerbar { max-width: 1400px; }

so it looks properly no matter how big the screen is (it basically solves the problem of the first image)

When the screen is not big enough to fit both banner and navbar, the navbar disappears. But that's because other reasons, it's a problem about how default headerbar is displayed. There are two possible solutions for this problem.

1) When both can't be in the same row, move the navbar below (or above) the banner.
It may seem easy but in this particular case, it isn't. I've been testing for awhile and it looks like to fix that you will have to make some edits to the template overall_header.

2) When both can't be in the same row don't display the banner, only the navbar.
That one is easier and could probably be done using @media specifications (CSS).

With #⁣0000 it turns back to the grey it was and not to black.

Color formats are rgb (#⁣000) or rrggbb (#⁣000000), otherwise it will not read the color so it will use the default one (gray) instead.

Code:

.statistics {
          background-color: #000000;
        }
#page-footer {
          background-color: #000000;
        }

This makes the background black.

^it turned black indeed thanks.

@wevoc
I tried experimenting with it but I couldn't figure out how to move the navbar under the banner. Anyway I think I will leave it as it is, unless if someone knows the way. But it ain't that bad now

You must have changed something because now the navbar is the same as the headerbar.

I changed the color to black.

If I want to put background picture in the body how can I do it?

This for example https://images.8tracks.com/cover/i/002/099/285/Cool-Galaxy-Space-Wallpaper-1-1658.jpg

Put it where I point to

Code:

input[type="text"],.inputbox {
  color: #000000;
}
input[type="text"],.inputbox {
  color: #000000 !important;
}

 
a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}
 
.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
}
 
.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
          border-radius: 4px;
}
 
.fancybox-opened {
  z-index: 930;
}
 
.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
 
.fancybox-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}
 
.fancybox-inner {
  overflow: hidden;
}
 
.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}
 
.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 10px;
}
 
.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: top;
}
 
.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}
 
#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}
 
#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}
 
.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}
 
.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}
 
.fancybox-prev {
  left: 0;
}
 
.fancybox-next {
  right: 0;
}
 
.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}
 
.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}
 
.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}
 
.fancybox-nav:hover span {
  visibility: visible;
}
 
.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}
 
/* Overlay helper */
 
#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}
 
#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* Title helper */
 
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}
 
.fancybox-opened .fancybox-title {
  visibility: visible;
}
 
.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}
 
.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
          border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}
 
.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}
 
.fancybox-title-inside-wrap {
  margin-top: 10px;
}
 
.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}

#fa_popup_overlay {
  background-color:#333;
  opacity:0.8;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
 
#fa_popup {
  font-size:10px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  background:#222;
  border-radius:3px;
  position:fixed;
  top:50px;
  left:12%;
  right:12%;
  bottom:30px;
  padding:3px;
  width:auto;
  overflow:hidden;
  box-shadow:0px 3px 10px rgba(34, 25, 25, 0.4);
}
 
#fa_popup_content {
  border:1px solid #333;
  border-radius:3px;
  padding:3px;
  overflow:auto;
  height:90%;
}
 
.fa_popup_title {
  color:#999;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  border-bottom:1px solid #999;
  margin:8px 0;
  padding-bottom:2px;
}
 
input.fa_popup_button, a.fa_popup_button {
  color:#FFF !important;
  font-size:12px;
  font-weight:bold;
  text-indent:0;
  text-decoration:none !important;
  background-color:#17A;
  border:none;
  border-bottom:2px solid #058;
  border-radius:3px;
  display:inline-block;
  line-height:20px;
  padding:0 6px;
  cursor:pointer;
  transition:300ms;
}
 
input.fa_popup_close {
  background-color:#C31;
  border-color:#A10;
  min-width:25px;
  position:absolute;
  top:2px;
  right:2px;
}
 
input.fa_popup_button:hover, a.fa_popup_button:hover {
  background-color:#666;
  border-color:#444;
}
 
input.fa_popup_button:focus, a.fa_popup_button:active, a.fa_popup_button:focus {
  background-color:#C93;
  border-color:#A91;
  outline:none;
}
 
.fa_popup_error {
  color:#300;
  font-size:12px;
  background:#966;
  border:1px solid #855;
  border-bottom-width:2px;
  border-radius:3px;
  padding:9px 6px;
  margin:6px;
}
 
.fa_popup_friends {
  background:#444;
  border:1px solid #333;
  border-bottom-width:2px;
  border-radius:3px;
  display:inline-block;
  padding:3px;
  margin:3px;
  float:none;
  overflow:hidden;
}
 
#fa_popup .add_success { color:#8B5 }
#fa_popup .deny_success { color:#E53 }
#fa_popup .add_failed { color:#EB5 }
 
.fa_popup_loading {
  color:#999;
  font-size:14px;
  font-weight:bold;
  text-align:center;
  padding:25px;
}
 
.fa_popup_more {
  text-align:center;
  margin:3px;
  clear:both;
}
 
/* data corrections */
#fa_popup_content > td { display:block }
#fa_popup.pun tbody.statused span.status { position:static }

.signature_div img{
max-width: 1000px !important;
max-height: 272px !important;
}
 ul.forums {
              max-height: 20000px;
          }


img {
  transition: all 0.2s ease-in-out;
}
img:hover {
  transform: scale(1.1);
}
#wrap, .wrap, .headerbar { width: 100%; }


.statistics {
  background-image: url('https://images.8tracks.com/cover/i/002/099/285/Cool-Galaxy-Space-Wallpaper-1-1658.jpg');
}
#page-footer {
  background-color: #000000;
}

.copyright-body {
  border-color: #000000;
}
 
#fa_night_container {
  background-color: #000000;
  color: #cccccc;
  border-color: #f0f0f0;
}
 
.footerbar-system, .footerbar-system a {
    color: #000 !important;
}

I figured it out for the headbar

Code:

.headerbar {
background-image: url('https://images.8tracks.com/cover/i/002/099/285/Cool-Galaxy-Space-Wallpaper-1-1658.jpg');
}

Only body left now

But what if I want transparent instead of background-image in the headbar?

But what if I want transparent instead of background-image in the headbar?

Transparent:

Code:

.headerbar {
    background: none;
}

Black translucid:

Code:

.headerbar {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: none;
}

Also there's a black border between the headerbar and the forum wrap; it may look weird if you are using the same background.
You can remove it using:

Code:

#wrap {
    border: none;
}

Fantastic. Thank you very much. I think I am good now.