帝国模板怎么修改样式？简单几步快速搞定网站美化！

我的“帝国”美化实战记录：从丑小鸭到能看

我那个网站，已经半年没怎么动过了，模板还停在那种老掉牙的灰色调。前几天，一个以前的老同事突然给我发微信，说想在我站上投个小广告试试水。结果他点进去一看，给我发了好几个“卧槽”的表情包，原话是：“你这站怎么跟十年前的盗版游戏页似的，赶紧改改，不然我这广告费都不好意思给你。”

这话把我给气得不轻，毕竟是自己用心搭起来的站。我心想不行，今天必须把这老大难的样式问题给解决了。这根本不是技术难题，就是我犯懒一直拖着！

第一步：定位文件和做保险

干我们这行的，动老系统之前，第一原则就是“备份”。不然改崩了，神仙都救不回来。我登录了我的FTP，直奔主题，开始查找帝国CMS的模板文件到底藏在哪儿了。在根目录下，我找到了那个叫`d`的文件夹，里面有个`templet`目录，这肯定是模板老巢了。

我要改的是外观样式，也就是CSS。我进去一翻，果不其然，发现了一个叫`*`的文件。我二话不说，先把整个`templet`目录拖下来，在本地存了个保险，就算改坏了，一键还原，不慌！

第二步：找出丑在哪儿和确认目标

文件是找到了，但具体要改哪儿？我这人眼神不懒得从头到尾看代码。我打开网站前台，按下了F12（也就是那个开发者工具），鼠标挪到我那丑到爆的导航栏那里，点了几下。屏幕右边马上就显示出来了它的名字，我一看，它对应的ID是`#header`，背景色竟然是那种纯纯的白色，一点特色都没有。

我的目标很明确：把这个导航栏的背景色给我换了，再把网站整体的字体给调大一点，看起来舒服些。

第三步：动手开干和实现美化

我立马在本地用文本编辑器打开了那个`*`文件，利用搜索功能，定位到了`#header`相关的代码段。我的实践过程很简单，就做了这么几件事：

• 替换背景色：我找到了`#header`里面控制背景颜色的那行，直接把原来的白色代码删掉了，换成了一个我之前在配色网站上挑好的深蓝，让它一下子亮起来。
• 调整字体：我又找到了控制全局字体大小的`body`标签，发现字体特别小，看起来很费力。我果断把`font-size`的值调大了两号，让字号更饱满一些。
• 修边角：顺手把底部版权信息那块的颜色也改了改，让它跟新的导航栏颜色呼应一下，看起来更协调。

一步：上传测试和收工

所有的代码改动在本地确认没问题之后，我保存了文件，然后重新上传到FTP的`templet`目录，直接替换了原来的`*`。改完之后，第一件事就是清空浏览器缓存，然后刷新我的网站。

新颜色一出来，效果简直是立竿见影，整个网站一下子就活过来了！深蓝色的导航条非常醒目，字体也变大了，看起来终于像个现代的站了。我赶紧截图发给了那个老同事，他回了一句：“可以兄弟，这下广告可以安排了。”

这事儿真没啥高深的，就是“定位、修改、替换”三步走。我以前是真懒，一直觉得改模板是个大工程。但通过这回实践，我发现这种样式美化，耗了我不到半小时，却解决了我心头一个老大难的问题。所以说，别总觉得老系统就非得是那个老样子，只要你肯动手，它也能焕发第二春。今天的实践记录就分享到这儿，下次再捣鼓点别的东西！