Disable particular views in Dynamic Views Blogs

Or: So, how do I hide some views from the dropdown in Dynamic Views blogs?

 Dynamic Views templates on Blogger are rendered client-side and designed to allow the user to select the way in which they want to view the blog. Some views are more appropriate than others though, so it would be good if there was a setting for which views to enable.

Alas, we can hack in a little workaround in a couple of ways.

Hide menu items with custom CSS

Custom CSS can be added to your blog under Template => Customise => Advanced => Add CSS.

Dialog for adding custom CSS to your blog

In this dialog, add a display: none!important; style for any items you want to hide.

li.Magazine {
  display: none!important;
}
Custom CSS for hiding the 'Magazine' view menu item.

Comma separate the li.ItemName CSS selectors for all the items you want; the class names all match the text of the menu item.


Hide menu items with template CSS

The alternative option is to paste the same CSS in a <style class='singleton-element'> element in the head of your template. Dynamic Views doesn't strip out any CSS which lives in a style element with the class 'singleton-element'.

<style class='singleton-element'>
  li.Magazine,
  li.Timeslide {
    display: none!important;
  }
<style>
Template style element for hiding the 'Magazine' view menu item


You can modify your templates HTML in the menu Template => Edit HTML.

Set the default view

In your template, there's a variable in the <b:skin> element which defines the default view loaded by Dynamic Views blogs. Search for "blitzview" and you should see something similar to this:

 
<Variable name="blitzview" description="Initial view type"
          type="automatic" default="sidebar" value="sidebar"/>

Change the 'value' attribute to the view you want (e.g. magazine, timeslide) and it should load that view first!


Happy Blogging!

Luke

Comments

Post a Comment

Popular posts from this blog

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...
Read more