Action Button, Blog, & Mobile Responsiveness


#1

Hey peeps,

First and foremost, this theme is awesome. It rivals paid themes and offers a lot of starting entrepreneurs the freedom to make their site look professional without additional fees. It’s great!

But, I do have some questions:

  1. How do I add an action button like this: http://prntscr.com/jsaf5c?
  2. How can we show recent posts, popular posts, and categories on our blog’s sidebar?
  3. How do I make my site more mobile responsive? My site is www.writingpackages.com.

Thanks!


#2

Hello there,

Thank you for contacting us.

1

You can use custom menu item to accomplish the same result. From your dashboard, go to Appearance > Menus; then set your last menu item. Save. To style it becomes visually different with solid border, try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .mainnav ul.menu > li:last-child {
      line-height: 1;
      position: relative;
    }

    .mainnav ul.menu > li:last-child a {
      border: 1px solid #fff;
      padding: 10px 15px;
      position: absolute;
      left: 0;
      top: -7px;
    }

    .mainnav ul.menu > li:last-child a:hover {
      border-color: #ff0000;
      color: #ff0000 !important;
    }

2

Firstly you’ll need to display the sidebar area on your blog by going to Appearance > Customize > Blog options > choose Classic layout. Save. To put widgets in there, go to Appearance > Widget. Then pick a widgets of your choice from the available widgets. For popular posts, you’ll need an additional plugin. I did a quick search in the plugins directory and found this one that might be fit your need. Or you can google it yourself. Or pick one collected in this post.

3

It looks like your site is already responsive, as it’s reported by Google’s Responsive-Test tool. The test result showing that it’s mobile-friendly. However, there might be particular section/element that visually doesn’t look like what you wanted. Please mention in which part/section I can see it. Maybe the header image?

Regards,
Kharis


#3

Hey Kharisblank,

Thanks so much for replying! All your advice has been incredibly helpful! To answer your question, I did mean that the mobile version looks weird.

  1. I’ve posted it on pastebin as I can’t include more than two links: https://pastebin.com/E4RZQfe5.

  2. Is there anyway I could add a support icon at the bottom right like this: http://prntscr.com/jtsjct?

Thanks again!


#4

Combined with previous post.


#5

I’d appreciate if you could take a look at my reply whenever you get the chance!


#6

Hello there,

Let’s address them one by one. First, the alignment of the services buttons on mobile screen. It happens due to they’re actually separated in other columns. As all columns expands 100% on smaller screen, they don’t look to stick each other. The solution for this is use jQuery code to append the button in the same box below the service text. Try doing the below steps, please:

  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($){

      $.fn.addServiceButton = function(e) {

        this.each(function(){

          var i = $.extend({
                  url: "",
                  label: "",
              }, e),
              box  = $(this).children('.roll-icon-box'),
              button = '<a href=" ' + i.url + ' " class="roll-button" title=" ' + i.label + ' " style="margin-top: 20px;">' + i.label + '</a>';

          box.append(button);

        });

      }

      // Add button for service 1
      $( '.widget_sydney_services_type_a .service.col-md-4:nth-of-type(1)' ).addServiceButton({
        url: 'https://writingpackages.com/blog-writing/',
        label: 'Order Here'
      });

      // Add button for service 2
      $( '.widget_sydney_services_type_a .service.col-md-4:nth-of-type(2)' ).addServiceButton({
        url: 'https://writingpackages.com/product-reviews/',
        label: 'Order Here'
      });

      // Add button for service 3
      $( '.widget_sydney_services_type_a .service.col-md-4:nth-of-type(3)' ).addServiceButton({
        url: 'https://writingpackages.com/buying-guides/',
        label: 'Order Here'
      });

    })(jQuery);
  1. Update

In the code above, the button is defined in this code block:

      // Add button for service 1
      $( '.widget_sydney_services_type_a .service.col-md-4:nth-of-type(1)' ).addServiceButton({
        url: 'https://writingpackages.com/blog-writing/',
        label: 'Order Here'
      });

:nth-of-type(1) is selector for the first item.

Regards,
Kharis


#7

Thank you so much, Kharisblank for all your support! It’s fixed the problem! :slight_smile:

For my last requests, here they are:

  1. How can I remove this excess spacing in the aforementioned pastebin link?
  2. Is there any way I could add a support icon at the bottom right in the aforementioned reply?

Thanks again for your support, Kharis! This is the final question – I promise!


#8

1

https://prnt.sc/jtqfhs. Is it can be found in the home page? I didn’t find it, sorry :frowning:

2

That’s a live chat plugin – isn’t native feature of Sydney. You’d need to use extra plugin, like this one https://wordpress.org/plugins/wp-live-chat-support/.

Regards,
Kharis