Moderbb questions
3 posters
Page 1 of 1
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);
}
Last edited by Zordon on April 7th 2018, 9:16 am; edited 1 time in total
Re: 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.
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;
}
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: Moderbb questions
If I use this code only the right part dissapears after the menu.
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.
- 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.
Re: Moderbb questions
Do you want to change the text or background color at the bottom?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Moderbb questions
Well, I'm looking at your forum again and seems you almost got it.
You will need the
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).
Color formats are rgb (#000) or rrggbb (#000000), otherwise it will not read the color so it will use the default one (gray) instead.
You will need the
|
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.
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: Moderbb questions
- Code:
.statistics {
background-color: #000000;
}
#page-footer {
background-color: #000000;
}
This makes the background black.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Moderbb questions
^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
@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
Re: Moderbb questions
You must have changed something because now the navbar is the same as the headerbar.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Moderbb questions
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
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;
}
Re: Moderbb questions
I figured it out for the headbar
Only body left now
But what if I want transparent instead of background-image in 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?
Re: Moderbb questions
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;
}
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: Moderbb questions
Problem solved & topic archived.
|
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» 3 questions, non related,Breadcrumbs Module, Gif questions, ?!?Footer at the top?!?
» Many CSS questions
» A few questions
» Some questions
» Several questions
» Many CSS questions
» A few questions
» Some questions
» Several questions
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum