Thread Starter
cam80
(@cam80)
Actually i think i nearly have it. Just have the vertical border doubling up.
.responsive-tabs__list__item {
padding: 10px 29px 6px;
margin: 0 0 0 0;
border: 1px solid transparent;
border-color: #DDDDDD #DDDDDD #FFFFFF;
border-image: none;
border-style: solid;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-width: 1px;
color: #606060;
For the default twentyfourteen theme, this works for me:
http://pastebin.com/mgvkLsAY
Follow the directions in the plugin documentation to remove the default plugin stylesheet and add the styles to your child theme / custom styles plugin.
Alternatively, you can try adding something like the following to the styles you have outlined above
.responsive-tabs__list__item {
border-left: 0;
}
.responsive-tabs__list__item:first-child {
border-left: 1px;
}
However as you have not provided a link to your site, I cannot test how well this would work.
Thread Starter
cam80
(@cam80)
thank you for your quick reply.
The site is still in the early stages of construction.
That css didn’t work.
I nearly have it except for the areas that i have indicated on the pic.
https://dl.dropboxusercontent.com/u/5056314/tabby.PNG
1. being the left border as seen in pic on the left tab.
http://oneclicktechnology.com.au/ccm/
Thank you so much. You have created a fantastic plugin.
Which CSS didn’t work? How are you adding it?
I cannot see what isn’t working as the output from the plugin appears to have the default styles in the page you linked to.
Did you try the solution I suggested for custom CSS in the pastebin link?
To use that, you need to prevent the plugin’ built-in stylesheet from loading and add the content of the pastebin to your site by whatever method your theme vendor recommends for custom CSS.
Thread Starter
cam80
(@cam80)
I have been using firefox and the changes have all shown up there but not in IE. Thx for the heads up. So i guess thats what your seeing as well.
I have left your style sheet and was just overriding it with custom css.
This is what i have changed. But i will follow your instructions from the pluging and change my function.php page and add the css to style sheet. im away for the next few days so i wont be able to do anything until i return Thx so much for your quick reply and i’ll make those changes when i’m back.
.responsive-tabs__list__item {
padding: 10px 29px;
margin: 0 0 0 0;
border: 1px solid transparent;
border-color: #DDDDDD #DDDDDD #FFFFFF;
border-image: none;
border-style: solid;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-width: 1px;
color: #606060;
border-left: 0;
}
.responsive-tabs__list__item–active,
.responsive-tabs__list__item–active:hover {
color: #6d6d6d;
background: #21E014;
border-bottom-color: #ffffff;
I would not recommend leaving the plugin’s style sheet in place and overriding it with custom styles unless the changes were very straightforward. Although that might work in some cases, it may require the new rules to have increased specificity to force them to take effect in preference to the default rules.
Thread Starter
cam80
(@cam80)
Ok. I fix up my style sheet. Here is my code. For some reason the only thing that isn’t working is a border line under the tabs in chrome and IE.It works in firefox. If you can offer a suggestion that would be great but i understand you have spent way to much time on this. It has been very much appreciated.
http://pastebin.com/S9bMuRax
I’m afraid tweaking the CSS for the customised tabs to appear pixel-perfect in all browsers is beyond the level of support I am able to provide on the forum.
I can troubleshoot live sites by changing the CSS in the browser using Firefox dev tools, but when I work on my own projects I have access to the stylesheet to edit it directly when checking/correcting for other browsers.
Thread Starter
cam80
(@cam80)
Yes. totally understand. Much appreciated for your plugin and support. 🙂
Thread Starter
cam80
(@cam80)
Thought i would share my CSS to add a border to the other tabs.
http://pastebin.com/SrBHfFqC
