Header Modification ... Add Google Search ... More Than 8 Apps ... Smaller Text

💻 Development
1

I made a bunch of header bar mods.

  1. Add support for 12 icons on the header bar.

  2. Shrink header bar hover text to level that fits “most” single words.

  3. Add Google search box. I had to do this because the “External” app does not open in a new Tab or Window. I use my nextcloud as a HUB for all my daily activity … and losing the “context” of my nextcloud launchpad does not work for me. This allows me to search w/o closing my nextcloud page.

Here’s a video of what it looks like:

Video Of My Modifications

3 Likes
2

Wow this is good!

1 Like
3

Welcome to the Nextcloud community @magic-rat

4

Great work @magic-rat

could you post the details about modifications? especially Nr 1 ist great!

1 Like
5

How did you do this? Did you make a app or edited the core files?

6

*** Note = I edited this post to correct a typo ***

How To: Allow 12 icons in the header.

Step 1 - Locate the file “/nextcloud/core/js/dist/main.js”

Step 2 - Now edit the “main.js” file in 2 places:

- Search for:  "i&&s>8&&(s=8)" and replace with "i&&s>12&&(s=12)"

 - Search for:  "i&&s<8&&(s=8)" and replace with "i&&s<12&&(s=12)"

Step 3 - Save it and Clear your browser’s cache.

1 Like
7

How To: Shrink header bar hover text to level that fits “most” single words.

Step 1 - Locate the file “/nextcloud/core/templates/layout.user.php”

Step 2 - You are going to change the file in 2 places:

     - Change line 65 from: <span> to <span style="font-size: .700em ! important;">

     - Do the same for line 75 (for the word "More ...")  Change <span> to <span style="font-size: .700em ! important;"><?php p($l->t('More')); ?></span>

Step 3 - Save it. Clear browser cache.

8

How To: Add Google search box.

This requires you to:

Step 1.

Edit: “/nextcloud/lib/public/AppFramework/Http/ContentSecurityPolicy.php”

You are going to allow array Domains which can be used as target for forms. This means you have to explicitly allow “Google”. To do this you need to add ‘http://*.google.com’ below ‘‘self’’, … as I have below.

/** @var array Domains which can be used as target for forms */
protected $allowedFormActionDomains = [
	'\'self\'',
	'http://*.google.com'
];

Step 2.

Create a file called: /nextcloud/core/templates/myGoogle.php

… and put this code in it …

<span>&nbsp; &nbsp; </span>
<form action="http://www.google.com/search" method="get" target="_blank">
    <input type="text" name="q" size="32" maxlength="256" value="">
    <input type="submit" name="btnG" value="Google It">
</form>

Step 3.

Modify /nextcloud/core/templates/layout.user.php

… to include the file in step 2 … but only for desktops (not mobile devices).

Put the code below at line 71 … (below the “<?php endforeach; ?>” tag …

                <!-- Show the google box code-->
                <li data-id="<?php p($entry['id']); ?>" class="hidden" tabindex="-1" style="padding: 6px 10px  ! important;">
                    	<!-- Show the google box code-->
                        <?php 
                        function isMobile() {
                            return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
                        }
                        
                        if(isMobile()){
                            // Do something for only mobile users
                        }
                        else {
                            include ("myGoogle.php"); // Do something for only desktop users
                        }
                        ?>
                </li>
                <!-- Show the google box code-->
1 Like
9

Wow, thank you!

10

works good, but I had to change the strings as this way (replace both 8 with 12):

  • Search for: “i&&s>8&&(s=8)” and replace with “i&&s>12&&(s=12)”

  • Search for: “i&&s<8&&(s=8)” and replace with “i&&s<12&&(s=12)”

11

Yes. Yours is correct I had a typo in my post.

I will try to edit it