The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to center the banner and adjust width and height?

View previous topic View next topic Go down

Solved How to center the banner and adjust width and height?

Post by Yada on July 18th 2015, 4:03 pm

My forum is at http://rileykeough.fanforum.biz/forum

Hello!

Could you please tell me

1. how to position my banner in the center
2. how to reduce the space underneath the banner
3-how toenlargenthe width of the portal (General< config. didn't work)
4-how to enlargen the forum area (where members post pictures)

I guess CSS needs to be fixed but I just don't know which codes to be fixed.

Thanking you in advance!


Last edited by Yada on July 19th 2015, 11:27 pm; edited 2 times in total

Yada
Forumember

Female Posts : 132
Reputation : 1
Language : English

http://simplyriley.fanforum.biz/

Back to top Go down

Solved Re: How to center the banner and adjust width and height?

Post by SLGray on July 18th 2015, 6:03 pm

Could you please post your CSS stylesheet? Please use the code tags.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: How to center the banner and adjust width and height?

Post by Yada on July 18th 2015, 11:23 pm

Code:
#search-box { display: none; }
body {
   background-color: #ece9e6;
   background-image: url('http://www.dodaj.rs/f/2g/10X/2FxgZLiQ/untitled-3.jpg');
   background-attachment: scroll;
  background-repeat: repeat-x;
   color: #333333;
   font-size: 12px;
   font-family: Verdana,Arial,Helvetica,sans-serif;
  background-position: top;
   }

* {
margin: 0;
padding: 0;
}

body {
background: #ece9e6;
color: #ece9e6;
font-family: Trebuchet MS, Verdana, sans-serif;
}
.pun {
width: 900px;
padding-left: 101px;
padding-right: 89px;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0px;
background-image: url(http://www.dodaj.rs/f/2g/10X/2FxgZLiQ/untitled-3.jpg);
background-repeat: repeat-y;
background-position: center;
}

/* Fix for RTL min-width bug, left here for consistency */
min-width: 768px;
line-height: 130%;
}
.pun div, .pun td, .sig-line {
border-color: ##dddddd;
color: #595959;
}
.pun img, .pun fieldset {
border: none;
}
.pun a:link {
color: #595959;
text-decoration: none;
}
.pun a:visited {
color: #595959;
text-decoration: none;
}
.pun a:hover {
color: #0096FF;
text-decoration: none;
}
.pun a:active {
color: #AEFF00;
text-decoration: none;
}
.pun a:focus {
color: #AEFF00;
text-decoration: none;
}
.pun h2, .pun h3, .pun th, .pun input, .pun select {
font: normal 1em Verdana, Arial, sans-serif;
}
#pun-intro {
border-bottom: 0px;
background-color: transparent;
background-image: url(http://www.dodaj.rs/f/3P/73/1WLRoTwT/rrrr.jpg);
background-repeat: no-repeat;
margin: 0px;
margin-top: -5px;
margin-left: -85px;
padding: 0px;
width: 958px;
height: 600px;
}
#pun-title {
display: none;
}
#pun-head #pun-navlinks {
padding: 0.5em 1.1em 0.6em 1.1em;
background-color: transparent;
border-color: #dddddd;
border-width: 0px;
}
#pun-navlinks ul {
margin-top: -50px;
padding: 0px;
list-style: none;
line-height: normal;
}

#pun-navlinks li a {
margin: 0px;
}
#pun-visit,.main-box {
background-color: transparent;
border: 0px;
color: #585145;
}
#pun-announcement {
background-color: transparent;
border: 0px;
color: #585145;
}
.main .main-head {
background: url(http://www.dodaj.rs/f/Y/SY/4l30I60u/mainbar.png) no-repeat;
border: 0px solid #777777;
border-bottom: 0px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main .main-foot {
background: url(http://www.dodaj.rs/f/Y/SY/4l30I60u/mainbar.png) no-repeat;
border: 0px solid #777777;
border-bottom: 0px;-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
color: #333333;
}
.main .main-head .page-title{
color: #333333;
}
.main .main-head p.h2{
color: #333333;
}
.pun .paged-head,.pun .paged-foot {
background-color: transparent;
border: 0px;
}
.pun .paged-head.clearfix {
background-color: transparent;
border: 0px;
}
.pun table.table th {
background-color: #e3e3e3;
}
.pun table.table td {
background-color: #f0f0f0;
}
.pun table.table td.tc2,.pun table.table td.tc3 {
background-color: #f4f4f4;
}
#stats {
background-color: #ededed;
}
#onlinelist {
background-color: #e6e6e6;
}
.pun .topic {
background-color: #f2f2f2;
}
#pun-foot {
background-image: url(http://www.dodaj.rs/f/2z/nV/1C8fJ4QJ/1.jpg);
background-repeat: no-repeat;
background-position: bottom;
width: 970px;
margin-left: -50px;
height: 164px;
margin-bottom: -5px;
}
#pun-about {
    text-align: center;
width: 900px;
margin: 0 auto;
background-color: transparent;
border: 0px solid #aeaeae;
}
form#qjump {
display: none;
width: 0px;
}
ul.pun-legend,ul#pun-legend{
   list-style-type: none;
   text-align: center;
   margin-bottom: 20px;
