Cum Fac Header-Ul Sa Arate Ca Pe Redzmax.com?

MikyBG · September 11, 2014

Salutare, sunt incepator in astea ale IPB-ului, si as vrea sa ma ajutati cu ceva !

Cum pot sa centrez banner_bg ca la ei (nu sa fie doar pe centru, dar sa fie intins pe ecran, pe laptop e la fel, e redimensionabil automat vad eu) si cum pot pune butoanele alea cu ACASA/MEMBERS ca acolo ?

Va rog sa ma ajutati, ma descurc in general la IPB, la chestiile mai usoare, dar aici m-am blocat urat

Forumul pe care lucrez: http://kosminblog.hol.es/testdemosite/upload/ (nu o considerati reclama, e doar de teste)

Poza redzmax.com (nu o considerati reclama) (asa as vrea sa arate si la mine):

Multumesc celor care ma vor ajuta !

Alta idee care mi-a venit daca aveti cum sa imi dati tema (Se cheama Redzmax v4.0) si dupa o modific.

+Vlăduț Rădulescu · September 11, 2014

Caută în CSS > ipb_styles.css cu CTRL + F #branding și vei găsi ceva de genul position: relative. În loc de relative, pui center. Atâta tot.

Bogdan BGd · September 11, 2014

Depinde cat de mare e imaginea.

Pentru header intra in ips_styles.css si cauta #branding {

Acolo o sa gasesti asa:

#branding {
background: url('{style_images_url}/banner_bg.png') repeat-x 0 0;
height: 92px;
}

Schimba in

#branding { 
background: url('{style_images_url}/banner_bg.png') repeat-x 0 0;        
        height: marimea pe care o vreipx;
        background-repeat: no-repeat;
        background-position: center;                                                                                                                                                                                }

Pentru butoane :

MikyBG · September 11, 2014

Mda,

Asa e la mine, o idee de rezolvare ar fi sa trec la tema ecila si sa stau sa o modific bine (nu doar o iau, o pun si gata, am tema

Va dau ips_styles, il modificati, si mi-l dati inapoi ?

~~Kennzo~~ · September 11, 2014

Existã suport de editat teme postat de Courage...

MikyBG · September 11, 2014

Mda, si cum pot da de Courage ? Sau exista vre-un "skin stealer" pentru ipb ?

Sper sa ma poata ajuta cineva.

~~Kennzo~~ · September 11, 2014

Aici:

Dum Nyezo · September 11, 2014

Za header de pe ecila are 2 parti:

1: Imaginea in sine

#branding {
height: 328px;
position: relative;
background: url("http://s4.postimg.org/71bbzmsnh/Untitled_3.png") repeat-x 50% 0;
}

2. Meniul

/* Meniu CSS */

.ecila-menu {
    list-style: none;
    margin: 0 auto;
    padding-top: 235px;
    width:1236px;
    text-align: center;
    background: transparent;
    height: 100px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.ecila-menu li {
    display: inline-block;

}
.ecila-menu li a {
    display: block;
    text-decoration: none;
    padding: 12px 20px;
    text-align: center;
    color: #A2A2A2;
}


.ecila-menu li a i {
    display: block;
    font-size: 30px;
}
.ecila-menu li a strong {
    display: block;
    text-transform: uppercase;
}
.ecila-menu li a small {
    display: block;
    font-size: 10px;
}

.ecila-menu li a i, .ecila-menu li a strong, .ecila-menu li a small {
    position: relative;

    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
}
.ecila-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.ecila-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.ecila-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.ecila-menu li:hover > a {
    color: #fff;
}
.ecila-menu li a.active {
    position: relative;
    color: #fff;
    border:0;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    margin-top: -4px;
}
.ecila-menu li a.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 45%;
    border-top: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}



.ecila-menu li ul,
.ecila-menu li ul li ul {
    position: absolute;
    height: auto;
    min-width: 200px;
    padding: 0;
    margin: 0;
    margin-left:150px;
    background: #FFF;
    border-top: 4px solid #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    top: 130px;
    z-index: 1000;
}
.ecila-menu li ul:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 23%;
    border-bottom: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.ecila-menu li:hover > ul,
