Forums/Blogs/Select your template

Tarragon blog

Anthony Ronga
posted this on May 20, 2011 11:10 am

General Sizes:

  • Excerpt Image: 510 x 450 pixels
  • Blog Post: 970 pixels wide

 

The ITDR Admin

All of the following options can be found in the "ITDR ADMIN" located at the bottom of the left navigation.  Our demo is set up with the following options and settings.

 

Header tab

  • Header images: 960x320
  • Re-sampling: True
  • Resampling Quality: 75
  • Slideshow Timer: 5
  • Autoplay video: false
  • Turn image letterboxing on: False

 

Welcome tab

  • Welcome Image: no larger than 200 x 150 pixels

 

Design Tab

  • Header height: 320
  • Blog Width: 960
  • Logo: 280 x 90 pixels

Understanding the excerpt feature

The Tarragon blog is unique in the way that it offers an open/close post feature.  The closed post feature has minimal information that acts like a teaser for the rest of the post.  This information is made up of a text excerpt and an image. 

 

Turn these options on. (you should only have to do this one time)

  1. Under "Posts", click "Add New"
  2. Click the "Screen Options" in the top right of the screen (right under log out)
  3. Once the options appear, make sure the "Excerpt" and "Custom Field" options are checked

Those two options should now appear under the main text  box.

 

 

Adding the excerpt image and post

For this template you will use the "Excerpt" field located below the main text box.  if you choose to leave this field blank, the system will automatically pull a few sentences from the text you have in the main blog post.  

  1. Under "Posts", click "Add New"
  2. Find the "Excerpt" box
  3. Add your excerpt text
If you do not see the excerpt option, make sure you do the following
  1. Under "Posts", click "Add New"
  2. Click the "Screen options" in the top far right of the page
  3. Make sure the "excerpt" box is checked

 

Add an image to the closed state of the post.  (Next to the excerpt text)

This image will not be the same size as the regular post images.  Because there is excerpt text on the left, the right side is all that remains for the image. 

  1. Locate the Custom Field Area below the main text box
  2. Click Add Custom Field You will only need to do this once
  3. In the Name section add "post-img" it must be exact so wp knows to pull that image
  4. Go back up to the top and add an image see steps below
  5. Before you hit save you'll need to copy the "Link URL"
  6. Paste Link URL in the "Value" area in the custom field section
__________________________________________________________________________________________________________________________

Header Tab

 

On left:

Header Image Lists:  This shows the list of photos that will appear at the top of the blog (the header)

  1. Upload photos  ( 960x320  px )

 

On Right:

Settings:

  1. Use Server Side resampling: if you select “True”, this will reduce the file size (by percentage) of your images making them easier on the user’s bandwidth. However, we do suggest that when you are in Photoshop, you adjust the quality of your images to make them the optimum size for reduced bandwidth.
  2. Resampling Quality: Turn the percentage of the server side re-sampling up or down to increase or reduce the size of the files.
  3. Slideshow timer: How fast do you want the photos to load the next image on the list.
  4. Autoplay Video: Do you want video to automatically start playing?

 

 __________________________________________________________________________________________________________________________

 

Welcome Tab

 

  1. Welcome picture: Just below the header you can place in one photo
  2. Welcome Image: no larger than 200 x 150 pixels
  3. Welcome title:  This will appear underneath the header to the right of the Welcome picture.
  4. Welcome Description: This will appear underneath the Welcome title. Enter any info that you wish.

 

 __________________________________________________________________________________________________________________________

 

Design Tab

 

Settings Tab

 

  1. Main Logo:  This allows for your logo to appear on the in the upper left hand corner
    1. Logo: 280 x 90 pixels
  2. Header Height:  You can adjust the height of the header box on the site.
    1. Remember your header images are 960x320 If you change this then you also need to change the height of the photos in your header.
  3. Blog Width:  You can adjust the width of the bog.
    1. Remember your header images are 960x320 If you change this then you also need to change the width of the photos in your header.
  4. Body Color: The color of the background of the site.
    Icon overlay color: The color of the icons located to the right of your Welcome picture, title, and description.
  5. Open Post Color: The color of the Open posts icon
  6. Body Shadow Opacity:  There is a fine line around each post. Lower opacity it cannot be seen.
  7. Body Shadow Width:  How wide the shadow under the header and the closed posts is
  8. Lower Shadow Opacity: The shadow under the header and the closed posts.

 

