Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 15, 2016 at 7:09 pm #724980
    MarcG5

    Hi guy’s – I’m back again :-)

    I’ve been looking for some custom css for the accordion slider and almost found what I was looking for within ticket #535133. I am using LifeIsNow001 tweaked code looks great on a desktop view but the excerpt is all squished up to the left on mobile devices. Is there any way to extend the excerpt to about 50% of the displayed image size?

    Also can you let me know how I can change the text colour from white to something else?

    Thanks for the help,
    Marc

    December 15, 2016 at 9:30 pm #725017
    Basilis

    Hey MarcG5!

    You will have to change the color:#fff value of the CSS to something else.
    Regarding the excerpt, in which page is it?

    Thanks a lot

    Best regards,
    Basilis

    December 15, 2016 at 10:02 pm #725030
    MarcG5

    Hi Basilis,

    Thanks for your reply. I can’t see any reference to the colour being #fff in that section of the css. Do I need to include an additional line of code for this? I did include the page link in the private section but here it is again http://www.marcgodfreeweddings.co.uk it’s at the bottom of the home page.

    Thanks for your help,
    Marc

    December 20, 2016 at 8:47 am #726472
    Ismael

    Hi,

    What is the css codes that you used? I’m sorry but we can’t use the “ticket number” to visit the thread. We need the actual url. You can insert those css codes inside a css media query so that it won’t affect the mobile view. 

    @media only screen and (min-width: 989px) {
  /* Add your Desktop Styles here */

}

    Best regards,
    Ismael

    December 20, 2016 at 3:09 pm #726572
    MarcG5

    Hi Ismael,

    Here is the code that I am currently using:

    #top .aviaccordion-title-on-hover .aviaccordion-preview {
opacity: 1;
filter: alpha(opacity=100);
text-align: center;
}

h3.aviaccordion-title {
position: absolute;
left: 0;
background: rgba(0,0,0,.3);
padding: 10px;
top: 10;
margin: 0;
text-align: left;
}

#top .aviaccordion-preview-title {
display: block;
padding: 0;
}

li.aviaccordion-slide:hover .aviaccordion-excerpt {
opacity: 1;
}

.aviaccordion-excerpt {
opacity: 0;
-webkit-transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
padding: 10%;
}

#top .aviaccordion-slide:hover .aviaccordion-excerpt {
background: rgba(0,0,0,.6);
padding: 20px;
display: block;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}

#top .aviaccordion-preview-title-wrap {
display: block;
}

#top .aviaccordion-preview-title-wrap {
background: transparent !important;
}

    Thanks
    Marc

    December 23, 2016 at 1:05 am #727745
    Nikko

    Hi,

    Can you post to the link to the previous thread where you get the code so we can review it.

    Best regards,
    Nikko

    December 23, 2016 at 1:30 pm #727918
    MarcG5

    Here you go Nikko: https://kriesi.at/support/topic/enfold-accordian-slider-title-always-visible-on-left-text-visible-on-mouseover/

    Thanks
    Marc

    December 28, 2016 at 12:49 am #728319
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
.aviaccordion-preview {
    width: 60%!important;
}}
.aviaccordion-excerpt {
    color: orange;
}

    Enjoy your holidays!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.