Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #28884

    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

    #139001

    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

    #139002

    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?

    #139003

    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/

    #139004

    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

    #139005

    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.

    #139006

    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

    #139007

    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.

    #139008

    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.

    #139009

    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.

    #139010

    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.

    :-/

    #139011

    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

    #139012

    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

    #139013

    Last thing, I forgot to say, if you move the separator line it jumps back to the correct display.

    #139014
    #139015

    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;}

    #139016

    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.

    #139017

    Hi!

    yes this is a global change that will affect these elements on every page you use them. I will close this thread for now, if you have any further question simply create a new topic ;)

    Best regards,

    Kriesi

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘CSS border over ride’ is closed to new replies.