Hannover

Hannover is ideal for photographers. You can show all gallery and image posts on one portfolio page or only posts from one category. Besides that, you can create category pages to show only a part of your portfolio and an archive function is integrated, too. You can select from two page templates for your front page and display a random image from a gallery or display the gallery as a slider. Furthermore, you can display all galleries on your page as a slider instead of showing the images singly.

Theme functions

Responsive design

Because of its responsive design, Hannover is displayed well on a broad range of devices — from PC to smartphone.

Page templates

The portfolio view with the alternative layout. (Images: Dennis Brinkmann)

Hannover comes with different page templates. One template allows you to display all posts with the post format gallery or image — you can also limit it to posts from one category. Furthermore, you can use the template Portfolio category page to display portfolio elements from one category, choosable in the customizer.

With the Portfolio archive page template you can create a page which shows archived portfolio elements. These elements are marked as archived with a category.

A portfolio category with the standard layout. (Images: Dennis Brinkmann)

Furthermore, there is a page template for displaying a page without a sidebar. Meant for the home page are two templates, which let you display a gallery as a slider or a random image from the gallery.

The front page template with a random image from a gallery. (Images: Dennis Brinkmann)

Besides the main menu in the header, there is one menu area in the footer. With the menu position social menu you can display links to your social media channels in the footer.

Beginning of the blog view. (Image: Dennis Brinkmann)

Widget areas

Hannover brings a normal sidebar which is displayed in the blog, single posts, and pages. It is not displayed on a portfolio element’s single view and on the portfolio page templates.

Customizer

Hannover comes with a few customizer options. You can adjust the number of posts per page for the portfolio, archive, and portfolio category page template. Furthermore, you can enable an alternative layout for each of these templates.

You can also control if and which category should be used for portfolio elements, if you need an archive and which category to use for archive elements. Moreover, you can exclude portfolio elements from the blog. Besides that, you can exclude the archive category from the category widget.

The slider options let you enable autoplay and set a pause time. Furthermore, you can tick the option to display all galleries on the website as sliders.

Translation

Hannover is translation ready and currently available in English and German. If you want to translate it to another language, you can do it on translate.wordpress.org.

Questions/Suggestions/Critique?

Questions, suggestions or critique? Leave a comment!

