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.

Problem after making forum wider using CSS

View previous topic View next topic Go down

Solved Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 3:16 am

Hello,

This is my forum: http://power88.omgforum.net

I want to make my forum wider. By reading some topics on this forum, I managed to do it (Admin Panel -> Display -> Colors -> CSS Stylesheed) by setting:
Code:
width: 1500px
instead of (IIRC)
Code:
width: 850px
(For now, the value is not important)


The problem is that the distance between user info and the text is much bigger. How can I make this distance smaller? I want to get rid of the space in the red zone.


Sorry if my english is wrong. I hope that someone can help me.




kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sir Chivas™ on August 8th 2012, 4:19 am

Hello,

Is the Version of your forum, PhpBB3?



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 7:48 pm

Hello,

Yes, it's PhpBB3.

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 8th 2012, 8:39 pm

Where did you add 1500? Remove it & make it 850. Let me know then.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Faisal1 on August 8th 2012, 8:44 pm

sanket also replay on my topic plz help me also

Faisal1
Forumember

Male Posts : 44
Reputation : 1
Language : Urdu & English
Location : Pakistan

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 8th 2012, 8:49 pm

@Faisal1 wrote:sanket also replay on my topic plz help me also
Please don't post in other's thread to help you out. If someone has a answer to your topic, they will reply.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 8:51 pm

Not it's set to 850.

I edited the code from here:
Admin Panel -> Display -> Colors -> CSS Stylesheed

Code:
#wrap {
width : 850px;
padding : 5px;
border : 3px solid #;

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 8th 2012, 8:53 pm

General>Forum>Configuration
Forum width (number or %) :change it here
See if it works?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 8:55 pm

It was on 100%.
I set it to 150%, but it doesnt do anything.


Edit 1: Should I enter a value? e.g. 950 (px)

Edit 2: I set it to 950, still no modification.

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 8th 2012, 9:02 pm

Add this to your css & check
Code:
#wrap {
    min-width: 900px !important;
}

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 9:07 pm

I did this:
Code:
#wrap {
    min-width: 900px !important;
}
#wrap {
width : 850px;
padding : 5px;
border : 3px solid #;

and it's a little wider now.

Did I use the code correct, or should I delete something?
To make the forum even wider, should I modify min-width or width?

Thank you.

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 8th 2012, 9:09 pm

Just work on the code i gave you. Increase it from 900 to something else.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 9:11 pm

I set a higher number and the forum is wider, but I still have that big gap between user info and the post.

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 8th 2012, 9:19 pm

You have not added the code i gave, you are modifying it somewhere else?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 9:22 pm

I added the code
@kitu_gudu wrote:I did this:
Code:
#wrap {
    min-width: 900px !important;
}
#wrap {
width : 850px;
padding : 5px;
border : 3px solid #;
but maybe I didn't implemented it corectly.

Should I delete:
Code:
#wrap {
width : 850px;
this?

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 8th 2012, 9:25 pm

That code was not given by me.
Code:
#wrap {
width : 850px;
padding : 5px;
border : 3px solid #;

thats the code i gave.
http://help.forumotion.com/t112986-problem-after-making-forum-wider-using-css#740384

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 9:36 pm

I am a little confused because this the first time that I use CSS.
I added the code that you gave me, but I what I dont understand is what to do with the original #wrap width code.

Right now the code looks like this (I just added the code that you posted above the original #wrap):
Code:
#wrap {
    min-width: 1300px !important;
}

#wrap {
width : 850px;
and when I modify the code that you gave (1300px in this case), the forum becomes wider, but the gap between user info and text, is still there (like the picture in the first post). I hope I made my problem as clear as possible.

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 8th 2012, 9:39 pm

As i am trying to tell you, you just need to add the code i gave & it should work fine. Whatever editing in the css you have done, is creating the problem.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 8th 2012, 9:47 pm

I suggest we take another aproach, because I dont know what to do anymore. I am noob.

This is the original code (all of it).
Code:
.forabg, .forumbg, .headerbar{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}

.introduction, .panel, .post, #text_editor_textarea {
background-color: transparent;
border: 1px solid ;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-color: #6d8245;
-moz-box-shadow : 0 0 3px #fff;
-webkit-box-shadow : 0 0 3px #fff;
}

#wrap {
width : 850px;
padding : 5px;
border : 3px solid #;
-moz-border-radius : 7px;
-webkit-border-radius : 7px;
-moz-box-shadow : 0 0 11px #fff;
-webkit-box-shadow : 0 0 11px #fff;
background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/back_c11.png');
background-repeat: repeat;
}

li.row {background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/lirowb10.png');}

div#page-header div.navbar ul.linklist li a{
padding-top: 11px;
padding-bottom: 10px;
padding-right: 3px;
padding-left: 4px;
color: #ffffff;}

div#page-header div.navbar ul.linklist li a:hover{
color: #efefef;
}

