Could you explain what you want the rotate to be like? I’m seeing the example site, but I’m not sure which aspect of the functionality you want to mimic.
Thread Starter
merat
(@merat)
Bullets (now green squares) should move from left to right – like on the example site.
On my site green squares are jumping up an down – that is default setting, and I don`t know how to change this.
Make a couple changes to your css. First remove the float:right on the buttons (this is what is causing them to rotate backwards, since the first button is on the far right). The jumping up/down is due to css in your theme. You need to remove the transition:
.mtphr-dnt-control-button {
/* float: right; */
margin-top: 10px !important;
margin-right: 0px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
or
.mtphr-dnt-control-button {
margin-top: 10px !important;
margin-right: 0px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
and add the float right on the containing div:
.mtphr-dnt-control-links {
float: right;
}
Thread Starter
merat
(@merat)
Thank you very much, it is exactly how I wanted.
Easy, if you know how 🙂 … still learning.
Have a nice day!
Thread Starter
merat
(@merat)
Hi again,
Green squares were replaced by default grey bullets. I havent touched anything.
And I forgot how I replaced default grey bullet`s with green squares.:-(
There are no button.png images on your plugin when I look over ftp. ???
I have swapped out the image buttons with font icons for easier manipulation.. though, i understand it may have caused some issues with existing users who have already created their own css.
You should now be able to accomplish what you have with pure css:
.mtphr-dnt-control-button i {
background:green;
}
.mtphr-dnt-control-button i:before {
display:none;
}
You may need to adjust the background color of the green to your specific hex color.
Thread Starter
merat
(@merat)
Thank you for your answer.
I need two colors, light green and green as active.
How do I do that?
BR
Thread Starter
merat
(@merat)
And the green squares should be smaller …
.mtphr-dnt-control-button i {
width: 14px;
height: 14px;
background: #47AA42;
}
.mtphr-dnt-control-button.active i {
background: #yourothercolor;
}
.mtphr-dnt-control-button i:before {
display:none;
}
Thread Starter
merat
(@merat)
OK, I was just about to write that I managed to solve this 🙂
Thank you anyway for your help!
Have a nice day
Thread Starter
merat
(@merat)
Your code is cleaner than mine, so I used yours.
Best Regards
