Okay
  Public Ticket #1011430
Issue background
Closed

Comments

  •  2
    Julia started the conversation

    Hi,

    1) Please check attachment. What can i do to fix issue background?

    2) What can i do to have color dark from TOP then none color to bottom? (Complete none color, still see video, BUT black then lighter to be none)

    I used for color in Primary menu , background is full-width video.

    Similar like this: multiply

    http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-blend-mode


  •  118
    Zafer replied

    Hey There,

    1. Try to set Opacity property from Editor Panel > Extra > Opacity.

    2. You must set gradient background color to the layer front of the video.  Try following code, paste this code to Editor Panel > Background image field.

    linear-gradient(to right, black 0%,white 100%)

    Currently "background-blend-mode" property not available but we will add it on next updates, By the way you can create nice gradients from this page.

    we working for make it better, thank you for your patience.

    I'm hope thats help,

    Best Regards

  •  2
    Julia replied

    Thanks.

    I got another Issue mobile !!!

    /***************** SO how to code mobile friendly. What i did

    1) Click mobile friendly, slow zoom the size i wanted, mouse hover to choose container box size.

    2) After all done, click to check code, then add display:none for sidebar.

    3) Coppy all code add child-theme style.css

    4) Go setting. yellow pencil source code. Delete all code

    /**********************************/

    Step1: checked , work perfect

    http://www.responsinator.com/?url=tintucthegioi.info%2Fforums

    Step 2: go to mobile for real check (please check on your mobile). Break web - also check back of step 1 (still fine there). one more issue: sometime load dont appear sidebar, sometime have on mobile

    /********************************/

    .sidebar, .side-twocol, .vc_row.vc_rehub_container > .vc_col-sm-4  {width:220px}
    .main-side, .vc_row.vc_rehub_container > .vc_col-sm-8  {width: 960px}

    @media (max-width:1024px){
    .rh-outer-wrap .rh-content-wrap{margin-left:-5px !important; width: 990px}
    .rh-content-wrap .sidebar{width: 185px;}
    .rh-content-wrap .main-side{width: 788px;}
    }

    @media (max-width:768px){
    .rh-content-wrap .sidebar{display: none !important}
    .rh-outer-wrap .rh-content-wrap{width: 740px}
    .rh-content-wrap .main-side{
    margin-left:5px !important;
    width:740px;
    }

    }

    @media (max-width:736px){
    .rh-content-wrap .sidebar{display: none !important}
    .rh-content-wrap .main-side{
    margin-left:-5px !important;
    width:707px;
    }

    }

    @media (max-width:667px){
    .rh-content-wrap .sidebar{display: none !important}
    .rh-content-wrap .main-side{
    margin-left:-4px !important;
    width:639px;
    }
    }

    @media (max-width:600px){
    .rh-content-wrap .sidebar{display: none !important}
    .rh-content-wrap .main-side{
    margin-left:-3px !important;
    width:570px;
    }
    }

    @media (max-width:568px){
    .rh-content-wrap .sidebar{display: none !important}
    .rh-content-wrap .main-side{
    margin-left:-4px !important;
    width:540px;
    }
    }

    @media (max-width:414px){
    .rh-content-wrap .sidebar{display: none !important}
    .rh-content-wrap .main-side{
    margin-left:-3px !important;
    width:384px;
    }
    }

    @media (max-width:384px){
    .rh-content-wrap .sidebar{display: none !important}
    .rh-content-wrap .main-side{
    margin-left:-5px !important;
    width:357px;
    }
    }

    @media (max-width:375px){
    .rh-content-wrap .sidebar{display: none !important}
    .rh-content-wrap .main-side{
    margin-left:-4px !important;
    width:347px;
    }
    }

    @media (max-width:320px){
    .rh-content-wrap .sidebar{display: none !important }
    .rh-content-wrap .main-side{
    margin-left:-5px !important;
    width:294px;
    }
    }

  •  2
    Julia replied

    1. Try to set Opacity property from Editor Panel > Extra > Opacity.  

    ==> Not work, i move the arvata same with attachment as frist talk, when i use Opacity, it make avarta to lighter and lighter. I just want move A put on B. Not move A underB and can not see A anymore.

    2. You must set gradient background color to the layer front of the video.  Try following code, paste this code to Editor Panel > Background image field. 

    ==> It worked thanks. Hope you can add this feature soon, it will be very helpfull for none developer like me.

    3. Issue with box shadown. Sometime work, sometime not. Very confused have to leave then back, take a lot of time to work.

    Many time i tried to set shadown in case (some class i setup shawdown already want change, some class complete did not set any shadow.

    It did not work even i check code it set showdow code, but see front-end editor dont see any change. It always come with text in header of choose shadow color " set transparents color for hide box shadow property "


    4. Issue css widget.

    I want to choose the ONLY 1 widget in all widget of sidebar, To change ONLY 1 widget:

    margin-bottom: -25px;

    BUT when i tried to choose the ONLY 1widget, i can not do that. Always auto choose all widget in sidebar, what can i do to allow choose ONLY 1 widget???

  •  118
    Zafer replied

    Hey Julia,

    1. Opacity property will make transparent the element, move A on B and set opacity to A. Please try it and let me know if not work.

    2. Yes, You are right. I will add this feature in near time!

    3. Box shadow will work always but may you need set "relative" value for position option and set a high value to Z index option in Yellow Pencil Panel > Position. I think the element stays under other elements and so the shadow is not visible.

    4. You need to use Single Inspector Tool for select just the target element. Take a look at this section for learning more about the  Inspector.

    By the way, I'm sorry for late reply. I'm hope thats help!

    Best Regards

  •  2
    Julia replied

    Hi Thanks. You forget issued with question responsive. Please help reply. Was waiting 4 days. Your reply is so late compared with promised within 48h support. I need to work

  •  2
    Julia replied

    Hi another 2 days again. I did not hear from you, can you reply question about responsive?



    /***************** SO how to code mobile friendly. What i did

    1) Click mobile friendly, slow zoom the size i wanted, mouse hover to choose container box size.

    2) Coppy all code add child-theme style.css

    3) Go setting. yellow pencil source code. Delete all code

    /**********************************/

    Step1: checked , work perfect

    http://www.responsinator.com/?url=tintucthegioi.info%2Fforums

    Step 2: go to mobile for real check (please check on your mobile). Break web - also check back of step 1 (still fine there). one more issue: sometime load dont appear sidebar, sometime have on mobile

    /********************************/

    .sidebar, .side-twocol, .vc_row.vc_rehub_container > .vc_col-sm-4  {width:220px} .main-side, .vc_row.vc_rehub_container > .vc_col-sm-8  {width: 960px}

    @media screen and (max-width:1024px){ .rh-outer-wrap .rh-content-wrap{margin-left:-5px !important; width: 990px} .rh-content-wrap .sidebar{width: 185px;}  .rh-content-wrap .main-side{width: 788px;}  }

    @media sreen and (max-width:768px){ .rh-content-wrap .sidebar{display: none !important} .rh-outer-wrap .rh-content-wrap{width: 740px} .rh-content-wrap .main-side{ margin-left:5px !important; width:740px;  } }

    @media screen and (max-width:736px){.rh-content-wrap .main-side{ margin-left:-5px !important; width:707px; } }

    @media screen and (max-width:667px){.rh-content-wrap .main-side{ margin-left:-4px !important; width:639px; }  }

    @media screen and (max-width:600px){.rh-content-wrap .main-side{ margin-left:-3px !important; width:570px; }  }

    @media screen and (max-width:568px){.rh-content-wrap .main-side{ margin-left:-4px !important; width:540px; } }

    @media screen and (max-width:414px){.rh-content-wrap .main-side{ margin-left:-3px !important; width:384px; }  }

    @media screen and (max-width:384px){  .rh-content-wrap .main-side{ margin-left:-5px !important; width:357px; } }

    @media screen and (max-width:375px){ .rh-content-wrap .main-side{ margin-left:-4px !important; width:347px; } }

    @media screen and (max-width:320px){ .rh-content-wrap .main-side{ margin-left:-5px !important; width:294px; } }


  •  118
    Zafer replied

    Hey Julia,

    I'm sorry. I didn't see the other question.

    I do not see any problem in your CSS codes, this must work well. May you need to clear browser cache in your mobile device.

    Maybe there has an issue with Responsive. Please test the page with Responsive Tool and be sure this works well. Click here to learn more.

    Do you copy CSS codes from CSS Editor? You need to Export CSS Codes from WordPress Panel > Setting > Yellow Pencil Source > Download. Please take a look at this section in the plugin documentation.

    Yellow Pencil loads the CSS Codes when it needs and child-style.css load it always. Maybe just Exported CSS codes don't work well, I will recommend you keep the plugin active for the best experience.

    Forgive us for the late reply. We are working hard for future updates. Thank you for your patience!

    Best Regards

  •  2
    Julia replied

    Please check attachment.

    What can i do with text? I want text still normal, but box will effect function extra-transform.

    P/S: there is no anything class for only text, this box green is used for class text already.

  •  118
    Zafer replied

    Hey Julia,

    This element has CSS transform property, Please select the element and go Editor Panel > Extra > Transform. Set 1 value for Scale and set 0 value for all other transform settings.

    Best Regards