Documentation of all the theme options compatible with the ImageGrid 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.
Avatar shape – square or circle
Show avatar – toggle to turn the avatar off or not on the front-end
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.
Logo – this sets the colour for text links and navigation
Social Icons – this sets the social icons colour in the about box
Post Meta – this sets the colour for the post meta and share/reblog & like icons
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
Dropdown Options
Photoset Post Type – the options allow you to choose how multiple photos in one post is displayed
- Normal – photos are displayed exactly as they are posted with the layout the same, you can edit this by editing the post.
- Carousel – photos are displayed in a carousel with arrows to navigate between each photo
Posts Columns – choose how many columns of posts should display on desktop. Variable automatically changes columns based on the visible screen size
Mobile Posts Columns – choose how many columns of posts should display on mobile
Modal Photo Size – customize how photos opened in the modal are displayed
- Wrap – photos are displayed in a small wrapAnd the available options are:
- Fit – photos are set to fit the window size with a slight border around them
- Full – photos are displayed fullscreen with no gap
Font – choose from some pre-defined fonts
Logo Font Weight – choose the font weight for 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
About Box – displays the about box at the top or not
Search – shows the search input in the menu
Modal Post – opens posts clicked on the homepage in a special modal
Show Media Only – shows only photos/videos and no caption/meta underneath
Show Photo Overlay – when hovering over photo posts display the caption text and share icons above in a overlay format
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 Like Reblog – Show post share/reblog icons or not
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. e.g. #featured tag on posts you would enter just the tag: featured
Footer Text – text to display in the footer description section
Logo Size – Text logo size default: 20px
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
About Box Footer Text – Add custom footer text on the sidebar
About Box Text Widget – Adds a paragraph of text on the sidebar
About Box Custom HTML – Add custom html onto the sidebar
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.
Each link should have https:// beforehand.
Make posts bigger
You can make a post double in size by adding the tag x2 on the post edit screen. This is applicable to both desktop and mobile.
Logo Image Size
You can customize the size of the image logo by using Custom CSS. To access this click Advanced Options on the customize screen then paste the following in the Custom CSS box.
You can set a maximum width in pixels or by percentage for the logo image:
#header .logo img {
max-width:50%;
}
or to control the logo on mobile only you can add this:
@media screen and (max-width: 740px) {
#header .logo img {
max-width:200px;
}
}