.ecila-menu li ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 100px;
}
.ecila-menu li ul li {
    float: none;
}
.ecila-menu li ul li a {
    padding: 10px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #EEE;
}
.ecila-menu li ul li a i {
    font-size: 16px;
    display: inline-block;
    margin: 0 10px 0 0;
}
.ecila-menu li ul li ul {
    left: 230px;
    top: 0;
    border: 0;
    border-left: 4px solid #fff;
}
.ecila-menu li ul li ul:before {
    content: "";
    position: absolute;
    top: 15px;
    left: -14px;
    border-right: 5px solid #fff;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
}
.ecila-menu li ul li:hover > ul {
    top: 0px;
    left: 200px;
}



.ecila-menu li.float {
    float: right;
}
.ecila-menu li a.search {
    padding: 29px 20px 30px 10px;
}
.ecila-menu li a.search i {
    margin: 0;
    display: inline-block;
    font-size: 18px;
}
.ecila-menu li a.search input {
    border: 1px solid #EEE;
    padding: 10px;
    background: #FFF;
    outline: none;
    color: #777;
}
.ecila-menu li a.search button {
    border: 1px solid #fff;
    padding: 10px;
    background: #fff;
    outline: none;
    color: #FFF;
    ;
}
.ecila-menu li a.search input:focus {
    border: 1px solid #fff;
}


