python橙色_如何自定义橙色Firefox菜单按钮的外观

python橙色

Do you get tired of looking at the orange Firefox menu button? Firefox’s interface is completely customizable, so you can change the color, text, and other properties of the Firefox menu button to create your own custom look.

您是否厌倦了查看橙色的Firefox菜单按钮？ Firefox的界面是完全可定制的，因此您可以更改Firefox菜单按钮的颜色，文本和其他属性，以创建自己的自定义外观。

To change the appearance of the Firefox menu button, we will be editing the userChrome.css file. This file allows you to change the appearance of any part of Firefox, as well as its functionality.

要更改Firefox菜单按钮的外观，我们将编辑userChrome.css文件。 该文件使您可以更改Firefox的任何部分的外观及其功能。

Before diving into editing the userChrome.css file, we will install an add-on, called ChromEdit Plus, that will allow us to easily edit the file and save it in the correct format. Click the following link to go to the ChromEdit Plus webpage.

在开始编辑userChrome.css文件之前，我们将安装一个名为ChromEdit Plus的加载项，使我们可以轻松地编辑该文件并将其保存为正确的格式。 单击以下链接转到ChromEdit Plus网页。

http://webdesigns.ms11.net/chromeditp.html

http://webdesigns.ms11.net/chromeditp.html

Click the Add to Firefox button on the page.

单击页面上的“添加到Firefox”按钮。

The following message may display. Click Allow to continue installing the ChromEdit Plus add-on.

可能显示以下消息。 单击“允许”继续安装ChromEdit Plus附加组件。

NOTE: Be very careful about what you allow when installing extensions and other software. If you are not sure about the product or don’t trust the company, don’t install. We tested ChromEdit Plus and found it to be safe and reliable.

注意：在安装扩展和其他软件时，请务必小心。 如果您不确定产品或不信任公司，请不要安装。 我们测试了ChromEdit Plus，发现它安全可靠。

The Software Installation dialog box displays. Click Install Now, which may not be available until a countdown finishes.

显示“软件安装”对话框。 单击立即安装，直到倒计时完成才可用。

NOTE: You can change the length of the countdown on the Install button, but we don’t recommend disabling it.

注意：您可以在“安装”按钮上更改倒计时的长度 ，但我们不建议您禁用它。

You must restart Firefox to finish the installation. Click Restart Now on the popup dialog.

您必须重新启动Firefox才能完成安装。 在弹出对话框中单击立即重新启动。

Once Firefox restarts, the ChromEdit Plus button is added to the right of the Address box. Click it to open the ChromEdit Plus window.

Firefox重新启动后，ChromEdit Plus按钮将添加到“地址”框的右侧。 单击它打开ChromEdit Plus窗口。

There are three tabs by default on the ChromEdit Plus window. We will be editing the userChrome.css file, which is on the first tab. If the tab is empty, copy and paste the following text onto the userChrome.css tab and click Save. This gives you a default userChrome.css file.

默认情况下，ChromEdit Plus窗口上有三个选项卡。 我们将编辑第一个标签上的userChrome.css文件。 如果标签为空，请将以下文本复制并粘贴到userChrome.css标签上，然后单击保存。 这为您提供了一个默认的userChrome.css文件。

@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”); #appmenu-button { background: #orange !important; } #appmenu-button dropmarker:before { content: “Firefox” !important; color: #FFFFFF !important; } #appmenu-button .button-text { display: none !important; }

