Jump to content
  • 0

Adaugare iconita navbar

sp33ddinamo

Asked by sp33ddinamo,

 Share

Question

sp33ddinamo Enthusiast

sp33ddinamo

Posted
Posted

Salut PCT, ma puteti ajuta sa adaug iconita meniul principal. Am tot incercat cu diferite coduri dar nu a mers... Nu apare iconita... Va las mai jos o imagine si codurile pentru bara de navigare:

image.png.a52860d401fda8efedd73d5c1c5e9cb5.png

navbaritems: 

{{$first = TRUE;}}
{{foreach $roots as $id => $item}}
	{{if $preview or $item->canView()}}
		{{$active = $preview ? $first : $item->activeOrChildActive();}}
		{{if $active}}
			{{\IPS\core\FrontNavigation::i()->activePrimaryNavBar = $item->id;}}
		{{endif}}
		<li {{if $active}}class='ipsNavBar_active' data-active{{endif}} id='elNavSecondary_{$item->id}' data-role="navBarItem" data-navApp="{expression="mb_substr( \get_class( $item ), 4, mb_strpos( \get_class( $item ), '\\', 4 ) - 4 )"}" data-navExt="{expression="mb_substr( \get_class( $item ), mb_strrpos( \get_class( $item ), '\\' ) + 1 )"}">
			{{$children = $item->children();}}
			{{if $children}}
				<a href="{{if $item->link()}}{$item->link()}{{else}}#{{endif}}" id="elNavigation_{$id}" data-ipsMenu data-ipsMenu-appendTo='#{{if $parent}}elNavSecondary_{$parent}{{else}}elNavSecondary_{$id}{{endif}}' data-ipsMenu-activeClass='ipsNavActive_menu' data-navItem-id="{$item->id}" {{if $active}}data-navDefault{{endif}}>
					{$item->title()} <i class="fa fa-caret-down"></i>
				</a>
				<ul id="elNavigation_{$id}_menu" class="ipsMenu ipsMenu_auto ipsHide">
					{template="navBarChildren" app="core" group="global" location="front" params="$children, $preview"}
				</ul>
			{{else}}
				<a href="{{if $item->link()}}{$item->link()}{{else}}#{{endif}}" {{if method_exists( $item, 'target' ) AND $item->target()}}target='{$item->target()}'{{if $item->target() == '_blank'}} rel="noopener"{{endif}}{{endif}} data-navItem-id="{$item->id}" {{if $active}}data-navDefault{{endif}}>
					{$item->title()}
				</a>
			{{endif}}
			{{if $subBars && isset( $subBars[ $id ] ) && \count( $subBars[ $id ] )}}
				<ul class='ipsNavBar_secondary {{if !$active}}ipsHide{{endif}}' data-role='secondaryNavBar'>
					{template="navBarItems" app="core" group="global" location="front" params="$subBars[ $id ], NULL, $item->id, $preview"}
					<li class='ipsHide' id='elNavigationMore_{$id}' data-role='navMore'>
						<a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore_{$id}' id='elNavigationMore_{$id}_dropdown'>{lang="more"} <i class='fa fa-caret-down'></i></a>
						<ul class='ipsHide ipsMenu ipsMenu_auto' id='elNavigationMore_{$id}_dropdown_menu' data-role='moreDropdown'></ul>
					</li>
				</ul>
			{{endif}}
		</li>
	{{endif}}
	{{$first = FALSE;}}
{{endforeach}}

iconurile pentru celelalte iteme din meniu (css) 

.ipsNavBar_primary > ul > li > a:after {
    content:"";
    background:url({resource="_as/icons_menu.png" app="core" location="global"}) no-repeat;
    display:block;
    position:absolute;
    left:50%;
    top:10px;
}

.ipsNavBar_primary > ul > li:nth-child(1) > a:after {
    background-position: 0px 0px;
    margin:0 0 0 -25px;
    height: 51px;
    width:50px;
}

.ipsNavBar_primary > ul > li:nth-child(2) > a:after {
    background-position: 0px -51px;
    margin:0 0 0 -25px;
    height: 50px;
    width:50px;
}

.ipsNavBar_primary > ul > li:nth-child(3) > a:after {
    background-position: 0px -101px;
    margin:0 0 0 -28px;
    height: 53px;
    width:56px;
}

.ipsNavBar_primary > ul > li:nth-child(4) > a:after {
    background-position: 0px -154px;
    margin:0 0 0 -27px;
    height: 54px;
    width:54px;
}

.ipsNavBar_primary > ul > li:nth-child(5) > a:after {
    background-position: 0px -208px;
    margin:0 0 0 -26px;
    height: 54px;
    width:52px;
}

As vrea sa adaug un fa-fa plus la More.

Multumesc mult pentru ajutor :)

8 answers to this question

Recommended Posts

  • 0
Juliano Dillon Community Regular

+Juliano Dillon

Posted
Posted

