Toggle customisation - Support | Kriesi.at

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

Author

Posts
November 1, 2014 at 10:53 am #344536

Marie
Participant

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
Inactive Moderator
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 10 years ago by Elliott.
November 1, 2014 at 6:39 pm #344677
Marie
Participant
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
Inactive Moderator
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
Participant

This reply has been marked as private.

November 3, 2014 at 10:47 pm #345585
Elliott
Inactive Moderator
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
Participant

This reply has been marked as private.

November 6, 2014 at 1:55 am #346911
Kriesi
Keymaster
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
Participant

This reply has been marked as private.

November 6, 2014 at 5:51 pm #347205

Kriesi
Keymaster

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
Participant

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.