Hatfield

Documentation of all the theme options compatible with the Hatfield Tumblr Theme. You can access these via your Customize page to change the appearance and functionality of your blog.

 

Appearance Options

Title – this is where you set the Title of your blog, which is displayed in the header (logo) and in the title of the page in your browser for SEO purposes.

Description – this is for some basic information about your blog. It is displayed underneath the logo on the home page, above the posts.

Avatar – this is the image for your avatar, which appears all across Tumblr and as the favicon on your browser. On this theme the Avatar is not displayed.

Show title – choose whether to show your blog title (logo).

Show description – choose whether to show your blog description.

 

Image Options

Background – you can upload a custom background image for your whole page. This is for the posts area, not for your header.

Logo – you can upload a Logo image, which will replace the Title in the header.

Banner Background – you can upload a background image for the optional banner

Mobile Banner Background – you can upload a background image for the optional banner to display on mobile

 

 

Color Options

Background – this sets the background colour of the whole website

Text – this sets the main text color for your blog and posts.

Banner Background – this sets the background color for the optional Banner

Banner Text – this sets the text color for the optional Banner

Banner Button Background – this sets the background color for the optional Banners buttons

Banner Button Text – this sets the text color for the optional Banners buttons

Footer Background – this sets the background color for the footer

Footer Text – this sets the text color for the footer

 

 

Dropdown Options

Layout – the options allow you to choose the layout of the page including posts

• Fullscreen – photos are displayed in a carousel with arrows to navigate between each photo
• Wrap – photos are displayed exactly as they are posted with the layout the same, you can edit this by editing the post.

Photoset Post Type – the options allow you to choose how multiple photos in one post is displayed

• Carousel – photos are displayed in a carousel with arrows to navigate between each photo
• Normal – photos are displayed exactly as they are posted with the layout the same, you can edit this by editing the post.

Modal Photo Size – customize how photos opened in the modal are displayed

• Fit – photos are set to fit the window size with a slight border around them
• Full – photos are displayed fullscreen with no gap
• Wrap – photos are displayed in a small wrapAnd the available options are:

Font – choose from some pre-defined fonts

Logo Font Weight – choose the font weight for logo text

Description Font Weight – choose the font weight for the description and logo text

Banner Video Volume – allow for banner video volume to be on by default (some browsers block this setting)

Banner Video Autoplay – choose if banner video autoplays by default or not

 

 

Toggle Options

Full Background – stretch background image to 100% of the window size

Repeat Background Image – repeat the uploaded background image

Navigation – display the navigation on the header

Footer – display the footer box at the bottom of the website

Footer Toggle Icon – display the footer toggle icon

Search – shows the search input in the menu

Curved Edges – Adds a curves border around all images/video posts

Modal Post – opens posts clicked on the homepage in a special modal

Dark Reblog Buttons – Display reblog/like buttons in a white or black colour

Show Post Reblogs – show the name of reblog source on posts

Show Post Meta – Hide the post meta including share, reblog, like buttons

Show Post Notes – Show the post note count

Show Post date – show the date post was posted

Show post Share – Show post share dropdown

Show Post Tags – Show post tags underneath post

Home Link – show a “Home” link on the menu

Random Link

Archive Link

Rss Link

Banner – Toggle the fullscreen banner on/off

Banner Video Options – if using a banner video source show the buttons or not

Banner Overlay – display a black overlay over the banner  background

Mobile Hide Banner – Hide banner on mobile

Banner Only no Posts – Set website as a landing page with just the banner

 

 

Text Options

Default Homepage Tag – Select a tag to redirect the website homepage to.

Footer Text – text to display in the footer description section

Font Size – Text font size default: 16px

Logo Size – Text logo size default: 9vw

Image Logo Max Width – Control the maximum width of the image logo default: 20%

Image Logo Mobile Max Width – Control the maximum width of the image logo on mobile default: 140px

Description text Size: Description/footer text size default: 32px

Description Mobile text Size: Description/footer mobile text size default: 16px

Google Analytics ID: Link your website to Google Analaytics GA4

Font Embed Code – Add Custom HTML code to embed custom font

Body Font Family – Change the text font based on the embedded font

Body Font Weight – Change the text font weight

Logo Font Family – Change the logo text font based on the embedded font

Logo Font Weight – Change the logo font weight

Titles Font Family – Change the post titles font based on the embedded font

Titles Font Weight – Change the post titles font weight

Banner 

Banner Youtube Video ID – Video ID of YouTube video to add video to banner

Banner Youtube Playlist ID – Playlist ID of YouTube playlist to add video to banner

Banner Vimeo Video ID – Video ID of Vimeo video to add video to banner

Banner Text – add text to the banner

Banner Text Size – change banner text font size

Banner Mobile Text Size – change banner mobile text font size

Banner Text Width – Width of the container of the text on the banner

Banner Button URL’s/Text – Text label and link for banner buttons.

Social Media

Link to your social media/email address

 

 

Making a post fullscreen

You can make a post fullscreen (100% width) by adding the tag x2 on the post edit screen. This is applicable to both desktop and mobile.

 

Post Overlay Text

On new created photo posts you can add text on the photo overlay. Ensure the “Show Photo Overlay” is switched on.

To add a title highlight the text as “Biggest” only one per post. Example: