Jump to content
  • 0
Sign in to follow this  
Followers 0
sp33ddinamo

Adaugare iconita navbar

Asked by sp33ddinamo

Question

sp33ddinamo    0

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

Share this post

Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Julianxpp    31

Julianxpp
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

 

Share this post

Link to post
Share on other sites
  • 0

sp33ddinamo    0

sp33ddinamo
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

Share this post

Link to post
Share on other sites
  • 0

Julianxpp    31

Julianxpp
Posted

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.

Share this post

Link to post
Share on other sites
  • 0

sp33ddinamo    0

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

Share this post

Link to post
Share on other sites
  • 0

Julianxpp    31

Julianxpp
Posted
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.

Share this post

Link to post
Share on other sites
  • 0

Sebastian C.    522

Sebastian C.
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

Share this post

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.

×
Sign in to follow this  
Followers 0
Go To Question Listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...