Docs

[mynvbox]

I am on newest wordpress and x versions and cornerstone is up to date. My site is wisewebsitesolutions.com. I am playing around with the tabs element in cornerstone and I followed your ticket: #61954 to create a css sprite. What I am getting close to achieving is I want to display 4 – 6 icons in place of the tab headlines which I have been able to achieve. It is working fine on click.

The only thing I was hoping to change if I were to use this on the site is removing the text in the tab headline “make sure to set a title” as I just want to have the icon and if no content is input in the tab headline, this text seems to default.

Also, it would be ideal if the tabs would change on hover instead of click. I’ve played around unsuccessfully with the above changes in CSS so if you could help me that would be great.

Here is a sample of what I am after under their “Core Values”: https://www.invisionapp.com/company

I’m currently playing around on a draft if you want to see where I am at this moment.

https://wisewebsitesolutions.com/cornerstone-draft/

Thanks for any help you are able to provide.

Here is my CSS for what I have now:
/* Remove the tabs block border */
.x-nav-tabs,
.x-nav-tabs.top>li,
.x-tab-content{
border:none!important;
}

/* Make the container transparent */
.x-nav-tabs-item a,
.x-tab-content{
background:transparent!important;
}

/* Set the icon sprite for the links */
.x-nav-tabs-item a:before{
content:”;
display:block;
width:152px;
height:152px;
background-image: url(https://wisewebsitesolutions.com/wp-content/uploads/2016/11/wise-icon-sprite.png);
}

Give the background position for each tab list item
.x-nav-tabs-item:nth-child(1) a:before{
background-position: 0 0;
}

.x-nav-tabs-item:nth-child(2) a:before{
background-position: -212px 0;
}

.x-nav-tabs-item:nth-child(3) a:before{
background-position: -424px 0;
}

.x-nav-tabs-item:nth-child(4) a:before{
background-position: -636px 0;
}

[Rad]

Hi there,

Thanks for writing in.

Would you mind providing further clarification of what you’re trying to achieve?

The only thing I was hoping to change if I were to use this on the site is removing the text in the tab headline “make sure to set a title” as I just want to have the icon and if no content is input in the tab headline, this text seems to default.

Please provide video recording and some screenshots 🙂

It’s working as your sample site, but it just shift when hovered.

Thanks!

[mynvbox]

Sorry I made a few more changes after I posted my question. What I meant in the statement above was: in cornerstone if you don’t put a heading in the “tab heading” section it will default to “make sure to set a title” on the page in the heading spot. I originally wanted to remove that entirely but I found a workaround by using the unicode down arrow in the tab headline section. I then put a line of javascript to change from click to on hover so I’m happy.

That jumping when you hover is caused by my workaround where I have the down arrow on the active tab heading as 15px and I changed the inactive items to 1px but when hovering to the other items it decreases the spacing by the missing 14px. (I think that’s why). I think I can use it the way it but what’s your honest opinion on that jumping. I look at it like it’s almost highlighting the active item even more but that might just be me being lazy finding an excuse for not doing it the correct way lol.

I’m going to start working on it here: https://wisewebsitesolutions.com/about/

[Rad]

Hi there,

About the arrow, I think it’s better not jumping. Instead, hide the arrow by setting the font size to 0 px. Then use :after pseudo selector to add your arrow with visibility hidden.

Example,

.x-nav-tabs-item a:after {
    content: '▼';
    display: block;
    width: 152px;
    text-align: center;
    font-size: 20px;
    visibility:hidden;    
}
.x-nav-tabs-item a:hover:after {
    visibility:visible;    
}

Make sure this CSS is removed.

.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
    font-size: 20px;
    color: #1b1449;
}

About placing the arrow with tab title, I tried and yes, I guess that’s the workaround for now. Shortcodes and elements are programmed to display default values if the user forgot to add one. There are elements that has blank default values, but not this one.

Thanks!

[mynvbox]

I think this worked like a charm. I appreciate your assistance. I think it looks more professional your way!

[Christopher]

You’re welcome.

[Author]

Posts