Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 1, 2014 at 10:53 am #344536
    Marie

    Hi!

    This is “kind of ” a following of topic https://kriesi.at/support/topic/team-member-element-description-in-lightbox/ which you can close actually -> I’m opening a new one as the “original” subject has changed… (sorry…).
    I’d like to customize a toggle as below. See private content. I can manage to play a little with chrome inspector, but then it’s beginning too complex for me to put this in “right” css in my child theme… I’ve just already created a custom class but there is nothing in it at this stage ;) Would need some help, at least for the good semantic (after I’ll be able to eventually adjust some details if needed).
    No margins, no background color, no borders (expect on top when toggle opened), and the toggle icon aligned on the right.
    Thanks a lot for your help!

    Regards,
    Marie

    November 1, 2014 at 5:56 pm #344652
    Elliott

    Hey Marie!

    Try adding this to your Quick CSS,

    .toggle_content {
    background: transparent !important;
    border: 0px !important;
}
.toggler span {
    right: 10px !important;
}
.toggler {
    border: 0 none !important;
}

    Cheers!
    Elliott

    • This reply was modified 9 years, 11 months ago by Elliott.
    November 1, 2014 at 6:39 pm #344677
    Marie

    Hey Elliott!

    Thank you! Still some adjustments to make I guess.

    1. Toggle content :
    – I’ve added padding 0 for toggle content
    – Tried to ask for a border-top only (but it doesn’t work…) (see the image I sent you)

    2. The icon + – is still on the left / and by the way there is no “+”… just a “-”

    3. Instead of a background color on hover title, I’d like the + – icon (and border icon) to change of color (just on hover)

    Thanks for your help!
    Cheers!

    Marie

    /* TOOGLE - icon on the right - no borders except border-top toggle content - no background colors */

#top .mc-toggle-team-member .toggle_content {
    background: transparent !important;
	border-top: 1px !important;
	border-left: 0px !important;
	border-right: 0px !important;
	border-bottom: 0px !important;
	padding: 0px !important;
}

.mc-toggle-team-member .toggler span {
    right: 10px !important;
}

.mc-toggle-team-member .toggler {
    border: 0 none !important;
}
    November 2, 2014 at 4:47 pm #344884
    Elliott

    Hey!

    Add this,

    .toggle_icon { left: auto !important; }
.hor_icon:hover, .vert_icon:hover {
    border-color: red !important;
}

    Best regards,
    Elliott

    November 2, 2014 at 9:57 pm #344994
    Marie
    This reply has been marked as private.
    November 3, 2014 at 10:47 pm #345585
    Elliott

    Hey!

    1. + 2. I’m not sure what you mean here. Take a screenshot and highlight what is going on.

    3. You can target the active title and active toggle content with these classes,

    .activeTitle {  }
.active_tc {  }

    Best regards,
    Elliott

    November 4, 2014 at 9:56 am #345775
    Marie
    This reply has been marked as private.
    November 6, 2014 at 1:55 am #346911
    Kriesi

    Hey Marie!
    Here we go, I think this is all you need: (your other code changes should not be necessary)

    /*toggle iicon on the right*/
.mc-toggle-team-member .av_toggle_section .toggle_icon {
left: auto;
right: 0px;
top: 0;
}

/*toggle header - no border and bg color*/
.mc-toggle-team-member .av_toggle_section .toggler, 
.mc-toggle-team-member .av_toggle_section .toggler:hover{
border: none;
padding: 0;
background: transparent;
}

/*highlighted toggle icon*/
.mc-toggle-team-member .av_toggle_section .toggler:hover .toggle_icon, 
.mc-toggle-team-member .av_toggle_section .toggler:hover .toggle_icon>span{
border-color: #00C472;
}

/*toggle content with border top, no padding, no bg color*/
.mc-toggle-team-member .av_toggle_section .toggle_content {
border: none;
background: transparent;
padding: 0;
border-top: 1px solid #E4E4E4;
margin-top: 9px;
}

    Please be aware that in general our support covers bugfixes and problems with the theme and we don’t do customizations. Of course we will help with the occasional customization request nevertheless ;)

    However I took a look at your accounts post history and you seem to need a lot of customization help so I would kindly ask you to use a service like http://studio.envato.com/ for customizations that go beyond small fixes that require a simple 3 line css rule ;)

    There are quite a few CSS/Wordpress experts there who are really affordable ;)

    November 6, 2014 at 11:34 am #347044
    Marie
    This reply has been marked as private.
    November 6, 2014 at 5:51 pm #347205
    Kriesi

    Hi Marie!

    I am glad you understand. The problem is not the money. We would gladly provide all the customizations for you if we had the time for that but we currently simply lack the manpower. The problem is that if we solve all of those customization requests that our other customers need to wait longer until we can fix their problems ;)

    Thats why I think it would be smart for you to hire a developer for a few hours at http://studio.envato.com who can help you to get the things done that the theme can’t do out of the box :)

    I wont charge you for the previous requests and I got no problems if you ask for help if you run into an actual problem (a bug, incompatibility with a plugin etc) but I think it would be great for everyone if you could handle customizations with the help of an external developer ;)

    Cheers!
    Kriesi

    PS: http://studio.envato.com currently also has a promo running and they give 20$ for free to new customers, so good timing on that ;)

    November 7, 2014 at 4:47 pm #347791
    Marie
    This reply has been marked as private.
  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Toggle customisation’ is closed to new replies.