Jump to content
  • 0

Adaugare iconita navbar


Go to solution Solved by Juliano Dillon,

Question

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 :)

Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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

 

Link to post
Share on other sites
  • 0

 

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
Link to post
Share on other sites
  • 0
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.. 

Link to post
Share on other sites
  • 0
2 hours ago, Sebastian C. said:

Poți încerca aplicația asta : https://invisioncommunity.com/files/file/8935-menunavigation-icons/ ( https://www98.zippyshare.com/v/VVVFKGQk/file.html ) după care doar le faci aspectul în css.

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

Link to post
Share on other sites
  • 0
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
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • 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.