Support » Theme: Sydney » Change position of “Call to Action Button”

  • Thank you very much for your support, this is very helpful in the context of this forum. We installed the Theme Syndey on WordPress. There is a textfield on the Front Page, that you can find here: Dashboard – Customize your Site – Header Slider – Call to Action Button. Unfortunately the text field „Starten Sie hier“ is exactly in the middle of the start page. But I always want it at the bottom of the screen, right in the middle. Under the circule. Thanks a lot.
     

    • This topic was modified 2 months, 1 week ago by geoback.
Viewing 13 replies - 1 through 13 (of 13 total)
  • Hello there,

    Please provide us a screenshot with some annotations to point where the button should exactly be located at.

    Use https://cloudup.com/ service to upload your image and share its link in your comment reply.

    Regards,
    Kharis

    geoback

    (@geoback)

    Hello there,

    thanks a lot. Here you can find my provided screenshot https://de.share-your-photo.com/0a150e2daf I want the button where the red arrow ends.

    When you click on the button “Straten Sie hier” the front page scrolls down to URL #primary Here https://de.share-your-photo.com/dbd87f8fd9 you will find another screenshot

    Regards,
    geoback

    Hello there,

    Try doing the below steps:

    1. Install and activate the TC Custom JavaScript plugin
    2. Go To Appearance > Custom JavaScript
    3. Paste the following code into the provided box

    
    (function($){
    
      'use strict'
    
      var slideButton = $('.sydney-hero-area .header-slider a.button-slider');
    
      if( slideButton.length ) {
    
        slideButton.each(function(){
          $(this).wrapAll('<div class="slide-button-wrapper"></div>');
        });
    
      }
    
    })(jQuery);
    

    4. Update
    5. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    
    .header-slider .slide-inner {
      min-height: 100%;
      top: 0;
      -webkit-transform: translateY(0);
    	-moz-transform: translateY(0);
    	-ms-transform: translateY(0);
    	-o-transform: translateY(0);
    	transform: translateY(0);
    }
    
    .header-slider .text-slider {
      position: absolute;
      width: 100%;
      top: 40%;
    }
    
    .slide-button-wrapper {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 25px;
    }
    

    Regards,
    Kharis

    geoback

    (@geoback)

    Hello,

    this worked great for us. Thank you. Now the Button is where we want it to be 🙂 Can we change the square form to a circle form ? Here an example https://de.share-your-photo.com/793fc18b0f

    Best Regards

    geoback

    (@geoback)

    here another idea: can we link a photofile like .jpeg or .png to the “call to action button”? So we could work with an indivual source and change when needed …

    Hello there,

    Try adding this CSS code:

    
    .header-slider a.roll-button.button-slider {
      display: inline-block;
      width: 150px;
      height: 150px;
      padding-top: 45px;
      font-size: 18px;
      text-align: center;
      border-radius: 100%;
    }
    

    Regards,
    Kharis

    geoback

    (@geoback)

    thanks, it work great for us. We addes the CSS code to Appearance > Customize > Additional CSS from dashboard

    Regards,
    geo back

    geoback

    (@geoback)

    upps, the text in the middle of the button is not fitting in the middle, it seams to be more in the right side. Please have a look at my screenshot https://de.share-your-photo.com/85153146a1

    Please provide me a link to your site here, so I can check and troubleshot it directly. We might only need little code changes in there.

    Regards,
    Kharis

    geoback

    (@geoback)

    thanks, please check https://de.share-your-photo.com/052e5500b4

    Regards,
    geo back

    Hello there,

    Thank you for sharing. Try this code:

    
    .header-slider a.roll-button.button-slider {
      display: inline-block;
      width: 128px;
      height: 128px;
      padding-top: 53px;
      font-size: 18px;
      text-align: center;
      border-radius: 90%;
    }
    

    Regards,
    Kharis

    geoback

    (@geoback)

    thanks, this works great. Now the text is in the middle.

    Best Regards,
    geo back

    You’re welcome!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.