Showing posts with label How-To. Show all posts
Showing posts with label How-To. Show all posts

How To Create Your Own Personalized Chrome Theme

Adding a theme to your web browser of choice is a great way of personalizing it. Depending on the browser you are using, themes may modify all interface elements or only some.

Google Chrome limits what themes can modify. If you check out the official themes category on the store you will notice that themes may alter colors and background images only but not icons or other interface elements.

While you can download and install one of the available themes, you may prefer a theme to which you can add your own personal note to.

This is thankfully easy as well as Google created a theme application for Chrome that lets you do just that.

My Chrome Theme is a free app for Chrome that you can install in all supported versions of the browser. Once installed, you can load it from the browser's new tab apps page or by loading chrome://apps/ directly.

The process itself requires three steps.
1. Select the background image for the theme




This image is displayed on the new tab page of the browser. Select an image from the local system to start. Make sure it has the right dimensions to fit the browser window or display that you are using. Please note large images may not be shown in full depending on the window size of the browser.

You do get options to adjust the position of the image, for instance to fit it on the screen, center it or use custom dimensions.

A couple of image effects can be applied to the image as well, sepia, inverted or posterized for example.

2. Color your theme




Now it is time to change the colors of the theme. You can modify four colors in total:
  •     The color of the active tab.
  •     The color of background tabs.
  •     The Chrome border color.
  •     The color of the background.

3. Name theme



Name the theme that you have just created and add an optional description to it if you like. Note that the description will be visible if you share your theme.

You get options to install the theme and to share it on the final page of the process. If you select install, a Chrome extension file is created and the installation dialog displayed to you.

You need to accept the installation in the prompt that comes up. Once you have done that, colors are changed automatically to the theme colors.

Open the new tab page with Ctrl-t to see the background image in action as well.

If you select share, you get options to share it on Google+ or via a direct link.

The theme cannot be edited once it has been created. The only option you have is to create a new theme instead to start over.

The theme that you have created is displayed in the lower half of the apps start screen. You can move the mouse cursor over it and click on the small x icon to delete it, or click anywhere else to open the sharing page again.

If you select to remove the theme, you get a warning prompt first and if you confirm it, it is removed from the system. Note that it is still installed in chrome though.

You can reset to the default theme on chrome://settings/. Just click on reset to default theme under appearance to do so. Note that this happens directly without confirmation prompt.

In the similar way you can also create your own Firefox theme.

How To Create Your Own FireFox Theme


The Firefox web browser supports two different theme types: so-called Personas or light themes, and complete themes.

The main difference between the two is that Personas modify only colors and backgrounds, much like Chrome themes do, while complete themes can modify nearly every element in the interface.

Mozilla, for some reason, has focused on light themes in recent times and while you can still get full themes for Firefox, they have taken a backseat because of it.

This guide walks you through the steps of creating your own light theme. It is actually rather easy thanks to the limitations they impose on what can be changed.

Lets take a look at requirements first
  • You need the Firefox add-on Personas Plus to load the customizations. This is an official Mozilla theme that adds functionality to Personas.
  • You need an image editor to create the Personas header image that you want used.
  • The header dimensions are 3000x200 pixels.
  • The footer dimensions are 3000x100 pixels.

Getting started

The first thing you need to do is find a suitable image. You can also create your own instead, for instance in the image editor of choice.

In Paint.net for example, you select File > New, set the width to 3000 and height to 200 to get started.

Now you can use the gradient tool to create gradiants for example. The benefit of this is that header images with gradients or plain colors fit better in the header usually as images may make it difficult to read tab text for example. They are also smaller in size by a large margin.



If you want to use part of an existing image instead, the process is slightly different. You can check out Reddit's ultra HD group for inspiration for example.


Once you have found one load it in the image editor of choice. If you are using Paint.net, use the selection tool to highlight a 3000x200 area on the image and press Ctrl-c once you have done so.

Use Ctrl-n to create a new image with the 3000x200 dimensions, and Ctrl-v to paste the copied part of the images on to it. If you are asked to expand the canvas, don't but keep the original size.

Save the image to your local system and repeat the process for the footer image.

Note that the footer area is not displayed anymore by default by Firefox due to recent changes made by Mozilla.

Adding the theme to Firefox
Now that you have created the header image for the theme, all that is left to do is to create it in Firefox.

Install the Personas Plus add-on if you have not done so already and restart the browser to complete the installation.

It adds an icon to the main toolbar that you can click on for options. Click on it and select preferences from the menu.

Check the "enable custom personas" option when the preferences window opens.




Once done, click on the menu icon again and select Custom Persona, Edit from the menu.



Select the browse button next to header (and footer as well) and pick the image that you have created for that spot.

The theme is applied right away so that you can see it in action. Note that you may need to change the text color depending on the theme as Firefox may apply a shadow effect to the font automatically in the tab bar. This happens for example when you select a light background as you may not see the text on tabs otherwise because of the light text color.

Just switch to a darker color in this case and the shadow effect is gone.


Want to create your own Chrome theme ?

How to fix the “no data received” error in Google Chrome



Sometimes when you are trying to connect to websites or services in Google Chrome, you may receive the error message no date received instead of the website you wanted to load.

The message indicates a data transfer issue that is sometimes difficult to correct as it may not always be caused on your end.

For some users of the browser, no data received may appear completely random as they may be able to load sites right after the error, or may not experience it at all for a prolonged period of time.

Anyway, when the error is displayed you get two options on the screen. The first allows you to reload the page which works similar to hitting F5 on the keyboard or using the reload button in Chrome's interface.

The more button on the other hand reveals additional information about the error. Common messages that you may get here include Error code: ERR_EMPTY_RESPONSE, ERR_TIMED_OUT, Error 324 and the server closed the connection without sending any data.

You can try a couple of things to load the website correctly:
 
  • If reload has not worked, try the shortcut Ctrl-F5 which reloads the page bypassing the local cache.

  • Press F12, select Resources in the Developer Tools interface that opens up, and there cookies. Right-click on any domain listed here and select clear to remove cookies from it. Try to reload the page afterwards.

  • Press Ctrl-Shift-n to open a private browsing window and try to open the website or service in that new window.

  • Try to load the website with the correct protocol directly. If you want to open a site available using https://, use this directly when opening it and not http://.

  • Try another browser. Download a portable version of Firefox, or run Internet Explorer or any other browser available on your system. This is just to verify if it is a issue of Chrome or a system-wide issue. If you can open the site in the other browser, it is a Chrome-specific issue.

  • You can also try to use a mobile browser to connect to the url if you have one available.

  • Try using a web proxy server to connect to the site. Make sure you don't use it to sign in to a service or use it to make purchase or reveal other sensitive data but only to check if the site or service loads when it is used.

  • Try to disable add-ons and scripts that may be running in the background. Open chrome://extensions/ and disable them all, or disallow them to run in incognito mode and run that mode again.

  • Make sure that the site in question is not blocked by security software, firewall or other means such as the hosts file or an adblocker. This can be difficult to assess depending on how many programs you have installed and how well you know your way around computers.

  • If you are using a VPN, try to disable it if at all possible.

  • Scan the computer for viruses and other malware using software such as Malwarebytes Anti-Malware. It is free, powerful and can run next to any installed security software you may have.

  • Restart your computer and router.

As you can see, there are several solutions available. There is unfortunately no single solution that fixes the issue for all users.

As mentioned earlier, this can also be a remote issue. If nothing helps, try connecting to the site at a later point in time.