39 comments on »Hannover«

  1. Carmen

    hello Florian

    I selected your template as the theme for my new website. I am just starting into this but I already have a problem with it in word press. I have created the pages About/Home/Contact... the usual stuff but they don't show up on the top right on the homepage of the website as a menu should do. How can i fix this? Also can i customise the menu and add more pages than just home, contact, portfolio and about?

    thank you so much!!!!!

    Carmen

    Reply
    1. Florian

      Hi Carmen,

      thanks for using my theme.

      »I have created the pages About/Home/Contact… the usual stuff but they don’t show up on the top right on the homepage of the website as a menu should do. How can i fix this?«

      You have to create a menu and add it to the menu position Primary Menu. You can create a menu either via the customizer (AppearanceCustomizeMenus) or via AppearanceMenus.

      »Also can i customise the menu and add more pages than just home, contact, portfolio and about?«

      Of course! Just add to the menu what you want 🙂

      Hope that helps!
      Florian

      Reply
      1. Carmen

        i like that your theme is really clean minimal and has a nice aesthetic!
        Thank you for the fast response. I apologise in advance but I will disturb you with some more questions until I get the hang of things but hopefully it will be worth an amazing result and this might be helpful to other people who decided to use you theme.

        Here are my new questions:

        1- How can I change the font on the website title ( i don't have a logo at the moment) and of the rest of the content like the menu. Can the font be changed? Also the size of the font of my pages is actually much bigger than the one of the title of the website and that also looks very strange. For the same reason can I decide the size of the font of website title and the single pages?

        2- how can i "hide" delete or minimise the part that says " theme Hannover by FlorianBrinkmann". Sorry i am asking but i hope you agree with me that it looks really funny on the centre home page of the website.

        3- is there the option to have a slider format for the images I want to display for each of my works?

        thank you so much for all your precious help!
        Actually if you have a youtube video tutorial on how to use your theme that would be fantastic and maybe I would stop disturbing you 🙂

        thanks

        Carmen

        Reply
      2. Carmen

        hello Florian

        Thank you for your rapid feedback.
        As i cannot find any tutorial on youtube made for your template i will continue to bug you with questions.
        How can I decide the font and size of all the text going on the website. The actual title of my website (i don't have a logo at the moment) is in a font I would like to change. Also the size of the text is smaller than the size on the title pages which I am not crazy about. I saw that in your demo as well the title of the pages ( like sports for example) is bigger than the actual font of the website title ( Hannover) Can this be changed?

        Also can i use the slider system you have on your home page in the demo for all the photos displayed in the single pages of the portfolio?

        thank you so much!

        Carmen

        Reply
        1. Florian

          Hi Carmen,

          to your first question (font size). You can change the font size of the whole page with the following CSS (change 1.1em to another value):

          html {
              font-size: 1.1em;
          }

          the font size of the title can be changed with (1.44rem is the default value in the theme)

          #header .site-branding .site-title {
              font-size: 1.44rem;
          }

          To the theme author text. You can hide it via

          .theme-author {
              display: none;
          }

          Or just hide it on the front page with

          .home .theme-author {
              display: none;
          }

          to the slider question: You can implement all galleries as a slider via the theme options in the customizer (Theme OptionsSlider settingsDisplay all galleries as sliders).

          If you have more questions, just ask 🙂

          Greetings,
          Florian

          Reply
  2. Carmen

    hey Florian

    Thank you so much for the rapid feedback.
    Unfortunately you have to keep in mind that my knowledge of wordpress and coding is slim to none so the obvious to you isn't that way to me 🙁
    I cannot find anywhere the CSS files to do the edits. When i go under Appearance- Editor there is a page of text that comes up but it doesn't include the font or theme author specifics. can you point me out to the steps to actually get to the page to modify the CSS info?
    thank you so so much!!

    Carmen

    Reply
    1. Florian

      Hi Carmen,

      oh sorry, I mixed something up. I thought we already had the topic Custom CSS 🙂

      So, if you have installed WordPress 4.7 or later, you can go to AppearanceCustomizeAdditional CSS and insert the code I posted into this field. After that, you have to modify the values.

      Cheers,
      Florian

      Reply
  3. Carmen

    I am so sorry I am driving you insane but i also wanted to ask you from my previous comment, is there a way to change the font of the title?
    Also from my previous questions what do i have to insert to make the title on each page I create ( About/Contact/Work...etc) smaller?

    thank you!!!

    Carmen

    Reply
    1. Florian

      No problem, I noticed the points while reading you comments but did not remember them while writing my answer 😀

      The font size of the post and page titles is set via

      .entry-title {
          font-size: 2.488rem;
      }

      So if you want to modify its font size for posts and pages, you can use the code above. If you only want to change the title’s font size for pages, you can use the following CSS:

      .page .entry-title {
          font-size: 2.488rem;
      }

      To change the font family of the website title, you have to use the following rule:

      .site-title {
          font-family: 'Name Of the Font', sans-serif;
      }

      Do you already know, which font you want to use? Because if it is no system font like Georgia, which is installed on most devices, you have to include the font as a web font. Otherwise, users wich do not have the font installed, will not see the font but a fallback.

      Greetings,
      Florian

      Reply
      1. Carmen

        All your tips worked! thanks! 🙂 I could have NEVER figured this out by myself. For the font good to know in this case I will wait before I decide to change it.
        On the right side of all pages under the search box there is a menu that i didn't put together as per below:

        Meta
        - site admin
        -log out
        -entries rss
        -comments rss
        -wordpress.org

        Is there a way to take this off or at least hide or put in a place that is not as " in your face" . I would prefer to delete the search box and also this Meta menu if feasible.

        thank you!! 🙂

        Reply
        1. Florian

          Great to hear that! 🙂

          The search box and meta menu are so-called Widgets and live in a widget area (WordPress adds a few default widgets after you install it). You can edit the widget area by going to AppearanceCustomizeWidgetsMain Sidebar. Here you can add, remove and reorder widgets. To remove a widget, just click the small arrow on a widget and hit Remove.

          Cheers,
          Florian

          Reply
  4. Carmen

    hello Florian!

    How are you?
    I am still working on my website with your great theme. It is a long process but I am getting better at it everyday 🙂
    Here I am with a new questions. For the top menu on the right ( as per your demo) is it possible to take off the underlining for the main pages (home, projects, portfolio, etc...) ? I am very much a minimal type of person and since I am planning to add an extensive list eventually in the project pages I am not crazy about the underlining as it because a little too much visually. Would there be way perhaps to use a bold or color change option when a person drags their mouse on a page?
    Sorry for driving you crazy 🙂 and thank you for always being super helpful!

    Carmen

    Reply
    1. Florian

      Hi Carmen,

      I’m fine, thanks – I hope you too?

      At first, to remove the border from the menu items, you can use this piece of CSS:

      .primary-menu a {
      	border-bottom: none;
      }

      Using bold type on hover (when the user moves the cursor above a menu item) is possible, but then the menu items would jump a little bit because the bold font variant needs more space than the regular one.

      You can change the color on hover/focus/click and of the currently visited menu item with the following CSS:

      .primary-menu .current-menu-item > a,
      .primary-menu a:hover,
      .primary-menu a:focus,
      .primary-menu a:active {
      	color: #777;
      }

      The problem with this solution is that the different states are only highlighted by color. That might be inaccessible for people who cannot perceive little color contrasts (you can fix this by using an accessible color contrast between the default color and the hover color (and keep in mind the contrast between background and menu item) – you can check the accessibility of contrasts here: http://webaim.org/resources/contrastchecker/). The color in the above CSS would not be accessible. 😉

      Another possibility would be to add the underline on hover:

      .primary-menu .current-menu-item > a,
      .primary-menu a:hover,
      .primary-menu a:focus,
      .primary-menu a:active {
      	border-bottom: 2px solid;
      }

      Hope that helps 🙂

      Florian

      Reply
  5. Carmen

    Hi Florian

    Thank you for your feedback.
    You make a good point about the color difference.
    For now i decided to go with the underline on hover 🙂
    I have another question, I am not certain if this is something that is related to your template or to wordpress but at least we can figure it out 🙂
    I inserted a photo gallery and want for people to view one single photo at the time which is working but there is no option to have left and right arrows for people to scroll back and forth. The only option I am given is for the viewer to click on the photo to go forward onto the next one but he can't go backwards 🙁
    Is this template or wordpress related?

    Second questions, I have been looking into fonts i would like to use for the website. I know you mentioned not all of them would work if users don't have the font installed. What about something similar to these fonts that i got from a simple word file: Andale Mono, Avenir Medium or Ayuthaya? or anything similar 🙂

    Thank bunch!

    Reply
    1. Florian

      Hi Carmen,

      to the gallery question: By default there are arrows for going to the next and previous image (see here: https://hannover.florianbrinkmann.com/2012/09/02/snow-sports/). Are you using another solution for displaying the photos in a lightbox?

      To the second question: To ensure that the most of your users see the fonts, you will have to include them as webfonts (for example Andale Mono). You can find free webfonts (of different quality) on Google Fonts or use services like Typekit. Another option is to buy a font with a webfont license (for example from FontShop or MyFonts) and upload the file to your webserver.

      Cheers,
      Florian

      Reply
  6. Carmen

    Hi Florian!

    Thank for the reply.
    For the photos I am using NEXTGEN gallery just because a friend said it was ideal for website ( i don't know if that is a fact or not : D) and also because i didn't know how to upload them as individual sliders from your template ;(

    I want picture to show individually one by one without the option of them taking over the full screen when you click on them.
    Long story story short just as like you see them at this link but with left and right arrows:
    http://carmencondeescu.com/projects/autopsy-of-a-snowflake/

    (Of course the link is still work in progress)
    Let me know if you are familiar with the plugin or have any tips.

    About the font question, what exactly do you mean by you have to include them as web fonts? ( sorry but I have zero computer knowledge) If I want to use a simple font like arial can I just change the information in the CSS part?

    thanks for all your super precious help!

    Reply
    1. Florian

      Hi Carmen,

      ah okay. Unfortunately, I am not familiar with Nextgen gallery, sorry…

      Regarding the fonts: Yes, you can just modify the font name in the CSS. But if you, for example, simply switch the name to Andale Mono, only users who have this font installed on their PC, smartphone, tablet, et cetera, would see your site in that font. All the others would get a fallback font.

      You can fix this with using a web font. That means you provide the font to the user, so they will see your page with the correct font, even if they do not have the font installed locally.

      Reply
  7. Aditya

    Hi Florian,

    First of all, I found that your site is really nice! simple, straight-forward, and well designed. I'm just starting out to learn html, so I'm not really good yet with html. I have a question about the image, how come when I link an image on my page, when I view it on my phone or other devices, it's not proportional? (it gets flattened) my post is here; "http://adityaip.com/the-grey-summit/".

    Reply
    1. Florian

      Hi Aditya,

      thanks, appreciate it!

      To your problem: how do you insert the images? Do you have any plugin installed, which modifies the default WordPress behavior in media handling? The issue is that the pictures on your site have an inline style with the width and height — something, that does not happen by default…

      Cheers,
      Florian

      Reply
      1. Aditya

        Hi,

        Thank you for the immediate response!
        Well, I'm still not able to pay more for more hosting storage, so that's why I link my photos from Google Photos and not upload them into my site, so I did it like this;

        I recently used a theme that can adapt to that and still able to automatically maintain its proportion, is there any code that I need to add in the child theme or in the post?

        Thanks!,
        Aditya

        Reply
        1. Florian

          Hi Aditya,

          you can add the following CSS into the AppearanceCustomizeAdditional CSS box:

          img {
              height: auto !important;
          }

          That should bring the right ratio on smaller screens back to your images 🙂

          Cheers,
          Florian

          Reply
          1. Aditya

            Holy moly that CSS worked!

            I don't know much about CSS but that's awesome! This gets me excited to learn more about CSS, thanks a bunch Florian!

            Regards,
            Aditya

          2. Florian

            Happy to help!

            »I don’t know much about CSS but that’s awesome! This gets me excited to learn more about CSS, thanks a bunch Florian!«

            Do this, it is worth it 🙂

            Have a nice day,
            Florian

  8. Carmen

    Florian thank you for your all help. Reading comments also from Aditya is pretty helpful. I wanted to ask if it is possible amongst the pages to add a new one for a blog with your template? Of course that page would have to have a different layout and structure from the other pages to fit the requirements of a blog.
    Let me know if that is possible.
    Big thank you for all your help so far! 🙂

    Reply
    1. Florian

      Hi Carmen,

      if I get it right, you want to have a subpage with your blog posts? You can do that by creating a new static page Blog (or similar) and chose this page as the page for your latest posts under AppearanceCustomizeStatic Front Page.

      Cheers,
      Florian

      Reply
  9. Carmen

    Hi Florian!

    Yes you got it right 🙂 i created the static Blog page and inserted the Static Front Page Option and it does says that my "posts will go to the page called "Blog"". The problem is I tried to create a sample post just to see how it look but when I hit publish button it doesn't actually get published in the blog page 🙁 I don't understand why. When i click preview, i see the post in a blank page of my site and it says "Author Admin Category Uncategorized".
    When I click on my blog page it says " sorry no post matches your criteria".

    It would be fantastic if you could help me out on this :)!

    Thank you so much!!!!!!!!!

    Reply
  10. Carmen

    How is this possible! 🙂 I promise that before bothering you I tried multiple times and even looked into tutorials and it wasn't working. I think your energy brings good vibes to template 🙂
    Please don't hate me but I have another question for you. Is it possible to have the front page of the blog showcasing the last post and a selection of the most interesting posts or are the automatically displayed only chronologically?

    thank you so much for your help!!!

    C.

    Reply
    1. Florian

      No worry, just feel free to ask all your questions 🙂

      By default, that behavior is not possible with Hannover; it lists the posts chronologically. You would need to use a plugin which shows specific posts (I cannot recommend one) or modify the theme…

      Reply
  11. Carmen

    oh no! 🙁 but i like Hannover 🙁
    Is there a way to keep Hannover and keep the posts chronologically but maybe add a side menu of some sort with the titles or categories of previous posts?
    (for example if my posts were all divided into categories by city names could I have a side menu where once can see the list of the cities and click on the one they want and view old posts linked to that city? )

    Reply
    1. Florian

      Like said, it would be possible to modify Hannover in that way, but not without touching the code 🙂

      You could add the Categories widget to the sidebar. Then there will be displayed a list of your categories (cities, for example) and after clicking on one category, the user will see a list of all posts from the specific category.

      Reply
  12. Carmen

    Dear Florian

    Modifying the "code" sounds tricky and complicated...or at least it does to my inexperienced computer self 🙁
    The categories widget to the sidebar sounds perfect and exactly what I would need! 🙂 How does one go about doing that? Sorry if my questions seem obvious to you but this is my first experience when it comes to creating a website.

    Reply
    1. Florian Brinkmann

      Inside the customizer (AppearandeCustomize) you go to WidgetsMain Sidebar and add the widget Categories (To add a widget to the sidebar, you need to navigate to a page with sidebar inside the customizer) 🙂

      Reply
  13. Carmen

    Hi Florian

    I gave the categories widget a try but it now displays the categories as a sidebar even on my homepage. I wanted this sidebar of categories to be displayed only in the BLOG homepage as these categories only make sense for the blog not for the rest of the website. Can this be done? Is there a way to create a different sidebar only for the blog page?

    thanks!!!

    Reply
    1. Florian Brinkmann

      Hi Carmen,

      you could create a sidebar.php in a child theme (you can find a starter ZIP at the beginning of this page) and insert the following:

      <?php
      /**
       * Template file for displaying the sidebar
       *
       * @version 1.0.8
       */
      if ( is_active_sidebar( 'sidebar-1' ) && is_home() ) { ?>
      	<aside id="secondary" role="complementary">
      		<h2 class="screen-reader-text">
      			<?php /* translators: screen reader text for the sidebar */
      			_e( 'Sidebar', 'hannover' ) ?></h2>
      		<?php dynamic_sidebar( 'sidebar-1' ); ?>
      	</aside>
      <?php }

      After that, the sidebar should only be displayed on the blog overview.

      Reply

Leave a Reply to Florian Cancel reply

Your email address will not be published. Required fields are marked *