color: #585145;
   }

Yada
Forumember

Female Posts : 132
Reputation : 1
Language : English

http://simplyriley.fanforum.biz/

Back to top Go down

Solved Re: How to center the banner and adjust width and height?

Post by SLGray on July 19th 2015, 1:00 am

Why do you have two sections about the same area: body?

For the banner, look for this part:

Code:
#pun-intro {
border-bottom: 0px;
background-color: transparent;
background-image: url(http://www.dodaj.rs/f/3P/73/1WLRoTwT/rrrr.jpg);
background-repeat: no-repeat;
margin: 0px;
margin-top: -5px;
margin-left: -85px;
padding: 0px;
width: 958px;
height: 600px;
}

Play around with the lines: margin-left and margin-top.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: How to center the banner and adjust width and height?

Post by Pizza Boi on July 19th 2015, 2:29 pm

@Yada wrote:My forum is at http://rileykeough.fanforum.biz/forum

Hello!

Could you please tell me

1. how to position my banner in the center
2. how to reduce the space underneath the banner
3-how toenlargenthe width of the portal (General< config. didn't work)
4-how to enlargen the forum area (where members post pictures)

I guess CSS needs to be fixed but I just don't know which codes to be fixed.

Thanking you in advance!

Hi Very Happy

#1 and #2. Change your #pun-intro code to this:

Code:
#pun-intro {
  background-color: transparent;
  background-image: url(http://www.dodaj.rs/f/3P/73/1WLRoTwT/rrrr.jpg);
  background-repeat: no-repeat;
  border-bottom: 0;
  height: 410px;
  padding: 0;
}

As for #3, you can visit templates and add a specific ID to the tag "body" such as:

Code:
<body class="wbid">

And add in your CSS:

Code:
.wbid {
  width: #px;
}

For #3, I am not sure if it will work since I do not know if it will affect the entire forum.
For #4, I highly advise you just set the maximum image size to something else, as in limit because no matter how much you make the forum big enough, if a member posts such a big image, it will exceed unless you restrict it.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to center the banner and adjust width and height?

Post by Yada on July 19th 2015, 10:39 pm

Thank you to both of you.

I followed all the instructions.
You're right, no. 3 doesn't seem to work. But I will re-adjust the sizes of default photos. Thanks!

Yada
Forumember

Female Posts : 132
Reputation : 1
Language : English

http://simplyriley.fanforum.biz/

Back to top Go down

Solved Re: How to center the banner and adjust width and height?

Post by Pizza Boi on July 20th 2015, 4:42 am

Hi Very Happy

Well, if it doesn't change, I can provide you a forum width adjuster code.

Code:
<script type="text/javascript">
 
jQuery(document).ready(function(){
 
jQuery("#posaljiwidth").click(function(){
var a=eval(document.getElementById("selektwidth").value);
var b=0;
jQuery("table.bodylinewidth").animate({width:a},1100, "linear");
if(a==1200){b=1;}
if(a==1300){b=2;}
if(a==1400){b=3;}
if(a==1500){b=4;}
if(a==1600){b=5;}
if(a==1700){b=6;}
if(a==1800){b=7;}
setKuki('bodylinewidthkuki',b,365);
  });
 
 
});
</script> 
<center>
   <div style="text-align: center;"><input type="submit" value="Set" id="posaljiwidth" /><select id="selektwidth">
  <option selected="selected">1200</option>
  <option>1300</option>
  <option>1400</option>
  <option>1500</option>
  <option>1600</option>
  <option>1700</option>
  <option>1800</option>
 
</select>
   </div>
</center>

That's for PHPBB2. Feel free to adjust it.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to center the banner and adjust width and height?

Post by SLGray on July 20th 2015, 4:38 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum