Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Zmiana szerokości headeru

Założony przez  aycrash.

14.08.2015, 15:06 (Ten post był ostatnio modyfikowany: 14.08.2015, 16:43 przez aycrash.)
#1
wersja skryptu MyBB: 1.8
adres forum: www.aykrasz.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam, jak zrobić mniejszą szerokośc tego slideru co jest na moim forum?
header
<div id="header" class="clearfix">>
    <div class="wrapper">
        <div class="logo">
            <img src="images/xstyled/logo.png" alt="XSTYLED Logo" />
        </div><div class="description"><span class="special">X</span>STYLED - MyBB Design Community</div>
        <div class="menu">
            <ul>
                <li><a href="">Home</a></li>
                <li class="selector"><a href="forum/index.php">Community</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

<div id="user" class="clearfix">
    <div class="wrapper clearfix">
        <div class="news">
            <div class="announcements"><i title="Announcements" style="font-size: 16px;" class="fa fa-microphone fa-fw"></i></div>
            <div class="automsg">
                <ul>
                    <li class="quotes">Welcome to <span style="font-weight: 700;"><span class="special">X</span>STYLED</span>, hope you enjoy the community!</li>
                    <li class="quotes">If you read this, ignore this message.</li>
                </ul>
            </div>
        </div>
        <div class="member">
            {$welcomeblock}
        </div>
    </div>
</div>

<div id="fullimg">
    <div class="wrapper">
        <ul class="bxslider">
          <li><img src="images/xstyled/slider/1.png" /></li>
          <li><img src="images/xstyled/slider/2.png" /></li>
          <li><img src="images/xstyled/slider/3.png" /></li>
        </ul>
    </div>
</div>

<div id="nav" class="clearfix">
    <div class="wrapper">
        <navigation>
        <div class="quicksearch">
            <form method="post" action="{$mybb->settings['bburl']}/search.php">
                <input type="hidden" name="action" value="do_search" />
                <input type="hidden" name="postthread" value="1" />
                <input type="hidden" name="forums" value="all" />
                <input type="hidden" name="showresults" value="threads" />
                <input class="searchbox" type="text" name="keywords" value="Enter your search..." />
                <input class="searchbutton" type="submit" value="&#xf002" title="Search now" />
            </form>
        </div>
    </div>
</div>
    
<div id="container">
    <div id="content">
        <div class="wrapper">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            {$awaitingusers}

wrapper z global.css na wszleki wypadek
.wrapper {
    width: 1024px;
    min-width: 1024px;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

Oraz cały .css
:focus {
    outline: none;
}

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px #FAFAFA inset;
    -webkit-text-fill-color: #767676;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #FAFAFA inset;
    -webkit-text-fill-color: #767676;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin-top: -2px;
    margin-bottom: -2px;
}

/***************************************************************************/

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
}

/***************************************************************************/

.tipsy {
    position: absolute;
    padding: 5px;
    z-index: 100000;
}

.tipsy-inner {
    font-family: 'Titillium Web', sans-serif;
    font-size: 12px;
    color: #FAFAFA;
    max-width: 200px;
    padding: 5px 8px;
    text-align: center;
      border-radius: 3px;
    background: #2C343D;
}

.tipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: 5px dashed #2C343D;
}
  
.tipsy-arrow-n {
    border-bottom-color: #2C343D;
}

.tipsy-arrow-s {
    border-top-color: #2C343D;
}

.tipsy-arrow-e {
    border-left-color: #2C343D;
}

.tipsy-arrow-w {
    border-right-color: #2C343D;
}
  
