- This topic has 9 replies, 2 voices, and was last updated 7 years ago by
.
Hello Shufflehound team,
I would like to add a button within the timeline content part with a link that should a) open an external page in a new window OR b) scroll down to another section within the page.
What shortcode should be added to achieve this and how can the button be formatted in various ways (I am looking into using formatting options similar to when adding a “Button” element)?
Thanks.
Hi there,
You could try something like this plugin –Ā https://wordpress.org/plugins/buttons-shortcode-and-widget/
Best regards,
Shufflehound team
Hi again,
I have tried this but it is far from perfect. It comes along with built in styles for the button, e.g., font type is standard that you cannot change from the plugin.
Could one of the button types you have in the theme and I am using elsewhere be not added here simply between <div> sections?
Thanks.
Maybe we can help you to change font for this plugins button to make it look more integrated?
Best regards,
Shufflehound team
Yes, it would be great. I am attaching the website address in the private section.
Explanation:
Button to be formatted: in timeline section in the Masterclasses part of the page
Reference button whose formatting should be used: in title of the page “LEARN MORE”
If you can share the CSS/HTML, I can include it directly in the timeline text editor.
Thanks.
Please try this CSS snippet bellow and let us know if that works (you can place it here – Admin Dashboard -> Appearance -> Theme Settings -> Custom Code -> CSS Code )
body .otw-button { font-family: inherit; border-radius: 35px; background-color: #ccb54a; display: block!important; width: 100%; background-image: none; border: none; box-shadow: none; text-shadow: none; font-size: 13px; padding: 19px 41px; max-width: 240px; transition: all 0.3s ease-in-out; }Hi again,
Thank you! It has got much better, however the animation function does not seem to work and hover colours are not perfect.
The button inherits the built-in hover colour, border colour and text shading as defined by the plugin you recommended. That is also perhaps the reason why the animation does not work. In the plugin you cannot make modifications needed to make the button colours and behaviour fully compliant with the rest of the theme, it looks. Any option to go around this problem w/o the plugin? Or other ideas?
Bonus question:
How can you position the button horizontally in the middle of the timeline box?
We improved some things, so please test this improved CSS snippet, by replacing previous one.
body .otw-button { font-family: inherit; border-radius: 35px!important; background-color: #ccb54a!important; display: block!important; width: 80%; background-image: none!important; border: none!important; box-shadow: none!important; text-shadow: none!important; font-size: 13px!important; padding: 19px 41px; max-width: 240px; transition: all 0.3s ease-in-out!important; letter-spacing:Ā normal; margin: 0 auto; /* For centering button */ } body .otw-button:hover { letter-spacing:Ā 2px!important; }Thank you. Made some small editing still and now it is almost the same as in the theme.
Hats off for the excellent support. You are faster responding questions then myself asking them š
Nice to hear that. š