@namespace url(“ http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”)； ＃appmenu-button { 背景：#orange！important; } ＃appmenu-button dropmarker：之前{ 内容：“ Firefox”！important; 颜色：#FFFFFF！重要； } ＃appmenu-button .button-text { 显示：无！重要； }

You may already have a userChrome.css file, in which case there will already be text on the userChrome.css tab. Copy all the text above except for the first line, the @namespace line, and paste it onto the tab somewhere after the @namespace line. If you want to keep what you already have, you can paste the above text at the end of the file.

您可能已经有一个userChrome.css文件，在这种情况下，userChrome.css选项卡上将已经有文本。 复制第一行@namespace行以外的所有上面的文本，并将其粘贴到选项卡上@namespace行之后的某处。 如果要保留现有内容，可以将以上文本粘贴到文件末尾。

IMPORTANT: Make sure all the quotes in the userChrome.css are NOT smart quotes, including the ones in the @namespace line. They should be ordinary, straight quotes. If any of them are smart quotes, the file will not affect the appearance of Firefox at all.

重要说明：确保userChrome.css中的所有引号都不是智能引号，包括@namespace行中的引号。 它们应该是普通的，直接的引号。 如果其中任何一个都是智能引号，则该文件完全不会影响Firefox的外观。

Click Restart to restart Firefox using the new or revised userChrome.css file.

单击重新启动以使用新的或修订的userChrome.css文件重新启动Firefox。

In this example, we are going to change the background color to a dark blue and change the “Firefox” text to “How-To Geek”.

在此示例中，我们将背景色更改为深蓝色，并将“ Firefox”文本更改为“ How-To Geek”。

To change the background color, change the “#orange” text on the “background” line in the “#appmenu-button” section to a different color, using the hex color code, or HTML color code. For example, we chose a dark blue with the hex color code of #2C4362.

若要更改背景颜色，请使用十六进制颜色代码或HTML颜色代码将“＃appmenu-button”部分中“ background”行上的“ #orange”文本更改为其他颜色。 例如，我们选择了深蓝色，其十六进制颜色代码为＃2C4362。

NOTE: To figure out the hex color code for a color you want, see our articles about getting hex color codes from decimal RGB colors, selecting colors from anywhere on the screen, and getting color codes in multiple formats.

注意：要找出所需颜色的十六进制颜色代码，请参阅我们的文章，有关如何从十进制RGB颜色获取十六进制颜色代码，从 屏幕上的任何位置选择颜色以及获取多种格式的颜色代码 。

To change the text on the button, change the “Firefox” text on the “content” line in the “#appmenu-button dropmarker:before” section to your desired text, such as “How-To Geek “. We added a space after the text to have more space between the text and the drop-down arrow on the button.

要更改按钮上的文本，请将“＃appmenu-button dropmarker：before”部分中“ content”行上的“ Firefox”文本更改为所需的文本，例如“ How-To Geek”。 我们在文本后添加了一个空格，以使文本和按钮上的下拉箭头之间具有更大的空间。

You can choose to change the color of the text as well by changing the “color” line in the same “#appmenu-button dropmarker:before” section. We left the text color as white (#FFFFFF), but you can change it to something like a light gray (#F2F2F2), or something like that.

您也可以通过更改同一“＃appmenu-button dropmarker：before”部分中的“ color”行来选择更改文本的颜色。 我们将文本颜色保留为白色(#FFFFFF)，但是您可以将其更改为浅灰色(＃F2F2F2)之类的颜色。

Click Save and then Restart to have the changes take effect.

单击保存，然后单击重新启动以使更改生效。

The button is now dark blue and says “How-To Geek”.

现在，该按钮为深蓝色，并显示“ How-To Geek”。

You can also add a background image to the button, in addition to changing the background color. We created an image that has the How-To Geek favicon on the left and a transparent background so the dark blue background color shows through. To add a background image to your button, add the following line to the “#appmenu-button” section, changing the path in the quotes to the location of your image on your computer. Leave the “file:///” in the path.

除了更改背景颜色之外，还可以向按钮添加背景图像。 我们创建了一个图像，该图像的左侧有How-To Geek图标，背景为透明，因此可以显示深蓝色的背景色。 要将背景图像添加到按钮，请将以下行添加到“＃appmenu-button”部分，将引号中的路径更改为图像在计算机上的位置。 在路径中保留“ file：///”。

background-image: url(“file:///C:/Users/Lori/Pictures/htg_background.png”) !important;

背景图片：url(“ file：/// C：/Users/Lori/Pictures/htg_background.png”)！important;

Click Save and Restart again.

单击保存并再次重新启动。

Now our button is complete.

现在我们的按钮完成了。

You can also customize the Firefox menu button by converting it into an icon. We have also published many other tips and and tweaks for getting the most out of Firefox.

您也可以通过将Firefox菜单按钮转换为图标来自定义它。 我们还发布了许多其他技巧和调整，以充分利用Firefox 。

翻译自: https://www.howtogeek.com/134591/how-to-customize-the-appearance-of-the-orange-firefox-menu-button/

python橙色