Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Not Solved [How To?] How i can set white background and change width of page
#11
Not Solved
(05-08-2018, 08:15 AM)PT82 Wrote: I try this, thanks :-) But it would be better for me to know the css code for editing.

I tested it, but it's not what I wanted.  I need simple code to make it this white border (wrapper) thats all.

Code:
#container {
    background: #FAFAFA url('images/body-bg.png') top left repeat;
    color: #333;
    text-align: left;
    line-height: 1.4;
    margin: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

/** Wrap Start **/

#mainwrap {
    background-color: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 15px 15px;
    margin: auto auto;
    width: 970px;
    min-width: 970px;
    max-width: 1500px;
}

.wrapper {
    width: 940px;
    min-width: 940px;
    max-width: 1470px;
    margin: auto auto;
}
 Adding

Code:
        <div id="mainwrap" class="mainwrap">
Above:

Code:
        <div id="content">
            <div class="wrapper">

With further tweaking, Etc etc..., should get you closer to what you want
MyBB Themes Team - Making more professional themes by the hour. (Retired)
Reply
#12
Not Solved
Thanks, but where i must add this ?


Code:
<div id="mainwrap" class="mainwrap">



Code:
<div id="content">
           <div class="wrapper">
Reply
#13
Not Solved
Code:
#container {
text-align: left;
margin: 0;
min-width: 990px;
color: #000;
}


.wrapper {
/*width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;*/
  width: 960px !important;
}


#content > .wrapper {
   background: #fff;
   padding: 20px 40px;
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
}

@media only screen and (max-width:1065px) {
#content > .wrapper
{
   padding: 20px 5px;
}
.welcome {
    font-size: 10px;
}
Reply
#14
Not Solved
(05-13-2018, 06:31 AM)PT82 Wrote: Thanks, but where i must add this ?


Code:
<div id="mainwrap" class="mainwrap">



Code:
<div id="content">
           <div class="wrapper">

In header template find:
Code:
{$pm_notice}

Directly above you will find:
Code:
<div id="content">
          <div class="wrapper">

That is where you add this before content div

Code:
<div id="mainwrap" class="mainwrap">



You will then need to close your mainwrap div in the footer template

In footer template find:

Code:
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}
</div>


Add after:


Code:
</div>


Your global.css will need to be modified like so:
Code:
#container {
   background: #FAFAFA url('images/body-bg.png') top left repeat;
   color: #333;
   text-align: left;
   line-height: 1.4;
   margin: 0;
   font-family: Tahoma, Verdana, Arial, Sans-Serif;
   font-size: 13px;
}

/** Wrap Start **/

#mainwrap {
   background-color: #fff;
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   padding: 15px 15px;
   margin: auto auto;
   width: 970px;
   min-width: 970px;
   max-width: 1500px;
}

.wrapper {
   width: 940px;
   min-width: 940px;
   max-width: 1470px;
   margin: auto auto;
}


    goes in your images directory


In css3.css add:

Code:
#footer .upper {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}


In global.css modify:


Code:
#footer .upper {
    background: #efefef;
    border: 1px solid #bbb;
    padding: 6px;
    font-size: 12px;
    overflow: hidden;
}


Example:

[Image: 29gbfx4.png]

Now if you want to move your toplinks down to the the upper panel

Find in global.css:

Code:
#logo ul.top_links {
    font-weight: bold;
    text-align: right;
    margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
    background-position: 0 0;
}

#logo ul.top_links a.memberlist {
    background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
    background-position: 0 -40px;
}

#logo ul.top_links a.help {
    background-position: 0 -60px;
}

#logo ul.top_links a.portal {
    background-position: 0 -180px;
}



Replace with in global.css:


Code:
#panel .upper ul.top_links {
  font-weight: bold;
  text-align: right;
  margin: 0px 5px -20px 0;
}

#panel .upper ul.top_links a.search {
  background-position: 0 0;
}

#panel .upper ul.top_links a.memberlist {
  background-position: 0 -20px;
}

#panel .upper ul.top_links a.calendar {
  background-position: 0 -40px;
}

#panel .upper ul.top_links a.help {
  background-position: 0 -60px;
}

#panel .upper ul.top_links a.portal {
  background-position: 0 -180px;
}


In header template find and remove:


Code:
                    <ul class="menu top_links">
                        {$menu_portal}
                        {$menu_search}
                        {$menu_memberlist}
                        {$menu_calendar}
                        <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
                    </ul>


Find in header template:


Code:
            <div id="panel">
                <div class="upper">
                    <div class="wrapper">


Add after:


Code:
                        <ul class="menu top_links">
                        {$menu_search}
                        {$menu_memberlist}
                        {$menu_calendar}
                        <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
                    </ul>


Find in header template and remove:

Code:
                        {$quicksearch}


Now find in header template:
Code:
                <div id="logo">
                <div class="wrapper">



Add after:

Code:
                        {$quicksearch}


Example:

[Image: 34r6frm.png]



Okay, so final thing is to clean up the quicksearch we moved earlier...

In header_quicksearch template replace all with:

PHP Code:
                        <form action="{$mybb->settings['bburl']}/search.php" method="post">
                        <
fieldset id="search">
 
                        <input name="keywords" type="text" class="textbox" placeholder="Search Forums..." />
 
                          <input value="" type="submit" class="search_icon" />
                            <
input type="hidden" name="action" value="do_search" />
                            <
input type="hidden" name="postthread" value="1" />
                        </
fieldset>
                        </
form

Find in global.css:

Code:
#search {
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    vertical-align: middle;
}

#search input.button,
#search input.textbox {
    border-color: #000;
}

#search input.button {
    background: #0066a2 url(images/thead.png) top left repeat-x;
    color: #fff;
}

#search input {
    margin: -3px 0;
}

Replace with:

Code:
#search {
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  vertical-align: middle;
}

.search_icon {
 background: url('images/search.png') no-repeat 4px 4px;
 width: 24px;
 height: 24px;
 margin: 0;
 margin-left: -28px;
 padding: 0;
 border: 0;
 cursor: pointer;
}

.search_icon:hover {
     background-position: 4px -20px;
}

#search input.textbox {
  border-color: #A5A5A5;
  margin: -3px 0;
  border-radius: 3px;
  width: 200px;
  line-height: 20px;
}

#search input.button {
}

#search input {
}

Add to images directory:

   


Example:
[Image: mcccuq.png]



NOTE: If you are having difficulty with these directions you can try installing this theme with the directions provided in this thread already applied


.zip   Comm.zip (Size: 165.09 KB / Downloads: 11) * note: currently there are three theme xml files provided in the download. One that is without "mybb like" bottom footer links and one with "mybb like" bottom footer links and then one with both "mybb like" top and bottom links

Example of one of the included theme variants in the download file this one in preview being with both 'mybb like" top and bottom links

[Image: smpttt.png]
MyBB Themes Team - Making more professional themes by the hour. (Retired)
Reply
#15
Not Solved
Thank you vintagedaddyo, i must try it, if is this same what i want.

[Image: dTaCBcP.jpg]
Reply
#16
Not Solved
..
Reply
#17
Not Solved
Set background color to ffffff in body, search for #container, change width and background to your need (if I understood your q right)
Perhaps changing the .wrapper will do it
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)