.tipsy-n .tipsy-arrow {
    top: 0px; left: 50%;
    margin-left: -5px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-e .tipsy-arrow {
    right: 0;
    top: 50%;
    margin-top: -5px;
    border-left-style: solid;
    border-right: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.tipsy-w .tipsy-arrow {
    left: 0;
    top: 50%;
    margin-top: -5px;
    border-right-style: solid;
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/***************************************************************************/

#header {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 65px;
    line-height: 23px;
    min-height: 65px;
    max-height: 65px;
    padding: 0;
    margin: 0;
    background: #526980;
    align: center;
}

.logo {
    float: left;
    margin-top: 16px;
}

.description {
    font-size: 16px;
    font-weight: 700;
    color: #FAFAFA;
    opacity: 0;
    margin-top: 21px;
    position: relative;
    float: left;
    transition: all 0.3s ease;
}

.logo:hover + .description {
    opacity: 1;
    margin-left: 15px;
    transition: all 0.3s ease;
}

.special {
    color: #00d9a3;    
}

.specialdesc {
    font-size: 14px;
    font-style: italic;
    text-align: right;
    color: #969696;
}

.menu {
    float: right;
    margin-top: 21px;
}

.menu ul {
    margin: 0;
    padding: 0;
}

.menu ul li {
    list-style: none;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color:            #E6E8FA;
    padding: 0 0 0 40px;
}

.menu ul li a:link, .menu ul li a:visited {
    color:            #E6E8FA;
    transition: all 0.3s ease;

    
}

.menu ul li a:hover, .menu ul li a:active {
    color:      #66ccff;
    transition: all 0.3s ease;
font-size: 20px;

}

.menu ul li.selector a:link, .menu ul li.selector a:visited, .menu ul li.selector a:hover, .menu ul li.selector a:active {
    color: #E6E8FA;
    position: relative;
    text-decoration: none;
        font-size: 16px;
}

.menu ul > li.selector > a:before {
    border-bottom: 10px solid #F2F2F2;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: "";
    left: 50%;
    margin: 0 0 0 -10px;
    position: absolute;
    top: 36px;
    padding: 0;
    color:      #66ccff;

}

#user {
    
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 55px;
    line-height: 55px;
    background: rgb(242,242,242); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(242,242,242,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(242,242,242,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(242,242,242,1) 0%,rgba(239,239,239,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(242,242,242,1) 0%,rgba(239,239,239,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(242,242,242,1) 0%,rgba(239,239,239,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
}

.member {
    float: right;
    text-align: right;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.umenu {
    float: right;
    margin: 0;
    padding: 0;
}

.umenu ul {
    margin: 0;
    padding: 0;
}

.umenu ul li {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    color: #767676;
    list-style: none;
    display: inline-block;
    margin: 0 0 0 5px;
    padding: 0;
    box-sizing: border-box;
}

.umenu ul li a:link, .umenu ul li a:visited {
    margin: 0;
    padding: 0;
    color: #C5C5C5;
    transition: all 0.3s ease;
}

.umenu ul li a:hover, .umenu ul li a:active {
    margin: 0;
    padding: 0;
    color: #767676;
    transition: all 0.3s ease;
}

.umenu ul li a img {
    border: none;
}

.pms {
    background: #00BA8C;
    color: #FAFAFA;
    font-size: 10px;
    padding: 1px 5px 1px 4px;
    position: absolute;
    display: inline-block;
    border-radius: 4px;
    top: 81px;
    line-height: 13px;
    margin: -3px -7px -7px -7px;
}

.quicksearch {
    float: right;
      margin-top: 10px;
    padding: 0;
    border-bottom: 2px solid #FAFAFA;
    background: none;
    height: 32px;
    border-radius: 9px;
}

.searchbox {
    font-family: 'Titillium Web', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: 1px none;
    height: 30px;
    padding: 0 10px;
    margin: 0;
    color: #FAFAFA;
    background: none;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.searchbutton {
    cursor: pointer;
    font-family: FontAwesome;
    background: none;
    border: 1px none;
    font-size: 14px;
    color: #FAFAFA;
    opacity: 0.5;
    padding: 7px 8px;
    transition: all 0.3s ease;
}

.searchbutton:hover {
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s ease;
}

#nav {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 55px;
    padding: 0;
    margin: 0;
    box-shadow: -5px -5px 15px #182019;
    
}

.navspace {
    color: #00936F;
}

.avatar {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    float: left;
    margin: 10px 0;
    border-radius: 4px;
}

.panelavatar {
    height: 40px;
    width: 40px;
    background: url("images/xstyled/default_avatar.png") no-repeat;
    background-size: 100% auto;
    border: none;
    box-shadow: 0 0 5px 0 #BDBDBD;
}

.panelavatar img {
    height: 40px;
    width: 40px;
    margin: 0;
    padding: 0;
}

.panelavatar img[src=""] {
    display: none;
    margin: 0;
    padding: 0;
}

.userinfo {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    float: right;
    margin: 10px 0 10px 10px;
    text-align: left;
}

.userunique, .userunique:hover {
    margin: 0;
    padding: 0;
    color: #00BA8C !important;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.news {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    float: left;
}

.announcements {
    width: 22px;
    font-size: 14px;
    text-align: left;
    float: left;
    margin: 20px 2px 0 0;
    padding: 0;
    color: #767676;
}

.automsg {
    width: 415px;
    padding: 0;
    line-height: 27px;
}

.automsg ul {
    padding: 0;
    margin: 14px 0 0 0;
}

.quotes {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    color: #767676;
    list-style: none;
    display: none;
    text-align: left;
}

#fullimg {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 300px;
}

.loginbutton a:link, .loginbutton a:visited {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FAFAFA;
    background: #B2B2B2;
    border-bottom: 3px solid #9D9D9D;
    border-radius: 4px;
    padding: 5px 16px;
    transition: all 0.3s ease;
}

.loginbutton a:hover, .loginbutton a:active {
    background: #cbcbcb;
    border-bottom: 3px solid #B2B2B2;
    transition: all 0.3s ease;
}

.registerbutton a:link, .registerbutton a:visited {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FAFAFA;
    background: #00BA8C;
    border-bottom: 3px solid #00a078;
    border-radius: 4px;
    padding: 5px 16px;
    transition: all 0.3s ease;
}

.registerbutton a:hover, .registerbutton a:active {
    background: #00d29e;
    border-bottom: 3px solid #00BA8C;
    transition: all 0.3s ease;
}

.loginhead {
    font-family: 'Titillium Web', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #FAFAFA;
    padding: 0 10px;
    background: #00BA8C;
    text-align: left;
    border-radius: 4px 4px 0px 0px;
}

#logincontent {
    width: 235px;
    min-width: 235px;
    max-width: 235px;
    text-align: center;
    margin: auto;
    padding: 10px;
    box-sizing: border-box;
}

.iconbox {
    width: 17px;
    min-width: 17px;
    max-width: 17px;
    float: left;
    background: #FAFAFA;
    color: #767676;
    border-radius: 4px 0px 0px 4px;
    border-bottom: 1px solid #B2B2B2;
    border-top: 1px solid #B2B2B2;
    border-left: 1px solid #B2B2B2;
    border-right: 1px none;
    padding: 8px 8px 9px 8px;
    margin: 0;
}

.logbox {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    width: 164px;
    min-width: 164px;
    max-width: 164px;
    height: 21px;
    min-height: 21px;
    max-height: 21px;
    float: left;
    background: #FAFAFA;
    color: #767676;
    border-radius: 0px 4px 4px 0px;
    border-bottom: 1px solid #B2B2B2;
    border-top: 1px solid #B2B2B2;
    border-left: 1px none;
    border-right: 1px solid #B2B2B2;
    padding: 5px 8px 5px 8px;
    margin: 0;
}

.bigloginbutton {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FAFAFA;
    background: #B2B2B2;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #9D9D9D;
    border-radius: 4px;
    padding: 5px 55px;
    transition: all 0.3s ease;
}

.bigloginbutton:hover {
    cursor: pointer;
    background: #cbcbcb;
    border-bottom: 3px solid #B2B2B2;
    transition: all 0.3s ease;
}

.subul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.subul li {
    width: 170px;
    float: left;
    margin-left: -5px;
}

#footer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 195px;
    padding: 10px 0 0 0;
    margin: 0;
    background: #2C343D;
    position: relative;
}

#footer:after {
    position: absolute;
    border-bottom: 30px solid #F2F2F2;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    content: "";
    left: 48%;
    top: 175px;
}

.about {
    width: 375px;
    min-width: 375px;
    max-width: 375px;
    float: left;
    text-align: left;
}

.title {
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #FAFAFA;
    padding: 0 0 10px 0;
    margin: 0 0 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.effect {
    padding: 0 5px 9px 0;
    border-bottom: 3px solid #00d9a3;    
}

.effect2 {
    padding: 0 5px 7px 0;
    border-bottom: 3px solid #9396B3;
}
.effect2:hover {
    padding: 0 120px 7px 0;
    border-bottom: 3px solid #577591;
    transition: all 0.7s ease;
}

.about p {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    color: #B8B8B8;
}

.about:first-child p {
    margin-top: 15px;
}

.quicklinks {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    float: right;
    text-align: left;
}

.nothreads {
    font-size: 14px;
    font-style: italic;    
    text-align: left;
    color: #BDBDBD;
}

.latestthreads a:link, .latestthreads a:visited, .latestthreads a:hover, .latestthreads a:active {
    color: #00BA8C;
    text-decoration: none;
}

.trow3 {
    float: left;
    line-height: 17px;
    margin-bottom: 10px;
    color: #B8B8B8;
}

.trow4 {
    line-height: 17px;
    margin-bottom: 10px;
    padding: 10px 0;
    color: #B8B8B8;
}

#copyright {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 55px;
    line-height: 55px;
    background: rgb(242,242,242); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(242,242,242,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(242,242,242,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(242,242,242,1) 0%,rgba(239,239,239,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(242,242,242,1) 0%,rgba(239,239,239,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(242,242,242,1) 0%,rgba(239,239,239,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
}

.design {
    float: left;
    color: #767676;
}

.mybb {
    float: right;
    color: #767676;
}

.mybb a:link, .mybb a:visited, .mybb a:hover, .mybb a:active {
    color: #00BA8C;
    font-weight: 700;
    text-decoration: none;
}

.joinus a:link, .joinus a:visited, .joinus a:hover, .joinus a:active {
    color: #00BA8C;
    font-weight: 700;
    text-decoration: none;
}

.pagination2 a:link, .pagination2 a:visited {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FAFAFA;
    background: #B2B2B2;
    border-bottom: 3px solid #9D9D9D;
    border-radius: 4px;
    padding: 0 8px;
    transition: all 0.3s ease;
}

.pagination2 a:hover, .pagination2 a:active {
    background: #00d29e;
    border-bottom: 3px solid #00BA8C;
    transition: all 0.3s ease;
}

.boldie {
    font-weight: 700;    
}

.newthbutton a:link, .newthbutton a:visited {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FAFAFA;
    background: #00BA8C;
    border-bottom: 3px solid #00a179;
    border-radius: 4px;
    padding: 12px 18px;
    transition: all 0.3s ease;
}

.newthbutton a:hover, .newthbutton a:active {
    background: #00d29e;
    border-bottom: 3px solid #00BA8C;
    transition: all 0.3s ease;
}

#pbcontainer {
    width: 1024px;
    min-width: 1024px;
    max-width: 1024px;
    height: 335px;
    min-height: 335px;
    margin: 20px 0;
    padding: 0;
    border: 1px solid #DFDFDF;
    box-sizing: content-box;
    border-radius: 4px;
}

.pbone {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    height: 335px;
    min-height: 335px;
    float: left;
    text-align: center;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px 0px 0px 4px;
    
    background: #FAFAFA;
}

.pbtwo {
    width: 804px;
    min-width: 804px;
    max-width: 804px;
    height: 335px;
    min-height: 335px;
    float: right;
    text-align: left;
    background: #DFDFDF;
    color: #38474C;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0px 4px 4px 0px;
}

.userbuttons {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    text-align: center;
    margin: 10px auto 0 auto;
    padding: 0;
}

.ubutton a:link, .ubutton a:visited {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FAFAFA;
    background: #B2B2B2;
    border-bottom: 3px solid #9D9D9D;
    border-radius: 4px;
    margin: 0;
    padding: 0 4px 1px 3px;
    transition: all 0.3s ease;
}

.ubutton a:hover, .ubutton a:active {
    background: #00d29e;
    border-bottom: 3px solid #00BA8C;
    transition: all 0.3s ease;
}
Próbowałem kilkukrotnie samemu, lecz zmiana wartości powoduje zmiane położenia zawartości slideru albo rozsunięcie się forum.
Link już jest, podczas edytowania musiałem przypadkiem usunąc, czekam na jakąś pomoc lub wskazówke.
Matslom napisał 14.08.2015, 16:06:
Kasujesz link do MyBB PL? Nie licz na nasze wsparcie techniczne!
21.08.2015, 21:15
#2
No niby dobrze, ale dałoby ten slider przesunąć so tego białego paska? bo widać tło
21.08.2015, 21:33
#3
global.css:144 → #content usuń padding.
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.



Użytkownicy przeglądający ten wątek:

1 gości