- This topic has 8 replies, 2 voices, and was last updated 7 years, 10 months ago by
.
-
Posts
-
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.
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
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
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!
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]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.
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 🙁
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
You must be logged in to reply to this topic.