Home » Tips

Category: Tips

How to make a Divi full width slider full height also

If you’re using Elegant Theme’s Divi, and you have a full width slider at the top of your page you wish to extend down to the bottom of the view port, at first add a css class name to< that particular slider module, say: my_slider.

After that add the following css code into custom css of your theme’s Divi theme options

.my_slider.et_pb_slider .et_pb_slide {
height: calc(100vh - 80px) ;

The above CSS takes into account a header height (which contains the logo and navigation) of 80px.

How to find the original source of an image you find on the Internet

Scenario: you see a digital image on Facebook, it might be a great photo, or a digital print of a great piece of artwork you love. You want to find out more about this image.

Solution: use Google reverse image lookup.

  1. If you’re in Facebook, click the image to open it in full view.
  2. Once you see the image in full view, right-click on it, and choose open Open image in new tab. This opens the image from its source. It might look something like: https://scontent.fper1-1.fna.fbcdn.net/v/t1.0-9/13925419_10153997905159285_7833260870309389435_n.jpg?oh=c3f43ce743df9568aa040a613aa24875&oe=5849B3EC, which is:
    horse art
  3. Copy the URL. You will need to click in your browser’s address bar, highlight the www.something.com/something-else-etc, right-click on this, and choose copy
    copy url
  4. Go to https://images.google.com, or search for Google Images.
  5. Once you’re at Google Images, click on the search by image button:
    search by image
  6. Paste the image URL into the Paste Image URL box, by right-clicking inside this field and choosing Paste, then click Search by Image
  7. You will then see a list of URLs where this image has been used.
  8. With luck, you will find a result that gives credit to the original author of the image.
  9. If you click on Visually similar images, you will see search results where you can choose Search Tools, then select Large images:
    large image size


Adding historical graphs to the web’s best stock portfolio spreadsheet

If you’re looking for a spreadsheet to accurately track the performance your stock/equity portfolio look no further than Inve$tment Moats Stock Portfolio Tracker.

This post is about how to add historical tracking graphs to your stock portfolio tracker spreadsheet, and assumes you have made your own copy of the spreadsheet above into your own Google Sheets account.

  1. Insert a new sheet in the spreadsheet. Call it History.
  2. In Row 20, enter the following column headers:
    Date Stock Summary USD Stock Summary (local)
  3. In cell A21, enter today’s date.
  4. In cell A22, enter the value =‘Portfolio Summary’!D5
  5. In cell A23, enter the value =‘Portfolio Summary’!D4
  6. Select cell range A20:B21, and select Insert > Chart
  7. Choose Line Chart, under Chart Types.
  8. Select the Customize tab, and enter a title for your graph
  9. Click Insert
  10. Drag the chart into position at cell A1
  11. Select cell range A20:A21 and C20:C21
  12. Choose Line Chart, under Chart Types.
  13. Select the Customize tab, and enter a title for your graph
  14. Click Insert
  15. Drag the chart into position next to the first chart
  16. Now comes the automation:
  17. Select Tools > Script Editor
  18. At the bottom of the code on the right, at line 25, enter the following code:
    function recordHistory() {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getSheetByName("Stock History");
    var source = sheet.getRange("B21:C21");
    var values = source.getValues();
    values[0][2] = values[0][1];
    values[0][1] = values[0][0];
    values[0][0] = new Date();
  19. Click Save
    google sheets script editor save
  20. Select recordHistory from the list of functions
    google sheets script editor select function
  21. Select the Trigger’s button:
    google sheets script editor timer
  22. Ensure recordHistory runs every midnight
    google sheets script editor every midnight
  23. Click Save again, and you’re finished.

Any problems or issues, let me know by leaving a comment.

How to edit or change normal.dot in Microsoft Word 2016

1. Find, open, and edit normal.dot

In File Explorer, navigate to C:\Users\your-username\AppData\Roaming\Microsoft\Templates

Inside this folder, make a backup copy of Normal (select it with your left mouse click, press Ctrl + C, then Ctrl + V).

Next, double click on Normal
Open Word normal.dot
Edit the file as desired.

I edit the file’s paragraph styles, by ensuring Title, Header 1, Header 2 all have paragraph “after spacing” equal to paragraph “before spacing”.

To do this, I right click on the style (either Title, Header 1 etc.) in the Styles section of the Home tab, select Modify, choose Format at bottom left of the new window, choose Paragraph, and under Spacing, I ensure Before and After are the same (except for Title, where I leave Before at 0). I usually increase the spacing to 12 pt.

2. Apply the updated normal.dot to your document

  1. Open the document that needs a new template attached.

  2. Click the File tab.

  3. On the File screen, choose the Options command.

    The Word Options dialog box appears.

  4. Choose Add-Ins from the left side of the Word Options dialog box.

  5. Choose Templates from the Manage drop-down list.

    You find the Manage drop-down list near the bottom of the dialog box.

  6. Click the Go button.

    The Templates and Add-ins dialog box appears. You should see which template is attached to the document, such as Normal.

  7. Click the Attach button.

    Word displays the Attach Template dialog box, which looks and works like the Open dialog box.

  8. Select the template you want to attach.

    The templates listed are stored on your computer, so you don’t see the full range of templates that you would find on the New screen.

  9. Click the Open button.

    The template is attached to your document.

  10. Ensure that the option Automatically Update Document Styles is selected.

    Updating styles means that your document’s current styles are changed to reflect those of the new template, which is probably what you want.

  11. Click OK.

    The styles stored in that template are now available to your document, and the document is now attached to the template.

How to enable web push notifications for your WordPress blog

If you visit Product Hunt, you’ll be prompted by your browser (if your browser is Chrome, Firefox, Safari, or Android) if you wish to receive notifications from this site:

web push notifications
If you click yes, every time Product Hunt release a new blog post, your computer will notify you with a pop up message in the lower right hand corner of your monitor. Try subscribing to Product Hunt and see what happens.

If you ever want to unsubscribe from notifications, click the gear icon at bottom right of the notification window and choose Block next to the site you want to unsubscribe from.

If you’d like this on your own website, you can have it through various browser web push notification providers.

This blog post is about installing web push notifications on your WordPress website using One Signal.

For the most seamless user experience, your site needs to have a secure certificate so it loads securely over https. I’ll be publishing a blog post about how to gain a free SSL certificate through Let’s Encrypt soon.

If your site only loads over http, One Signal displays a red bell icon at bottom right of your webpage rather than prompting the user if they want to subscribe using the notification window above.

one signal icon http

How to install OneSignal on your WordPress website

  1. Install OneSignal WordPress plugin

Download or install the OneSignal WordPress plugin. Enable the plugin.

2. Sign up for a OneSignal account

Visit https://www.onesignal.com/ in a new browser tab and click Sign Up Free.

3. Add an App

  • Once you’ve signed in, click Add a new app
  • Give the app a name – this name is not public
  • In the Select one platform to configure window, select Website Push and click Next
    select website push
  • At this next step we’ll first configure Google Chrome and Mozilla Firefox – select this option
  • At this stage, open the Google Services Wizard in a new browser tab
  • Type any name to create a new app, or select an existing Google app from the dropdown.
  • In this example, we create an app named test-app
  • We do not use the Android package name, but you must enter a value to continue. Please use the value test.test as shown below.
  • Choose and configure services to continue.
  • Wait a minute for the project to be created.
  • Click Enable Google Cloud Messaging.
  • Get your Google keys. Save the two values listed
    • You’ll need your Server API Key later in our SDK Installation guide
    • You’ll need your Sender ID, also known as the Project Number, later as well
  • Go back to your OneSignal browser tab, and:
    1. Enter your site URL
    2. Enter your Google Server API Key
    3. Leave Default Notification Icon URL blank unless you want to customize the notification URL
    4. If necessary, click My site is not fully HTTPS if your site is on HTTP. If you select this:
      • Enter a string to use as your OneSignal subdomain – use a pretty name if you wish
      • Enter your Google Project Number. You can get this by:
        • visiting https://console.developers.google.com/iam-admin/projects
        • selecting your project
        • click the 3 dot icon at top right, and select Project Information
          google console project information
    5. On the next screen Select your target SDK, select WordPress
    6. Make note of the Your Rest API Key and Your App ID
    7. Go back to your WordPress admin browser tab, select OneSignal Push in the left hand admin navigation column
    8. Go to the Configuration tab
    9. Enter Your Rest API Key and Your App ID
    10. Enter your Google Project Number. You can get this by following the instructions above
    11. Scroll down to the bottom of the page and select Save.
    12. Open your WordPress website home page in a new browser tab. Confirm you’re being prompted to allow notifications (if your site is on HTTPS) or you see a red bell icon at bottom right (if you’re on HTTP).
    13. Once confirmed, go back to your OneSignal browser tab and click Check Subscribed Users.
    14. Click Next, and if you’re prompted for a User ID, open https://onesignal.com/apps/ in a new browser tab, click your application name, in the left hand navigation column click All Users, and grab the Player ID. Enter this as the User ID back in your last browser tab, and click Next
    15. Click Send Test Notification
    16. Wait 10 seconds, and hopefully a notification like the following will display on your screen:
      test notification
    17. Click the message. You should see a message in your browser congratulating you that your app is now setup for push notifications:
      one signal congratulations
    18. Go back to your last browser tab
    19. Click Check Notification Status. Hopefully you will be congratulated again:
      one signal congratulations
    20. Good job! Click Done.
    21. You’ve now set up web push notifications for Google Chrome and Mozilla Firefox.
    22. If you’d like to do the same for Apple Safari, continue following.
    23. In the same browser tab you just clicked Done in, click App Settings on the left, scroll down to Safari and click Configure.
    24. Enter your site name and URL
    25. Click Save
    26. Select WordPress and click Next
    27. Grab Your Safari Web ID
    28. Go to your WordPress admin > OneSignal Push (on the left) > Configuration tab, and enter your Safari Web ID. Scroll to the bottom of the page and click Save
    29. Load your site in a modern version of Safari. Ask your mate to if you don’t have Safari. Ensure Safari asks if you want to subscribe to notifications. Click Yes.
    30. Go back to the last OneSignal browser tab you were in and click Check Subscribed Users.
    31. Go back to step 14 above, and follow through to step 20.
    32. You’ve now set up web push notifications for Apple Safari also.

This just scratches the surface of what OneSignal can do. If you go back to your App Settings in OneSignal, you can see you can set up notifications for Mobile & Desktop Platforms too:

  • Apple iOS
  • Google Android
  • Windows Phone 8.0
  • Windows Phone 8.1+
  • Amazon Fire (Amazon’s version of the iPad)
  • Mac OS X
  • Google Chrome Apps & Extensions

If you want me to cover those too, drop a comment and say so. 🙂