.search-mobile {
    display:none !important;
    background:#fff;
    border-left:1px solid #fff;
    border-radius:0 3px 3px 0;
}
.search-mobile i {
    color:#FFF;
    margin:0 !important;
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .ecila-menu li a.search input {
        width:100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .ecila-menu {
        height: 85px;
    }
    .ecila-menu li a {
        padding: 12px;
    }
    .ecila-menu li a i {
        font-size: 22px;
    }
    .ecila-menu li a strong {
        font-size: 12px;
    }
    .ecila-menu li a small {
        font-size: 10px;
    }
    .ecila-menu li a.search {
        display:none;
    }
    .search-mobile {
        display:block !important;
        margin: 20px;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
    }
    .ecila-menu li:hover > ul {
        top:85px;
        min-width:180px;
    }
    .ecila-menu li ul li > ul {
        min-width:150px;
        left:200px;
        top:0;
    }
    .ecila-menu li ul li:hover > ul {
        min-width:150px;
        left:180px;
        top:0;
    }
    .ecila-menu li ul li ul li ul {
        min-width:150px;
        left:25px !important;
        top:54px;
        border:0;
        border-top:3px solid #fff;
    }
    .ecila-menu li ul li ul li:hover ul {
        top:35px;
    }
    .ecila-menu li ul li ul li ul:before {
        border:0;
        border-bottom:5px solid #fff;
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        left:10%;
        top:-8px;
    }
    .ecila-menu li:hover ul a {
        font-size:12px;
    }
    .ecila-menu li:hover ul a i {
        font-size:14px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .ecila-menu {
        height: 42px;
        position: relative;
    }
    .ecila-menu li a {
        padding: 12px 17.7px;
    }
    .ecila-menu li a strong, .ecila-menu li a small, .ecila-menu li a.search {
        display: none;
    }
    .ecila-menu li a i {
        margin: 0;
        font-size: 18px;
    }
    .ecila-menu li {
        position: static;
    }
    .ecila-menu li ul {
        min-width: 100%;
        left: 0;
        top: 50px;
    }
    .ecila-menu li:hover > ul {
        top: 42px;
    }
    .ecila-menu li > ul:before {
        border:0;
    }
    .ecila-menu li ul > li {
        position: relative;
    }
    .ecila-menu li ul li:hover > ul {
        left:34px;
    }
    .ecila-menu li a {
        position: relative;
        font-size:12px;
    }
    .ecila-menu li a:hover strong,.ecila-menu li a.active strong {
        display:block;
        font-size:10px;
        padding:3px 0;
        position:absolute;
        top:-20px;
        left:0;
        background: #fff;
        color:#FFF;
        min-width:100%;
        text-transform:lowercase;
        font-weight:normal;
    }
    .ecila-menu li a.active:before{
        left: 40%;
    }
    .search-mobile {
        display:block !important;
    }

    .ecila-menu li ul li > ul {
        min-width:200px;
        left:200px;
    }
    .ecila-menu li ul li:hover ul {
        left:180px;
    }
    .ecila-menu li ul li ul:before {
        left:-9px;
    }
    .ecila-menu li ul li ul li ul {
        min-width:200px;
        border:0;
        border-top:3px solid #fff;
        left:25px !important;
        top: 45px;
    }
    .ecila-menu li ul li ul li:hover ul {
        top:40px;
    }
    .ecila-menu li ul li ul li ul:before {
        border:0;
        border-bottom:5px solid #fff;
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        left:10%;
        top:-8px;
    }
}

@media only screen and (max-width: 479px) {
    .ecila-menu {
        height: 42px;
        position: relative;
    }
    .ecila-menu li a strong, .ecila-menu li a small, .ecila-menu li a.search {
        display: none;
    }
    .ecila-menu li a {
        padding: 12px 13.8px;
        font-size:12px;
    }
    .ecila-menu li a i {
        margin: 0;
        font-size: 18px;
    }
    .ecila-menu li {
        position: static;
    }
    .ecila-menu li ul {
        min-width: 100%;
        left: 0;
        top: 50px;
    }
    .ecila-menu li:hover > ul {
        top: 42px;
    }
    .ecila-menu li > ul:before {
        border:0;
    }
    .ecila-menu li ul > li {
        position: relative;
    }
    .ecila-menu li ul li:hover > ul {
        left:34px;
    }
    .ecila-menu li a {
        position: relative;
    }
    .ecila-menu li a:hover strong,.ecila-menu li a.active strong {
        display:block;
        font-size:10px;
        padding:3px 0;
        position:absolute;
        top:-20px;
        left:0;
        background:#fff;
        color:#FFF;
        min-width:100%;
        text-transform:lowercase;
        font-weight:normal;
    }
    .ecila-menu li a.active:before{
        left: 40%;
    }

    .ecila-menu li ul li > ul {
        min-width:150px;
        left:160px;
    }
    .ecila-menu li ul li:hover ul {
        left:120px;
    }
    .ecila-menu li ul li ul:before {
        left:-9px;
    }
    .ecila-menu li ul li ul li ul {
        min-width:160px;
        left:25px !important;
        top:39px;
        border:0;
        border-top:3px solid #fff;
    }
    .ecila-menu li ul li ul li:hover ul {
        top:39px;
    }
    .ecila-menu li ul li ul li ul:before {
        border:0;
        border-bottom:5px solid #fff;
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        left:10%;
        top:-8px;
    }

}

/* HTML */

<div>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ul class="ecila-menu">
<li>
				<a href="http://ecila.ro/">
<i class="fa fa-home"></i>
					<strong>Acasă</strong>
					<small>Prima pagină</small>
				</a>
			</li>
			<li>
				<a href="http://ecila.ro/forum/">
<i class="fa fa-list"></i>
					<strong>Forum</strong>
					<small>Forum Board</small>
				</a>
			</li>
			<li>
				<a href="http://ecila.ro/forum/index.php?/members/">
<i class="fa fa-users"></i>
					<strong>Utilizatori</strong>
					<small>Listă utilizatori</small>
				</a>
			</li>
<li>
				<a href="http://ecila.ro/forum/index.php?/forum/6047-aplic%C4%83-pentru-grad/">
<i class="fa fa-graduation-cap"></i>
					<strong>Cereri grad</strong>
					<small> Te așteptăm cu o cerere.</small>
				</a>
			</li>

<li>
				<a href="http://ecila.ro/forum/index.php?/forum/6-afiliere-server/">
<i class="fa fa-check-square"></i>
					<strong>Afiliere</strong>
					<small>Afiliere server</small>
				</a>
			</li>
<li>
				<a href="http://ecila.ro/forum/index.php?/forum/10-ecila-online/">
<i class="fa fa-rocket"></i>
					<strong>Servere</strong>
					<small>Listă servere.</small>
				</a>
			</li>
		</ul>
</div>

MikyBG · September 11, 2014

Dum, si pt. redzmax o idee pt. portiunea asta ?:

Si daca imi raspunzi, ce fac? Dau copy la ce ai scris in ipb_styles.css in zona potrivita ?

Dum Nyezo · September 11, 2014

In ipb_styles.css la sfarsit:

/* Meniu CSS */

.ecila-menu {
    list-style: none;
    margin: 0 auto;
    padding-top: 235px;
    width:1236px;
    text-align: center;
    background: transparent;
    height: 100px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.ecila-menu li {
    display: inline-block;

}
.ecila-menu li a {
    display: block;
    text-decoration: none;
    padding: 12px 20px;
    text-align: center;
    color: #A2A2A2;
}


.ecila-menu li a i {
    display: block;
    font-size: 30px;
}
.ecila-menu li a strong {
    display: block;
    text-transform: uppercase;
}
.ecila-menu li a small {
    display: block;
    font-size: 10px;
}

.ecila-menu li a i, .ecila-menu li a strong, .ecila-menu li a small {
    position: relative;

    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
}
.ecila-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.ecila-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.ecila-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.ecila-menu li:hover > a {
    color: #fff;
}
.ecila-menu li a.active {
    position: relative;
    color: #fff;
    border:0;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    margin-top: -4px;
}
.ecila-menu li a.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 45%;
    border-top: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}



.ecila-menu li ul,
.ecila-menu li ul li ul {
    position: absolute;
    height: auto;
    min-width: 200px;
    padding: 0;
    margin: 0;
    margin-left:150px;
    background: #FFF;
    border-top: 4px solid #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    top: 130px;
    z-index: 1000;
}
.ecila-menu li ul:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 23%;
    border-bottom: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.ecila-menu li:hover > ul,
.ecila-menu li ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 100px;
}
.ecila-menu li ul li {
    float: none;
}
.ecila-menu li ul li a {
    padding: 10px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #EEE;
}
.ecila-menu li ul li a i {
    font-size: 16px;
    display: inline-block;
    margin: 0 10px 0 0;
}
.ecila-menu li ul li ul {
    left: 230px;
    top: 0;
    border: 0;
    border-left: 4px solid #fff;
}
.ecila-menu li ul li ul:before {
    content: "";
    position: absolute;
    top: 15px;
    left: -14px;
    border-right: 5px solid #fff;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
}
.ecila-menu li ul li:hover > ul {
    top: 0px;
    left: 200px;
}



.ecila-menu li.float {
    float: right;
}
.ecila-menu li a.search {
    padding: 29px 20px 30px 10px;
}
.ecila-menu li a.search i {
    margin: 0;
    display: inline-block;
    font-size: 18px;
}
.ecila-menu li a.search input {
    border: 1px solid #EEE;
    padding: 10px;
    background: #FFF;
    outline: none;
    color: #777;
}
.ecila-menu li a.search button {
    border: 1px solid #fff;
    padding: 10px;
    background: #fff;
    outline: none;
    color: #FFF;
    ;
}
.ecila-menu li a.search input:focus {
    border: 1px solid #fff;
}


.search-mobile {
    display:none !important;
    background:#fff;
    border-left:1px solid #fff;
    border-radius:0 3px 3px 0;
}
.search-mobile i {
    color:#FFF;
    margin:0 !important;
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .ecila-menu li a.search input {
        width:100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .ecila-menu {
        height: 85px;
    }
    .ecila-menu li a {
        padding: 12px;
    }
    .ecila-menu li a i {
        font-size: 22px;
    }
    .ecila-menu li a strong {
        font-size: 12px;
    }
    .ecila-menu li a small {
        font-size: 10px;
    }
    .ecila-menu li a.search {
        display:none;
    }
    .search-mobile {
        display:block !important;
        margin: 20px;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
    }
    .ecila-menu li:hover > ul {
        top:85px;
        min-width:180px;
    }
    .ecila-menu li ul li > ul {
        min-width:150px;
        left:200px;
        top:0;
    }
    .ecila-menu li ul li:hover > ul {
        min-width:150px;
        left:180px;
        top:0;
    }
    .ecila-menu li ul li ul li ul {
        min-width:150px;
        left:25px !important;
        top:54px;
        border:0;
        border-top:3px solid #fff;
    }
    .ecila-menu li ul li ul li:hover ul {
        top:35px;
    }
    .ecila-menu li ul li ul li ul:before {
        border:0;
        border-bottom:5px solid #fff;
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        left:10%;
        top:-8px;
    }
    .ecila-menu li:hover ul a {
        font-size:12px;
    }
    .ecila-menu li:hover ul a i {
        font-size:14px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .ecila-menu {
        height: 42px;
        position: relative;
    }
    .ecila-menu li a {
        padding: 12px 17.7px;
    }
    .ecila-menu li a strong, .ecila-menu li a small, .ecila-menu li a.search {
        display: none;
    }
    .ecila-menu li a i {
        margin: 0;
        font-size: 18px;
    }
    .ecila-menu li {
        position: static;
    }
    .ecila-menu li ul {
        min-width: 100%;
        left: 0;
        top: 50px;
    }
    .ecila-menu li:hover > ul {
        top: 42px;
    }
    .ecila-menu li > ul:before {
        border:0;
    }
    .ecila-menu li ul > li {
        position: relative;
    }
    .ecila-menu li ul li:hover > ul {
        left:34px;
    }
    .ecila-menu li a {
        position: relative;
        font-size:12px;
    }
    .ecila-menu li a:hover strong,.ecila-menu li a.active strong {
        display:block;
        font-size:10px;
        padding:3px 0;
        position:absolute;
        top:-20px;
        left:0;
        background: #fff;
        color:#FFF;
        min-width:100%;
        text-transform:lowercase;
        font-weight:normal;
    }
    .ecila-menu li a.active:before{
        left: 40%;
    }
    .search-mobile {
        display:block !important;
    }

    .ecila-menu li ul li > ul {
        min-width:200px;
        left:200px;
    }
    .ecila-menu li ul li:hover ul {
        left:180px;
    }
    .ecila-menu li ul li ul:before {
        left:-9px;
    }
    .ecila-menu li ul li ul li ul {
        min-width:200px;
        border:0;
        border-top:3px solid #fff;
        left:25px !important;
        top: 45px;
    }
    .ecila-menu li ul li ul li:hover ul {
        top:40px;
    }
    .ecila-menu li ul li ul li ul:before {
        border:0;
        border-bottom:5px solid #fff;
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        left:10%;
        top:-8px;
    }
}

@media only screen and (max-width: 479px) {
    .ecila-menu {
        height: 42px;
        position: relative;
    }
    .ecila-menu li a strong, .ecila-menu li a small, .ecila-menu li a.search {
        display: none;
    }
    .ecila-menu li a {
        padding: 12px 13.8px;
        font-size:12px;
    }
    .ecila-menu li a i {
        margin: 0;
        font-size: 18px;
    }
    .ecila-menu li {
        position: static;
    }
    .ecila-menu li ul {
        min-width: 100%;
        left: 0;
        top: 50px;
    }
    .ecila-menu li:hover > ul {
        top: 42px;
    }
    .ecila-menu li > ul:before {
        border:0;
    }
    .ecila-menu li ul > li {
        position: relative;
    }
    .ecila-menu li ul li:hover > ul {
        left:34px;
    }
    .ecila-menu li a {
        position: relative;
    }
    .ecila-menu li a:hover strong,.ecila-menu li a.active strong {
        display:block;
        font-size:10px;
        padding:3px 0;
        position:absolute;
        top:-20px;
        left:0;
        background:#fff;
        color:#FFF;
        min-width:100%;
        text-transform:lowercase;
        font-weight:normal;
    }
    .ecila-menu li a.active:before{
        left: 40%;
    }

    .ecila-menu li ul li > ul {
        min-width:150px;
        left:160px;
    }
    .ecila-menu li ul li:hover ul {
        left:120px;
    }
    .ecila-menu li ul li ul:before {
        left:-9px;
    }
    .ecila-menu li ul li ul li ul {
        min-width:160px;
        left:25px !important;
        top:39px;
        border:0;
        border-top:3px solid #fff;
    }
    .ecila-menu li ul li ul li:hover ul {
        top:39px;
    }
    .ecila-menu li ul li ul li ul:before {
        border:0;
        border-bottom:5px solid #fff;
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        left:10%;
        top:-8px;
    }

}

Pe urma in globalTemplate:

/* HTML */

<div>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ul class="ecila-menu">
<li>
				<a href="http://ecila.ro/">
<i class="fa fa-home"></i>
					<strong>Acasă</strong>
					<small>Prima pagină</small>
				</a>
			</li>
			<li>
				<a href="http://ecila.ro/forum/">
<i class="fa fa-list"></i>
					<strong>Forum</strong>
					<small>Forum Board</small>
				</a>
			</li>
			<li>
				<a href="http://ecila.ro/forum/index.php?/members/">
<i class="fa fa-users"></i>
					<strong>Utilizatori</strong>
					<small>Listă utilizatori</small>
				</a>
			</li>
<li>
				<a href="http://ecila.ro/forum/index.php?/forum/6047-aplic%C4%83-pentru-grad/">
<i class="fa fa-graduation-cap"></i>
					<strong>Cereri grad</strong>
					<small> Te așteptăm cu o cerere.</small>
				</a>
			</li>

<li>
				<a href="http://ecila.ro/forum/index.php?/forum/6-afiliere-server/">
<i class="fa fa-check-square"></i>
					<strong>Afiliere</strong>
					<small>Afiliere server</small>
				</a>
			</li>
<li>
				<a href="http://ecila.ro/forum/index.php?/forum/10-ecila-online/">
<i class="fa fa-rocket"></i>
					<strong>Servere</strong>
					<small>Listă servere.</small>
				</a>
			</li>
		</ul>
</div>

unde vrei tu.

L.E: Trebuie sa editezi zona "branding" la dimensiunea de 328px sau pentru ce imagine pentru header ai tu.

gadeas · September 11, 2014

@Dum Nyezo te rog foloseste:

[spoiler][codde]Codul sau codurile[/code][/spoiler]

MikyBG · September 11, 2014

Ok, aia ca aia, dar...., la mine banner_bg nu e "latit" pe tot ecranul, ca la redz Idei cum pot face asta ? Si cumva redimensionare dupa display ? Eu pe PC am 1920x1080 si pe laptop ceva mai mic, dar la ambele nu iesa din pagina si se incadreaza. Sper in chestia asta sa ma ajutati (asta am zis si la inceput, dar m-am exprimat ca o ...)

gadeas · September 11, 2014

Ok, aia ca aia, dar...., la mine banner_bg nu e "latit" pe tot ecranul, ca la redz Idei cum pot face asta ? Si cumva redimensionare dupa display ? Eu pe PC am 1920x1080 si pe laptop ceva mai mic, dar la ambele nu iesa din pagina si se incadreaza. Sper in chestia asta sa ma ajutati (asta am zis si la inceput, dar m-am exprimat ca o ...)

Iasa din pagina pentru ca probabil ai lucrat cu marimi fixe in pixeli ( px ). Poti evita lucruri de genu daca folosesti %.

@Dum Nyezo, stiu ca codu e facut de tine, dar totusi, nu ai scris acum codu, tot copy/paste a fost in cazu asta. Deci am spus bine si am salvat situatia .

Dum Nyezo · September 11, 2014

Iasa din pagina pentru ca probabil ai lucrat cu marimi fixe in pixeli ( px ). Poti evita lucruri de genu daca folosesti %.

@Dum Nyezo, stiu ca codu e facut de tine, dar totusi, nu ai scris acum codu, tot copy/paste a fost in cazu asta. Deci am spus bine si am salvat situatia .

Nu radeam de aia :))

Dar ma amuza niste chestii pe aici.

Oricum Miky da add la "wefap" pe messenger.

MikyBG · September 11, 2014

Gadeas, unde mai exact pun % ?

Dum, am dat.

gadeas · September 11, 2014

Din cate am observat pe linku din primu post. La redimensionare e totu ok, pana cand ajunge la rezolutia minima ( exista minim pentru ca nu e gandit responsiv tot skinu ), ce vreau sa zic cu asta e ca nu am vazut probleme, daca ai putea sa faci o poza cu problema care zici ar fi mai usor sa vedem exact

Bogdan BGd · September 11, 2014

Eu am pus butoanele, dar nu imi arata bine si cred ca trebuie sa schimb headeru', corect?

MikyBG · September 11, 2014

Am rezolvat, multumesc lui Dum Nyezo pt. ajutor

Sign In

Cum Fac Header-Ul Sa Arate Ca Pe Redzmax.com?

Recommended Posts

MikyBG

+Vlăduț Rădulescu

Bogdan BGd

MikyBG

Kennzo

MikyBG

Kennzo

Dum Nyezo

MikyBG

Dum Nyezo

gadeas

MikyBG

gadeas

Dum Nyezo

MikyBG

gadeas

Bogdan BGd

MikyBG

Please sign in to comment

Recently Browsing 0 members

Activity

Browse

Important Information