Docs

[mahmoud237]

How can I add an image that when a user clicks on it , the content appears ?

[mahmoud237]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for wriitng in! You can do this with Tabs element. It would be tricky to use Icons instead of text but possible with some custom JavaScript. If you want to do it then add Tabs element and update us with the page URL. We’ll try to put the icons instead of text.

Cheers!

[mahmoud237]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the URL. On the class field of the tab element add custom-tab. Then on Settings Tab> Custom JS: Add the following code:

jQuery(document).ready(function($) {
    $('.custom-tab>li:first-child>a').append('<i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i>');
      $('.custom-tab>li:nth-child(2)>a').append('<i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i>');
   $('.custom-tab>li:last-child>a').append('<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i>');
});

I am not sure what Icon is the first one on your screenshot. You can check list of icons here:
http://demo.theme.co/icon-1/shortcodes/icons/.
Then see this on how to get the icon code:http://screencast-o-matic.com/watch/cDXeVlj78v

Hope this helps

[mahmoud237]

Great Thanks .. But I still need some other customization :

1- remove the texts near icon ” Tab 1 , … ”
2- Remove all borders around tab element and the tabbed content .
3- Make no active tabs by default
4- Resize The icons and center them
5- Give icon a color on standard , Hover & Click

and the layout will be like this : Just three icon with a specific color with no active one … When a user hovers on icons ,their color changes … If he clicks on one of it the content appears and the color of active one will be still the same on hover color .

check the attached for screenshot

[Paul R]

Hi,

Please change js code provided in #1241732 with this.

jQuery(document).ready(function($) {
    $('.custom-tab>li:first-child>a').html('<i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i>');
      $('.custom-tab>li:nth-child(2)>a').html('<i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i>');
   $('.custom-tab>li:last-child>a').html('<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i>');
});

Then add this in Cornerstone > Settings > Custom CSS

.x-tab-content {
   border:0;
}

.x-nav-tabs {
   border:0;
}

.x-nav-tabs.top>.active>a, .x-nav-tabs.top>.active>a:hover {
   border:0;
   color:#ef4e52;
}

.x-nav-tabs.top>li a {
    border-bottom: 0;
}

.x-nav-tabs>li>a {
    font-size: 18px;
    background-color: transparent;
}

.x-nav-tabs.top>li {
    border-right: 0;
}

Hope that helps

[mahmoud237]

Thanks a lot … worked perfectly

The last thing: I don’t want to make any active tab by default … How Can I do that ?

[Lely]

Hi There,

You’re welcome!

Please update your javascript to this:

jQuery(document).ready(function($) {
    $('.custom-tab>li:first-child>a').html('<i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i>');
      $('.custom-tab>li:nth-child(2)>a').html('<i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i>');
   $('.custom-tab>li:last-child>a').html('<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i>');
  $('.custom-tab .x-tab-content.custom-tab >.active').css("display","none"); 
  $('.custom-tab .x-nav-tabs-item.active').click(function(){
     $('.custom-tab .x-tab-pane').removeAttr("style");
});
});

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[mahmoud237]

I understand that but the last code not working … The first tab still active by default … Thank you for your help anyway

[Lely]

Hi There,

Please use this code instead. I did have a structure error on one line. We’re sorry for the inconvenience.

jQuery(document).ready(function($) {
    $('.custom-tab>li:first-child>a').html('<i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i>');
      $('.custom-tab>li:nth-child(2)>a').html('<i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i>');
   $('.custom-tab>li:last-child>a').html('<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i>');
  $('.x-tab-content.custom-tab >.active').css("display","none"); 
  $('.custom-tab .x-nav-tabs-item.active').click(function(){
     $('.custom-tab .x-tab-pane').removeAttr("style");
});
});

Hope this helps.

[mahmoud237]

Great it worked …there is no active tab now But the first Tab “icon” has the active color .. I want to give it the inactive color ?

[Rupok]

Hi there,

First one is active because there must be one active Tab as it’s usual for Tabs. So let’s set the first one as “Initial active tab”.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts