Friday, December 8, 2017

Sub-menus with Bloggers Simple Template (Part 1)

In this post I'm going to explain, how I added a sub-menu to my blogs page list. It is a common question, how to do this. And there are some solutions out there. But I decided to do a few things differently this might be interesting for others too.

Lets first take a look at the existing widget code. For some reason, the Pagelist widget only allows a list with one level of entries. It has already been asked, if there is a way to adjust the widget code, which looks like this:

        <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
          <b:widget-settings>
            <b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'http://www.wgdd.de/', 'title': 'Home', 'position': 0}, '4785025671937868325': {'href': 'http://www.wgdd.de/p/aquarien.html', 'title': 'Aquarien', 'position': 1}, '3693528163117485839': {'href': 'http://www.wgdd.de/p/heart-of-gold.html', 'title': 'Hardware (Debian)', 'position': 2}}]]></b:widget-setting>
            <b:widget-setting name='homeTitle'>Home</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <option expr:value='data:link.href'>
            <b:attr cond='data:link.isCurrentPage' name='selected' value='selected'/>
            <data:link.title/>
          </option>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&#9660;</span>
    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <li>
            <b:class cond='data:link.isCurrentPage' name='selected'/>
            <a expr:href='data:link.href'><data:link.title/></a>
          </li>
        </b:loop>
      </ul>
    </b:if>

I'll try to explain the code (to my understanding). The variable pageListJson contains the page list as a structure of instanceIDs linked to hashes with key-value-pairs for each page. The value to the key href contains the URL of the page and title the chosen title. The variable is filled by whatever changes you make to the Pagelist widget. The data in this structure is later accessed by values named data:*. There is another variable called homeTitle, which is how you titled your homepage (e.g. Home or Startseite or similar - you configured this in the Pagelist widget). After this, there is the main widget code that creates the resulting HTML web code. If you gave your widget a title, it will be output as <h2> header. And depending, if the code is created for a mobile target or not, the list items are put in a form (mobile device):

<div class='widget PageList' data-version='1' id='PageList1'>
<h2>Pages</h2>
<div class='widget-content'>
<select id='PageList1_select'>
<option selected='selected' value='http://www.wgdd.de/?m=1'>Home</option>
<option value='http://www.wgdd.de/p/aquarien.html?m=1'>Aquarien</option>
<option value='http://www.wgdd.de/p/heart-of-gold.html?m=1'>Hardware (Debian)</option>
</select>

or a list (website):

<div class='widget PageList' data-version='1' id='PageList1'>
<h2>Pages</h2>
<div class='widget-content'>
<ul>
<li class='selected'>
<a href='http://www.wgdd.de/'>Home</a>
</li>
<li>
<a href='http://www.wgdd.de/p/aquarien.html'>Aquarien</a>
</li>
<li>
<a href='http://www.wgdd.de/p/heart-of-gold.html'>Hardware (Debian)</a>
</li>
</ul>

To answer the original question, if the widget code can be adjusted: no solution has been offered yet and I also cannot think of any way to adjust this code to get a submenu properly. There is also the fact, that pageListJson gets its data from the Pagelist widget and the widget won't support any multi-level data structure. The problem could probably easily be fixed by the Google developers I guess, which would also have the advantage of properly supporting this structure in the mobile output (we'll get to that later), but for some reason, the feature has never been added to blogger. So I'm going to make the same approach everybody else does, using an HTML widget and lists. However, my goal was to use the existing CSS code for the Pagelist widget including the usage of the already existing variables for tab colors and stuff. So lets take a look at the existing code first. This is what is already there in the <b:skin>...</b:skin> element holding the CSS and template style stuff (I've shortened the outout to the relevant parts):

    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Blogger
URL:      www.blogger.com
----------------------------------------------- */

/* Variable definitions
   ====================
[..]

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#999999"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="#f5f5f5"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
   </Group>

[..]

   <Group description="Accents" selector=".content-inner">
     <Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#eeeeee"/>
   </Group>

[..]

   <Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" min="0" max="100px" value="30px"/>
   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)"/>
   <Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>

[..]

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

[..]

]]></b:skin>

So there are some already defined variables in the simple blogger template, e.g. tabs.background.color to define the tab background color or tabs.text.color for the tab text color. As you can see, the widget uses the variable values then in the template CSS. And in the resulting website the variables will be replaced by their values.

Ok, so that's where we are. I don't want to re-invent the wheel, so I'm going to make use of these existing variables and code. But I'll have to adjust it to support nested lists. More in another post. Stay tuned...

No comments:

Post a Comment