Fonts Tab

 

  1. Use Designer Font Bool: True
  2. Context text style: Determines the font of your text
  3. Embed Font Glyphs most of the time will be set to "False".  Select "True" if you have special characters in your text
  4. Navigation Text Color will change the color of the navigation text. (i.e.: the main button at the top of the site)
  5. Highlight Color will change the color of the navigation text when you roll over it.
  6. Navigation Text Size will change the size of the navigation text. We set the demo to 16
  7. Title Color will change the color of the title text on each page.
  8. Title Size will change the size of the title text on each page. We set the demo to 24.
  9. Description Text Color will change the color of the description text
  10. Description text size: determines the size of the description text.
  11. Footer text Color refers to the color of the text in your footer (i.e.: Copyright 2011 Jay Photography 
  12. Footer Text Size will change the size of the title text on each page. We set the demo to 14.
  13. Heading Font Style (titles of posts): Determines the font of the title of the posts.
  14. Welcome font color: will change the color of the welcome text
  15. Welcome font size: determines the size of the welcome text.
  16. Link color: Determines the color of links you place on the site.

 

Background Tab

 

  1. Background Gradient Top Color: Select the top color for the background. If you want the background to be all one color, make sure the gradient bottom color is the same.
  2. Background Gradient Bottom Color: Select the bottom color for the background. This will create a gradient blend from top to bottom. If you want the background to be all one color, make sure the gradient top color is the same.
  3. Background Image: You can upload an image here to display as your background. This image should be cropped around 1600x1200 pixels.
  4. Background mode: If you uploaded an image as the background, decide how you want it to display.

 

__________________________________________________________________________________________________________________________

 

Setup Tab

 

Settings:

  1. Browser Title Separator: When using multiple phrases in your title this character will separate those phrases
  2. Footer Link Text: Footer Link Text: choose from the dropdown how you want the link to read.
  3. Footer: Add your copyright information here. (i.e.: © 2010 ITDR | intothedarkroom | all rights reserved)
  4. When you set up your Google Analytics account, they give you a UA code. Just put this code in this field. It looks like this: UA-XXXXXXX-X.
  5. Use Twitter: This shows the Twitter Icon
  6. Twitter Username: Enter your username
  7. Use Facebook: This shows the Facebook Icon
  8. Facebook Account Link: Enter the link to your Facebook page
  9. WordPress date format:  To better understand this format  go to http://codex.wordpress.org/Formatting_Date_and_Time
  10. Posts open by default: When false this shows excerpt image and text. When true this shows full posts. Demo is false
  11. Use tweet meme: A different way of showing Twitter… this does not use the blue Twitter bird.
  12. Use Linkedin: This shows the Linkedin icon
  13. Linkedin Account Link: Enter in the URL for your Linkedin account.
  14. Use Google Plus: This shows an icon on the right underneath the header image
  15. Google Plus Account link: Enter in the URL for your Google Plus page
  16. Use Google +1: Shows +1 icon
  17. Send contact email from self:

 

Language:


All of the text for all of the buttons can be changed in the Language tab. This is completely optional if you choose to do this.

 

 

 

 

Comments

User photo
julianna collett
This is great
February 04, 2012 10:29 am
User photo
Todd Surber

In Tarragon, every post seems to default to the home page. Can this be turned off or changed? I want to be able to add daily content, but not have it show unless you choose that as a category. Thanks

March 03, 2012 07:47 pm
User photo
Brad Hassett
intothedarkroom

Todd, no unfortunately that functionality isn't built into this template.

April 16, 2012 12:10 pm
Topic is closed for comments