Blogger：布局页面上的标签部分

Question

我已经为Blogger创建了响应式主题。因此，由于显示的“布局”页面是实际布局的反映，但没有利用媒体查询。一切都在管理区域中以100％的宽度垂直排列（这是预期的）。

我的问题：是否可以通过某种方式标记这些部分，以使标签显示在布局页面上，但查看网站时不显示？当前，在查看布局页面时，有8个部分显示“添加小工具”，并且用户无法知道哪个部分是什么。

Answer 1

是！您可以更改“布局”页面（管理页面）的外观和样式（包括标题），而不会影响实际网站的外观和样式。

回答您有关布局页面标题的问题。举例来说，您有一个TEXT小部件，并且想要将“ TEXT”的标题更改为布局中的实际标题，而不是实际站点中的标题：

1. 找到要处理的小部件的ID（在模板中）：“模板”>“跳转到小部件”>“ Text1”。

“跳转到小部件”中列出的所有小部件都是您希望使用的ID，基于您要解决的ID。

2. 在“ / b：skin”上方，使用CSS设置标题样式（ID以“＃”开头，​​因此请确保将其添加到小部件ID的前面）：

   #layout #text1 .title {
   display:block !important;
   }
   #text1 .title {
   display:none;
   }
   

您可以使用相同的方法通过在CSS代码之前使用代码“ #layout”来更改布局部分中的样式并设置样式。举例来说，您调整了标题的高度，并自动调整了版面部分（管理部分），但这在版面中的标题部分和博客部分之间造成了太多的空间。

执行此操作：

    #header {
    height:147px;
    }

    #layout #header {
    height: 0px !important;
    }

要调整整个布局，例如说宽度，请使用：

     body #layout {
     width: 700px !important; 
     }

如果您没有立即在版式页面上看到更改，请在保存模板后在版式页面上单击刷新按钮。

编辑：（已测试答案的快照）

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS92NXg3Mi5wbmcifQ==” alt =“布局快照，其中小工具标题显示”>

如您所见，窗口小部件的标题显示在布局页面上，而不显示在实际站点上：

Answer 2

无法设置Blogger布局页面的样式，因为它会剥离您添加到模板的样式和内容。

但是您绝对可以找到解决方法来完成此任务。由于它是“布局”面板，因此唯一将使用它的将是博客管理员。安装一些浏览器扩展，它将允许您将自定义css添加到任何网页，并添加一些特定于博客布局页面的CSS规则。

我主要使用Chrome，这是我的操作方式。

1. 已安装Chrome扩展程序-https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

2. 现在添加CSS以自定义布局页面。我的博客页脚有一个b：section，ID为footer-3。所以我加了

   #footer-3:before{content: "footer";}

   作为CSS，我添加了一条规则，仅在以http://www.blogger.com/display?blogID=11开头的URLS上使用CSS（11应该是Blog ID）>]

现在打开布局页面时，它在页脚部分上方添加了文本“页脚”。您也可以找到FireFox的类似扩展名和解决方法。

但是如果您尝试将此功能编码到模板中，将无济于事

Answer 3

admin section更通常称为Layout。

Answer 4

几年后，正确答案现在已过时，不再起作用。但是，Google通过简单地向小部件部分添加name="NameOFSectionHere"属性来添加对命名部分的支持。