[burakoztrk]

Hello,

I have 2 tabs on my post. However they are aligned to the left. Is there a way I can vertically center these two tabs on my page? I could not find an option for this.

[Intense Visions]

Hello!

Here is some CSS that should take care of centering the tabs. If you want to apply this to all tabs, you can add the CSS to the CSS Code option that can be found in the Intense admin options, on the Extras tab. You can add the CSS anywhere else that allows for CSS.

.effeckt-tabs-wrap ul.effeckt-tabs {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.intense.nav-tabs > li, .intense.nav-pills > li {
    float: none;
    display: inline-block;
}

If this doesn’t work, please let us know.

Thanks,

Josh

[burakoztrk]

Hello,

Thank you for the reply =)

Unfortunately, it did not work. I pasted the code on the Extras section however the tabs are still not centered. This is what I am trying to do:

I need the tabs to be centered. However, the code did not do that

[Intense Visions]

Hello!

Can you give me a link to the page you are working on. The code I gave worked for me, but I might have had a little different tab setup than what you have. I might be able to figure out the code if you can send me the shortcodes being used for your tabs. Either a link or the shortcodes being used will help me to give you the correct CSS.

Thanks!

[burakoztrk]

It is inside of a course but I have replicated the page for you. You can access it here:

-> http://newakademi.wpengine.com/?page_id=5645&preview=true

Also, I am sending you the code that I used:

[intense_row] [intense_column size="12"]

[intense_tabs  active_tab_background_color="error" active_tab_font_color="error" trigger="click"] [intense_tab title="İngilizce Metin" border="3px solid #e8e8e8" link_target="_self" icon_type="file-text" icon_size="1" icon_position="left"]

Text here...

[/intense_tab] [intense_tab title="Türkçe Çeviri" border="3px solid #e8e8e8" link_target="_self" icon_type="file-text-o" icon_size="1" icon_position="left"]

text here...

[/intense_tab] [/intense_tabs]

[/intense_column] [/intense_row]

[Intense Visions]

Thank you for sending the shortcodes and a link. I added the same CSS that I provided earlier into the page with Chrome’s Developer Tools and the tabs centered properly. Check the CSS that was pasted into the “CSS Code” option on the Extras tab, in the Intense admin options. There may have been additional code that was inadvertently pasted (sometimes copying from a code block might copy the code to make it a code block). I only ask because I didn’t see any of the CSS being included in the styles.

If the image above doesn’t work, here is the link: https://www.dropbox.com/s/3f9axtb0a07djlq/tabs.JPG

Let me know if you still have problems.

• This reply was modified 7 years, 10 months ago by Intense Visions.

[burakoztrk]

I have added it to the CSS section of intense plugin and also to my style.css file. I also cleared the cache of my website. Here is an image of where I pasted it:

I think I am missing something very obvious here 🙁

[Intense Visions]

You have everything correct. I think the only thing that needs to be updated is the float:none CSS style. Change the following:

float: none;

to

float: none !important;

If looks like the float wasn’t being set. The old style was still overriding the new style I sent to you. Adding the !important attribute will make it override the old style. If this doesn’t help, let me know. Sorry for not catching this before.

Thanks,

Josh

[burakoztrk]

Yes! That worked =) Thank you so much!

[Author]

Posts