-
Posts
-
I have use the plugin fiftyfifty on the below page:
http://chriswardphotography.net/consumer/photoshop-retouching/#tab-id-2
Everything works fine but I have a problem with the CSS.
.twentytwenty-handle has border-color: #e1e1e1; which I need to take out. If you turn it off it should the arrow correctly. It would be a great help if you could show me how to take this CSS away from the fiftyfifty plugin.
This is what I got from the plugin builder:
The issue with the arrows is caused by your theme’s CSS, which adds a border in the slider arrows. You need to edit your css file
/wp-content/uploads/dynamic_avia/enfold_child.css
and just remove the following
.main_color span,
or override it in a new file so not to add this
border-color: #E1E1E1;
to the arrows.
I don’t want to change anything with the theme I just need to remove border-color: #E1E1E1; from the .twentytwenty-handle
I know its not a theme question but any help would be amazing.
Regards
Chris
Hi Chris,
Please try adding following code to Quick CSS
.main_color div { border-color: none; }.main_color .tabcontainer .tab { border-color: #e1e1e1; }
Regards,
Yigit
I did just work something out but probably bad coding :-) Not that good with CSS but learning.
I did this
.twentytwenty-left-arrow {
border-right: 6px solid rgba(221, 221, 221, 0.80)!important;
border-left: 6px solid rgba(221, 221, 221, 0)!important;
border-top: 6px solid rgba(221, 221, 221, 0)!important;
border-bottom: 6px solid rgba(221, 221, 221, 0)!important;
}
I used important to over ride it. Was that a good way?
I also seem to have a problem with the tab layout with the plugin. I have taken all the css out so you can see the problem better. One tab displays on but the rest don’t.
http://chriswardphotography.net/consumer/photoshop-retouching/
Hi,
Do you normally have different images in each tab? And did you make sure that you are inserting correct shortcode in each tab content?
Regards,
Yigit
There will be different images showing before and after in each tab but used the same ones for testing. The short code is correct
[fiftyfifty img1=”http://chriswardphotography.net/wp-content/uploads/2013/08/kerry-grey-1500×900.jpg” img2=”http://chriswardphotography.net/wp-content/uploads/2013/08/kerry-blue-1500×900.jpg” offset=”0.5″]
I setup a test page:
http://chriswardphotography.net/test/
Which is a standard text box and it works fine so much be a plugin conflict :-(
Any ideas? I also contacted the plugin builder to see if they could see a problem with the tabs.
Hi,
Can you please try adding this code to Quick CSS
.twentytwenty-handle:before { bottom: 50%!important; }It seems like working on my end
Regards,
Yigit
Sadly not for me:
http://www.chriswardphotography.com/test-area/examples/example9.jpg
I’m viewing in chrome and its not on the tag that shows first its when you select the next tab. Then you get what you see in the linked image. seems to have padding on the bottom and the slider is not centered and the move icon is not centered.
Thanks for looking into it.
artistic24459, I have only added this to my custom.css now, to get the “right” arrows within this plugin:
.twentytwenty-left-arrow {
border-color: rgba(221, 221, 221, 0) #FFFFFF rgba(221, 221, 221, 0) rgba(221, 221, 221, 0) !important;
}
.twentytwenty-right-arrow {
border-color: rgba(221, 221, 221, 0) rgba(221, 221, 221, 0) rgba(221, 221, 221, 0) #FFFFFF !important;
}
.twentytwenty-handle {
border: 3px solid white !important;
}works fine for me and this should not make any trouble with your tabs.
To add more transparency to the white arrows and circle, you can change within the line of the border-color to something like that:
border-color: rgba(221, 221, 221, 0) rgba(255, 255, 255, 0.47) rgba(221, 221, 221, 0) rgba(221, 221, 221, 0) !important;
0.47 is now the transparency instead of the color #ffffff from the code above.
I sorted the border problem already (same way :-) wow I am learning) just taken it out for testing this tab problem :-) But that’s for the help.
The Tab problem is what happens with the standard setup of the plugin using the standard shortcode.
I just got this from the plugin dev
I suggest you to disable your CSS files one by one to find out from which the issue is caused. It seems to be somewhere in the enfold-child base.css or shortcodes.css files.
As our dev team is investigating the issue further, if we have something found, i’ll inform you.
:-/
Hey,
Please use this:
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
border: 6px inset transparent !important;
}
.twentytwenty-left-arrow {
border-right: 6px solid white !important;
}
.twentytwenty-right-arrow {
border-left: 6px solid white !important;
}
.twentytwenty-handle {
border: 3px solid white !important;
}Remove browser cache then reload the page.
Cheers,
Ismael
Hey Ismael, thanks for that but I had sorted the problem. It was a new problem I was trying to sort out now. Maybe I should have closed this and opened another post which would have been clearer sorry.
This is the new problem:
I seem to have a problem with the tab layout with the plugin. The first page loads the tab and displays the plugin correctly but as soon and you click the next tab (any tab) it displays like the example.
http://www.chriswardphotography.com/test-area/examples/example10.jpg
Again I know its a plugin and really something of a grey area on support but any help would be amazing. Its an important feature for me to should before and after retouching and this seems to be the most elegant way to display them.
I did get this from the plugin dev:
“I suggest you to disable your CSS files one by one to find out from which the issue is caused. It seems to be somewhere in the enfold-child base.css or shortcodes.css files.
As our dev team is investigating the issue further, if we have something found, i’ll inform you.”
Even if you could help could you point me in the right direction? Should I edit the base.css quoting out some css until I find the problem? Would that be a good start? I tried using chrome dev tool to I cant find the problem.
Best wishes
Chris
The link to the example page:
http://chriswardphotography.net/consumer/photoshop-retouching/
Hey!
Checked the site. Unfortunately it seems that the script that calculates the height of the image and position of the slider does not work when the content is hidden like in these tabs.
you can try the following css changes, i think they should help: we will try to set an explicit width for the tab container so the script should calculate correctly no matter what:
add this to your custom.css stylesheet in folder /css/ or to the quick-css panel located in your wordpress backend at Enfold->Styling:
.sidebar_tab .tab_content{ width: 80%; }
#top .sidebar_tab .tab_titles{width:20%; min-width:0; max-width:1000px;}
You are a god in the code world lol. Perfect
Will this now mean that anytime I use a tab with the same style it will be set by the CSS. I’m not planning to use the tabs without the border anywhere else (I don’t think) so if so its not a problem.
- The topic ‘CSS border over ride’ is closed to new replies.