Single Bits Four questions regarding Tabtastic FullTabs

[dario 20]

Hi Ellen,

1- Is there a way to center the tabs?

The text within each tab is centered by default but the tabs themselves are aligned left.

 

2- Can the borders of each tab be removed?

None of my targeting seems to have any affect on removing the borders on a hovered tab.

My latest attempt:

.section-fulltabs .fulltabs .nav-tabs > li > a:hover {
border: none !important;
}

The code above seems to do nothing.

 

3- I see that you have 5 ways to order the tabs and the default is Post ID. You'd think that would be plenty but it's not for me. I need to be able to order the tabs specifically. Can this be done in some other way?

 

4- As far as I can tell, there's no way to change authors of the FullTab posts. I can for regular posts, pages and CPTs but not Tabtastic CPTs.

Can 'Author' be added to the screen options?

 

Thanks.

[ellenmva 112]

dario

 

On questions 1 and 2, let me get back to you.

 

3. I use this plugin, Post Types Order, https://wordpress.org/plugins/post-types-order/ to control order of items. It adds an extra menu item under the Tabs section in wp-admin and you can drag and drop tabs in the order you want.

 

4. I'll add the author in on next update. I'll see if way you can add in meantime.

 

Best,

 

Ellen

[dario 20]

Hi Ellen,

Any success with #1 and 2 yet?

No rush, just wondering.
I'm still on the dev server.

[ellenmva 112]

dario Sorry, been a bad week. Will try and get back to you by Monday.

 

Ellen

[ellenmva 112]

dario Finally some progress for you.

 

To center tabs try this css in your Custom CSS Tab. Adding the #page helps to override some of the css contained in the section, a useful trick if trying to target CSS used by DMS or a section, sometimes works :)

#page .section-fulltabs {
  text-align: center;
}

#page .section-fulltabs .nav.nav-tabs { 
  display: inline-block; //need to change to inline-block
}

#page .section-fulltabs .tab-content {
  text-align: left; // need to align tab content back to left
}

Now, on your second question there is no border added on hover that's why CSS isn't working. There is a transparent border added to then put a border radius on so the corners are rounded. If you want to target those elements try this code

#page .section-fulltabs .fulltabs .nav-tabs > li > a {
  border: none; // removes a 1px transparent border
  border-radius: 0; //change to 0 if don't want rounded tabs
}

Lastly, if you want to remove the background on hover completely try this

#page .section-fulltabs .fulltabs .nav-tabs > li > a:hover {
  background: none !important;
}

Let me know if that works for you.

 

Best,

 

Ellen

[dario 20]

Close.

The results of the centering are in the attached images.

[dario 20]

So I've solved some of this myself, but in the process discovered another issue.

 

The hamburger menu appears, seemingly at random, even when my browser is the full width of my laptop or desktop screen.

It does not truncate all the tab items, unless I reduce the screen size, but it will truncate the last one or two of the four items into a hamburger.

I also see it on your demo site.

 

The first two screen shots have an xscope ruler over them to show the browser width.

#1, your site - #2 my dev site

 

The last shows the drop down item on my site.

 

So, is there a way to control the breakpoint, or better yet, media query to switch the hamburger off if the browser is on a desktop?

[ellenmva 112]

dario Ya, that hamburger menu is a problem. Let me see what I can do about that. I still need to add the author to the FullTabs post type, might have to make an adjustment so hamburger menu can be turned off on desktop.

 

Best,

 

Ellen