Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 14, 2018 at 3:46 am #956188
    navindesigns

    Hi,

    I have two sections currently labelled “Market Entry” and “Business Plan & Forecasting”, I am trying to use the as accordion, the functionality works but the design does not. The icons on the left is not showing up, I am trying to make them look as close as possible to my mockup below. Please help with the following:

    – make accordion icon on the left show up
    – make accordion title all upper case
    – make accordion body text 12pt

    live site – http://spadeconsult.com/services/

    screenshot – https://imgur.com/a/hPIwbIa

    Thanks

    May 14, 2018 at 7:02 am #956271
    Rikard

    Hey navindesigns,

    You have this in your child theme CSS which is causing the borders not to display:

    .main-color span {
  border-color: transparent;
}

    Best regards,
    Rikard

    • This reply was modified 6 years, 6 months ago by Rikard.
    May 15, 2018 at 4:02 am #956787
    navindesigns

    Is it not possible to make the border color around the box and the icon color different?

    i need the icon color to stay as is but the border color to be none or white

    live site – http://spadeconsult.com/services/

    View post on imgur.com

    May 16, 2018 at 10:07 pm #957755
    Yigit

    Hi,

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

    CSS Snippet:

    
.active_tc .toggle_content {
    border: none;
}

    Best regards,
    Yigit

    May 17, 2018 at 4:09 am #957875
    navindesigns

    Thanks but I also need the border color around the “Market Entry” to be removed or white AND KEEP THE ACCORDION TOGGLE PLUS COLOR. It looks like they are being shared by the same color currently.

    Services

    May 18, 2018 at 5:27 pm #958718
    Victoria

    Hi navindesigns,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    May 19, 2018 at 2:23 am #958884
    navindesigns

    Mockup here – https://i.imgur.com/805S6ta.jpg

    look at the two expanded section labelled MARKET ENTRY and BUSINESS PLAN & FORECAST

    This is what I currently have

    Services

    May 19, 2018 at 8:10 pm #959191
    Victoria

    Hi navindesigns,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.togglecontainer .single_toggle:first-child .toggler,
 .togglecontainer .taglist + .single_toggle .toggler {
    border-color: #fff;
}

    Do you mean you want them expanded all the time also?

    If you need further assistance please let us know.

    Best regards,
    Victoria

    May 20, 2018 at 11:41 pm #959540
    navindesigns

    Thanks, looks great. just a few more things

    1- how do I left align the icon
    see screenshot – https://imgur.com/a/PD9VqGa – i need to remove that left space so it will left align with the text below

    2- how to make the font size for the accordion text (Toggle Title and Toggle Content) both 10 pt.

    Services

    Thanks

    May 22, 2018 at 8:46 am #960192
    Ismael

    Hi,

    Thanks for the update.

    1.) This css code should help.

    .toggle_icon {
    left: 0;
}

.toggler {
    padding: 9px 3px 9px 25px;
}

    2.) Use this css code to change the font size.

    .togglecontainer {
    font-size: 10px;
}

    Best regards,
    Ismael

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