Iconitele sunt adaugate cu css, e o poza facuta cel mai probabil in photoshop si apoi e ajustata cu css pentru a se vedea doar iconita corespunzatoare link-ului. Cel mai usor pot cauta poza cu inspect element o adaugi in PS si mai adaugi un + apoi te joci cu setarile din css ca sa o ajustezi.

Din cat cunosc eu tema asa era, daca e o versiune mai noua si gresesc prin ce am spus, scuzele mele :D

 

  • 0
sp33ddinamo Enthusiast

sp33ddinamo

Posted
  • Author
Posted (edited)

 

27 minutes ago, Julianxpp said:

Iconitele sunt adaugate cu css, e o poza facuta cel mai probabil in photoshop si apoi e ajustata cu css pentru a se vedea doar iconita corespunzatoare link-ului. Cel mai usor pot cauta poza cu inspect element o adaugi in PS si mai adaugi un + apoi te joci cu setarile din css ca sa o ajustezi.

Din cat cunosc eu tema asa era, daca e o versiune mai noua si gresesc prin ce am spus, scuzele mele :D

 

ai dreptate, am editat ce ai spus mai sus si am transformat din poza in font family fontawesome.

cu toate ca nu mi-am dat seama din cauza rezolutiei mele mai era un icon pentru chat pe care am reusit sa-l rezolv.

facand asta asa arata acum la rezolutie mai mica:

image.png.481c1dcd2ce533436d418dc6b3db9c46.png

iar asa arata la rezolutie mai mare:

image.png.781bcd9afb376ef96c88a859db50367f.png

dupa cum se vede codul pentru a pune iconita la chat am dat de el... dar pentru a adauga si la "butonul" "More" tot nu gasesc inca...

noul css arata astfel: 

.ipsNavBar_primary > ul > li > a:after {
    content:"";
    /*background:url({resource="_as/icons_menu.png" app="core" location="global"}) no-repeat;*/
    display:block;
    position:absolute;
    left:50%;
    top:10px;
}

.ipsNavBar_primary > ul > li:nth-child(1) > a:after {
    background-position: 0px 0px;
    margin: -35px 0 0 -26px;
    height: 51px;
    width:50px;
    content: "\f015";
    font-family: FontAwesome;
    font-style: normal;
    text-decoration: inherit;
}

.ipsNavBar_primary > ul > li:nth-child(2) > a:after {
    background-position: 0px -51px;
    margin: -35px 0 0 -26px;
    height: 50px;
    width:50px;
    content: "\f007";
    font-family: FontAwesome;
    font-style: normal;
    text-decoration: inherit;
}

.ipsNavBar_primary > ul > li:nth-child(3) > a:after {
    background-position: 0px -101px;
    margin: -35px 0 0 -28px;
    height: 53px;
    width:56px;
    content: "\f0c0";
    font-family: FontAwesome;
    font-style: normal;
    text-decoration: inherit;
}

.ipsNavBar_primary > ul > li:nth-child(4) > a:after {
    background-position: 0px -154px;
    margin: -35px 0 0 -28px;
    height: 54px;
    width:54px;
    content: "\f2b9";
    font-family: FontAwesome;
    font-style: normal;
    text-decoration: inherit;
}

.ipsNavBar_primary > ul > li:nth-child(5) > a:after {
    background-position: 0px -208px;
    margin: -35px 0 0 -28px;
    height: 54px;
    width:52px;
    content: "\f091";
    font-family: FontAwesome;
    font-style: normal;
    text-decoration: inherit;
}

.ipsNavBar_primary > ul > li:nth-child(6) > a:after {
    background-position: 0px -208px;
    margin: -35px 0 0 -26px;
    height: 54px;
    width:52px;
    content: "\f075";
    font-family: FontAwesome;
    font-style: normal;
    text-decoration: inherit;
}

 

Edited by sp33ddinamo
  • 0
sp33ddinamo Enthusiast

sp33ddinamo

Posted
  • Author
Posted
15 minutes ago, Julianxpp said:

Foloseste-te de aceeasi metoda doar adapteaz-o in functie de codul de la item-ul "More", e putina bataie de cap, dar daca ai reusit la restul, la asta n-ai cum sa nu reusesti.

cam asta ar fi ce tine de "More"

<li class id="elNavigationMore" data-role="navMore" style>

<a href="#" data-ipsmenu data-ipsmenu-appendto="#elNavigationMore" id="elNavigationMore_dropdown">

Pentru restul am folosit in functie de id, adica: li:nth-child(id), am incerc sa folosesc pentru "More" mai multe variante din cele de mai sus, dar nu merge nici una... poate nu folosescti bine functiile.. 

  • 0
Sebastian C. Veteran

Sebastian C.

Posted
Posted
7 hours ago, Julianxpp said:

Ma indoiesc ca merge daca navigatia e facuta in HTML si CSS si nu din Menu Manager.

Nu, în situații de genul nu, dar aici depinde și de dorința de a lucra, refaci elementele utilizând meniul default sau doar copiezi ce ai văzut și te rogi să meargă. 

  • Like 1

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.