ul.navlinks {
font-weight: normal;
text-align: center;
border-bottom: 0px solid #ffffff;
padding-top: 0px;
padding-bottom: 0px;}


div#page-header div.navbar{
clear: both;
margin-top: -2px;
background: url('http://i66.servimg.com/u/f66/13/46/75/82/bgmenu11.png') repeat-x #B14A00;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}

#search{
display:none;
}

.icon-home{
background: url(http://i66.servimg.com/u/f66/13/46/75/82/212.png) no-repeat top;
padding: 12px;
padding-bottom: 20px;
color: transparent !important;
font-size: 0px !important;}

.icon-home:hover{
background: url(http://i66.servimg.com/u/f66/13/46/75/82/113.png) no-repeat top;
color: transparent;}

.forumbg {
background: url(http://i66.servimg.com/u/f66/13/46/75/82/forumb18.png) repeat-x;
background-color: #383838;}


ul#picture_legend {
background-position: center;
background-repeat: no-repeat;
background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/legend12.png');
text-align: center;
padding: 24px 0;}

ul#privmsgs-menu {
background-position: center;
background-repeat: no-repeat;
background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/msgico10.png');
text-align: CENTER;
padding: 24px 0;}

a.button1, input.button1, a.button2, input.button2, button.button2 {
color: white;
background-image: url(http://i66.servimg.com/u/f66/13/46/75/82/forumb18.png);}

a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
color: white;}

#text_editor_controls a.button2,#text_editor_controls input.button2,#text_editor_controls button.button2{
background-image: url(http://illiweb.com/fa/prosilver/bg_button.gif);
color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3px;}

.buttons img{
background: url('http://i66.servimg.com/u/f66/13/46/75/82/button11.png') no-repeat;}

.buttons img:hover{
background: url('http://i66.servimg.com/u/f66/13/46/75/82/button11.png') no-repeat;
background-position:  0px -25px;}

ul.navlinks span.new-message {
font-weight: bold;
color: #d5ffae;
padding-right: 1.7em;
background: transparent url('http://illiweb.com/fa/email.gif') no-repeat top right;}



div#page-footer {
background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/cr12.png');
background-position: bottom right;
background-repeat: no-repeat;
padding: 15px;}

#tabs a {
background-color: #ffffff;
background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/back_c11.png');
border-bottom: 1px solid #ffffff;
font-color: #ffffff;}

#tabs .activetab a {
background: url('http://i66.servimg.com/u/f66/13/46/75/82/bgmenu11.png');
background-repeat: repeat-x;
background-color: #ffffff;
font-color: #333333;}

body.chatbox {
  background-color: transparent;}

blockquote blockquote {
background-color: transparent;
font-size: 0.95em;
margin: 0.5em 1px 0pt 15px;}

blockquote blockquote blockquote {
font-size: 0.95em;
background-color: transparent;}

dl.codebox {
padding: 3px;
background-color: transparent;
border: 1px solid #dadada;
font-size: 1em;
font-family: Trebuchet MS;}

dl.codebox dt {
text-transform: none;
font-size: 0.95em;
background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/legend12.png');
background-repeat: no-repeat;
background-position: top center;
border-bottom: 0px solid #FFFFFF;
color: #c6e616;
font-weight: bold;}

dl.codebox code {
font: 0.9em Verdana,Arial,Helvetica,sans-serif;
color: #c6e616;}


profile-icon{
background: url('http://i66.servimg.com/u/f66/13/46/75/82/button11.png') no-repeat;}

profile-icon:hover{
background: url('http://i66.servimg.com/u/f66/13/46/75/82/button11.png') no-repeat;
background-position:  0px -25px;}
Please add you code where you think it should be and then I will copy-paste the whole text into my CSS Stylesheet.

Or I could make you admin on the forum, so that you can do what you think is best. I set the default code.

Thank you for helping me and for your patience. I hope we manage to solve this.

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Sanket on August 9th 2012, 10:16 am

Try this
Code:
    .forabg, .forumbg, .headerbar{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;}

    .introduction, .panel, .post, #text_editor_textarea {
    background-color: transparent;
    border: 1px solid ;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-color: #6d8245;
    -moz-box-shadow : 0 0 3px #fff;
    -webkit-box-shadow : 0 0 3px #fff;
    }

    #wrap {
    width : 850px;
    padding : 5px;
    border : 3px solid #;
    -moz-border-radius : 7px;
    -webkit-border-radius : 7px;
    -moz-box-shadow : 0 0 11px #fff;
    -webkit-box-shadow : 0 0 11px #fff;
    background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/back_c11.png');
    background-repeat: repeat;
    }

    li.row {background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/lirowb10.png');}

    div#page-header div.navbar ul.linklist li a{
    padding-top: 11px;
    padding-bottom: 10px;
    padding-right: 3px;
    padding-left: 4px;
    color: #ffffff;}

    div#page-header div.navbar ul.linklist li a:hover{
    color: #efefef;
    }

    ul.navlinks {
    font-weight: normal;
    text-align: center;
    border-bottom: 0px solid #ffffff;
    padding-top: 0px;
    padding-bottom: 0px;}


    div#page-header div.navbar{
    clear: both;
    margin-top: -2px;
    background: url('http://i66.servimg.com/u/f66/13/46/75/82/bgmenu11.png') repeat-x #B14A00;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;}

    #search{
    display:none;
    }

    .icon-home{
    background: url(http://i66.servimg.com/u/f66/13/46/75/82/212.png) no-repeat top;
    padding: 12px;
    padding-bottom: 20px;
    color: transparent !important;
    font-size: 0px !important;}

    .icon-home:hover{
    background: url(http://i66.servimg.com/u/f66/13/46/75/82/113.png) no-repeat top;
    color: transparent;}

    .forumbg {
    background: url(http://i66.servimg.com/u/f66/13/46/75/82/forumb18.png) repeat-x;
    background-color: #383838;}


    ul#picture_legend {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/legend12.png');
    text-align: center;
    padding: 24px 0;}

    ul#privmsgs-menu {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/msgico10.png');
    text-align: CENTER;
    padding: 24px 0;}

    a.button1, input.button1, a.button2, input.button2, button.button2 {
    color: white;
    background-image: url(http://i66.servimg.com/u/f66/13/46/75/82/forumb18.png);}

    a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
    color: white;}

    #text_editor_controls a.button2,#text_editor_controls input.button2,#text_editor_controls button.button2{
    background-image: url(http://illiweb.com/fa/prosilver/bg_button.gif);
    color: black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3px;}

    .buttons img{
    background: url('http://i66.servimg.com/u/f66/13/46/75/82/button11.png') no-repeat;}

    .buttons img:hover{
    background: url('http://i66.servimg.com/u/f66/13/46/75/82/button11.png') no-repeat;
    background-position:  0px -25px;}

    ul.navlinks span.new-message {
    font-weight: bold;
    color: #d5ffae;
    padding-right: 1.7em;
    background: transparent url('http://illiweb.com/fa/email.gif') no-repeat top right;}



    div#page-footer {
    background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/cr12.png');
    background-position: bottom right;
    background-repeat: no-repeat;
    padding: 15px;}

    #tabs a {
    background-color: #ffffff;
    background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/back_c11.png');
    border-bottom: 1px solid #ffffff;
    font-color: #ffffff;}

    #tabs .activetab a {
    background: url('http://i66.servimg.com/u/f66/13/46/75/82/bgmenu11.png');
    background-repeat: repeat-x;
    background-color: #ffffff;
    font-color: #333333;}

    body.chatbox {
      background-color: transparent;}

    blockquote blockquote {
    background-color: transparent;
    font-size: 0.95em;
    margin: 0.5em 1px 0pt 15px;}

    blockquote blockquote blockquote {
    font-size: 0.95em;
    background-color: transparent;}

    dl.codebox {
    padding: 3px;
    background-color: transparent;
    border: 1px solid #dadada;
    font-size: 1em;
    font-family: Trebuchet MS;}

    dl.codebox dt {
    text-transform: none;
    font-size: 0.95em;
    background-image: url('http://i66.servimg.com/u/f66/13/46/75/82/legend12.png');
    background-repeat: no-repeat;
    background-position: top center;
    border-bottom: 0px solid #FFFFFF;
    color: #c6e616;
    font-weight: bold;}

    dl.codebox code {
    font: 0.9em Verdana,Arial,Helvetica,sans-serif;
    color: #c6e616;}


    profile-icon{
    background: url('http://i66.servimg.com/u/f66/13/46/75/82/button11.png') no-repeat;}

    profile-icon:hover{
    background: url('http://i66.servimg.com/u/f66/13/46/75/82/button11.png') no-repeat;
    background-position:  0px -25px;}

#wrap {
    min-width: 1300px !important;
}

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by kitu_gudu on August 9th 2012, 3:07 pm

Thank you very much for your help/time Sanket. I really apreciate it. Very good

The code that you provided doesn't work. I mean, it works (for making the forum wider), but it doesn't solve my problem (the big gap between user info and text).

I found a way to do it.
Code:
div.postprofile{
  width: 13%;
border-radius: 7px;
}
div.postbody{
width: 86%;
}
If anyone wants to use this code, keep in mind that there has to be a 1% difference between div.postprofile width and divpostbody width. I tried to make div.postbody width 87%, but there is a problem when I do that.

Sorry if my english is wrong. This topic can be closed/marked as solved.

Thank you.

kitu_gudu
New Member

Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: Problem after making forum wider using CSS

Post by Jophy on August 9th 2012, 4:17 pm

Topic Solved & Locked

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

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