Joomla Templates Club 406,261 posts

[buiak Friend buiakJoin date: August 2016Posts: 124Downloads:74Uploads:24 Thanks: 16]

#964861

Greetings, Please advice how to create a similar Link CSS Style : " btn btn-calendar" used on Header Links, as Calendar appear on menu for other icons as menu items.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#964921

Hi
This is work only for the menu item . If you want to apply it on any other part on site , you have to make custom work in style . To check style use inspect element from browser tool : http://prntscr.com/ccykga
If you are adding this into a custom html module then this can be simple , you can copy the html code and paste it .

[buiak Friend buiakJoin date: August 2016Posts: 124Downloads:74Uploads:24 Thanks: 16]

#965067

Hi there,
I want to apply similar icons ( same style as calendar, but with diffrent icons and links ) close to the existing calendar link, in the same header_links position . I need to know how to replicate calendar Link CSS Style : " btn btn-calendar" in the same module position but for diffrent menu links.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#965261

Hi
its not button , its a menu module that is published on a module position and use the special style . This style is only designed for this position and module .
You can duplicate the module on same position if you want two module with same effect on this position .

This menu use Link css style : http://prntscr.com/cdk991

Menu module : http://prntscr.com/cdk9gz

[buiak Friend buiakJoin date: August 2016Posts: 124Downloads:74Uploads:24 Thanks: 16]

#965280

I need to put another menu items next to the axisting calendar menu item with the similar style but with a diffrent icon. Please explain how to create a new Link CSS Style : " btn btn-group" for exemple the new similar but with a diffrent icon menu link to jomsocial new group page.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#965598

Hi
add below code in custom.css file

.head-right-item.head-links .nav > li > a.btn-group {
    overflow: hidden;
    text-indent: -999em;
    width: 40px;
}

.head-right-item.head-links .nav > li > a.btn-group:after {
    content: "\f073";
    position: absolute;
    left: 4px;
    text-indent: 0;
}

You have to change the content code in above code to change the icon code .
For example : "f0c0"
is used for group > http://prntscr.com/ce8dsf

[buiak Friend buiakJoin date: August 2016Posts: 124Downloads:74Uploads:24 Thanks: 16]

#966634

hi there,
where can I find custom.css
and please advice how to find the diffrent content code in above code to change the icon code for diffrent icons.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#966645

Go to /css/custom.css file in your template folder .
If file is not present kindly create it , For the icon content code , you can check it using inspect element from Font awesome site like in my example > http://prnt.sc/ce8dsf

[buiak Friend buiakJoin date: August 2016Posts: 124Downloads:74Uploads:24 Thanks: 16]

#966657

Please advice how can I make new menu icons to be more close to eachother … seams that the header-links with permit just 3 icons menu to show. How can I reduce the space gap between icons to alow more then 3 icon menu items.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#966783

Hi
Post your site URL and screenshot how u want to change the icon space .

[buiak Friend buiakJoin date: August 2016Posts: 124Downloads:74Uploads:24 Thanks: 16]

#966969

how to make also the hover effect and mobile view grei square around icon, on icon menu as it is with the default calendar.
Please advice

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#966975

Hi
Please check my reply here . You have ao defined new style for your new custom buttons to apply the style . As i said in above post you can use the inspect element tool from browser to check style and then apply it on your new button classes using custom.css .
Also i request you to open a new thread for new questions , It also help our community .

[Author]

Posts