MATILDA LOVES CUSTOMIZATION GUIDE
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
MATILDA LOVES
CUSTOMIZATION GUIDE
1
www.prettylovelydesign.com
Table of Contents
Description 3
What’s included 3
Logo 4
Navigation Bar 4-5
Masthead 6
Bio Area 6
Post Date 6
Post Body 7
Call to Action 7
Post Footer 7
Sidebar 8
Converting to Single Column 9
Custom CSS 10-11
Footer 12-13
Background 14
Fonts 14
Color Palette 15
Tips & Suggestions 16-17
Clipping Masks 18
The Extras 19
Support 19
Credits 19
2
www.prettylovelydesign.com
Description
Say hello to the Matilda Loves ProPhoto theme! Matilda is a delightfully fun photoblog. There is a hint
of watercolor, hand drawn elements, and geometric shapes mixed throughout the theme. The lovely
selected color palette is not exclusive and can be changed with the various layered PSD files
included. Matilda is comes with a sidebar layout but with the instructions included you can easily
change your theme to a single column layout.
Some of the fun extras included in this theme are the PSD files for the social media icons, sidebar
buttons, masthead templates (5), custom bio page, grid images, and a coordinating paper set. * Logo
NOT included, but details on the font included.
Photos courtesy Kathleen Amelia.
What’s Included
All PSD files included will work with Photoshop CS or higher. I’ve included brief instructions about
clipping masks in this guide. Simple knowledge about Photoshop is required to customize your
theme.
Some of the extra customization on the Matilda Loves theme uses CSS. There is a specific CSS
Section included to guide you through modifying those areas.
Navigation bar
Masthead templates
Social media icons
Custom grid images
Hand drawn graphics
Font Info
Page Graphics - Contact, Bio, Grid Galleries
3
www.prettylovelydesign.com
Logo
The Matilda Loves logo is NOT included in this theme due to it’s complexity and setup. If you are
interested in creating your own similar logo, the font details will be listed below.
Vermandois
http://www.myfonts.com/fonts/magpiepaperworks/vermandois/
Navigation Bar
The Matilda Loves navigation bar has a few fun elements that make this theme really stand out.
Here is a breakdown of customization if needed.
Social Media Icons
The social media icons on this theme is not part of the primary navigation but part of the SECONDARY
NAVIGATION. To find both of your navigation bars, go to the MENU tab. To edit or add buttons to your
secondary social media icon menu, simply see the editing your social media icons image instructions
below.
Primary Navigation Links
Your primary navigation bar are the links that contain the main navigation for your blog (home, blog,
bio, stories, etc.). You can change these links to any text you like. All of the primary links contain a
rollover color. This rollover is edited within the CSS. If you need to change the color or remove the
color rollover, please see the CSS Section of this instruction guide to give you steps on how to change
the color rollover.
4
www.prettylovelydesign.comA fun feature of this navigation is the “Book Now” link with an arrow. This link is not text but a
transparent image. You can edit the button with the included PSD file. If you need to edit this button
make sure you save the image as a transparent PNG file and upload your new image to the primary
navigation using the same method as the social media icons.
5
www.prettylovelydesign.com(editing your social media icons)
Masthead
The masthead image size for the Matilda theme is 1020 x 380px. You do not need any templates to
upload images to your masthead if you simply want to use a single image per frame. There are 5
included PSD masthead templates to create side by side photos or add in the included paper patterns.
Bio Area
The Bio Area is not enabled in this theme but you can turn it on and add content & graphics to the
area. If the Bio area is activated, it will have a transparent background.
Post Date
The post header is styled with a arrow and double line graphic element. PSD files are included so that
you can edit the colors of the lines & arrow. If you choose to change this element, simple open the
PROPHOTO/CUSTOMIZE/CONTENT APPEARANCE/BACKGROUND and towards the bottom upload
your new graphic under Post Header Bottom Border Image. You will find your post date PSD file in
your MISC folder named post-header-background.psd
* If you choose to convert this them to a single column with no sidebar, you will need to update the
post date background. See the Converting to a Single Column section for further instructions.
6
www.prettylovelydesign.comPost Body
The main post body width is 700px. It is recommended to size your photos accordingly so they nicely
fit within your blog post. The sidebar width is 200px.
If you choose to convert the Matilda theme to a single column with no sidebar the post body width is
980px. Static pages are setup on this theme to contain no sidebar.
* You will also need to change some coding in the CSS file to convert this layout to a single column.
Please see the CSS Section for further detail on converting your layout.
Call to Action Buttons
The Call-to-Action buttons are included with PSD files to customize. Twitter, Pinterest, and Facebook
are included. A RSS button is included but not installed.
Post Footer (comment header)
Your post footer comes with a PSD file to customize the color. You will find your post file in the MISC
folder called commentbg-2col.psd. Go to PROPHOTO/CUSTOMIZE/CONTENT
APPEARANCE/COMMENTS/COMMENT HEADER and upload your new edited file.
* If you choose to change this theme to a single column you will need to see the Converting to a
Single Column section.
7
www.prettylovelydesign.comSidebar
The Matilda theme comes designed with a sidebar. Your sidebar also comes installed with
suggested key widgets that come with PSD files to customize. Noted below are the installed
widgets with this them and how they were set up and intended to use. Keep in mind that these
are just explanations on how you could use these widgets. Feel free to be creative with your
new theme!
Hello There
The “hello there” section is simply a bio image. You can find the bio graphic PSD file in the
sidebar folder included with your downloads. Upload your own bio image by going to SITE
SETTINGS/WIDGET IMAGES and replace the default image with your own image. Another
suggestion for the bio area is to link to your about page with text.
Happenings
The “happenings” section is setup as a vertical navigation bar. You can edit this section by
going to MENU/VERTICAL NAV. MENU 1. There are PSD buttons included in your sidebar
folder to edit or add your own images.
Search Here
The “search here” is a customized search box that color coordinates with the theme colors.
The entire search area can be customized to your own color/go button. The GO button comes
with a PSD file that you will need to use to change the appearance. You will find the GO button
in the Sidebar folder. Upload your new customized GO button under ADVANCED/EXTRA
BACKGROUND IMAGES. You replace the old GO button with your new graphic. * Please see
the CSS Section for advanced customization and changing the green text box to your own
colors.
Workshops & Classes
The “workshops & classes” button is simply an example graphic of a important key area of
your website. You may not have workshops or classes but you could use this button or area of
your sidebar to display something of key importance to your readers. You will find the
workshops.psd file in the sidebar folder
Instagoodness
The “instagoodness” button is also a simple static graphic to lead your readers to your
instagram. You will need to add your own photo and link to your instagram account. You will
find the instagram graphic in the sidebar folder. Replace the default image with your own by
going to your SITE SETTINGS/WIDGET IMAGES and uploading your own graphic.
8
www.prettylovelydesign.com9 www.prettylovelydesign.com
Converting to a Single Column
There are several steps you will need to do to convert your theme to a single column. Keep in mind
that if you choose to convert to a single column theme, and choose to revert back to a 2 column, you
will need to reverse these steps or re-install your theme.
* You will find all the files you need to convert your theme to a single column by looking into your
Single Column Blog folder.
1. REMOVE Background Content Image - Go to CONTENT APPEARANCE/BACKGROUND and
delete the CONTENT AREA BACKGROUND image. (there will be no background replacement)
2. Change Post Header Image - Go to CONTENT APPEARANCE/INDIVIDUAL POST AREA
BACKGROUND and replace the current image with the new image called
post-header-background-1col.png
3. Change The Copyright Footer - Go to ADVANCED/EXTRA BACKGROUND IMAGES and change
the current EXTRA BACKGROUND IMAGE #1 to footercap-1col.png
4. IN ADVANCED/EXTRA BACKGROUND IMAGES REPLACE background images 6
body.has-sidebar #content and add the new CSS selector #content and upload a new image
topcap-1col.png found in your single column blog folder
5. IN ADVANCED/EXTRA BACKGROUND IMAGES REPLACE background images 7 #sidebar and
the new css selector #content-wrap and upload the new image outerbg-1col.png found in your
single column blog folder
6. Remove widgets from your sidebar - To remove your sidebar, you simply need to remove the
widgets. Once the widgets are removed, the sidebar will disappear.
7. Change comment header background image
* If you choose to utilize the page footer with the single column blog layout you will need to add a
footer background image. To do this please see the FOOTER section in this guide.
10
www.prettylovelydesign.comCustom CSS
The Matilda loves comes with some advanced CSS to achieve some of the key looks of this theme. If
you want to remove or change some of the extra customization, you will need to edit the CSS file. To
find the CSS file go to ADVANCED/CUSTOM CODE. Here is a breakdown of the areas you may need to
edit along with a detailed screenshot of what you will need to edit.
* Color customizations in the CSS file are identified by HEX codes. For example a bright red color
would be #ff0000. You can find more info on hex codes here. CSS codes to customize the Matilda
Loves Theme (see graphic below for a visual description)
REMOVING THE PRIMARY NAVIGATION ROLLOVER COLOR:
#primary-nav a:hover {
background-color: #C7E7DD;
}
REMOVING ARROW FROM POST TITLE HEADER:
.article-header .article-date {
padding: 0px 0px 0px 100px;
}
CHANGE COLOR OF SEARCH TEXT BOX:
#searchform input[type="text"] {
padding: 3px;
background: #DDEDE7;
border: 0px;
font-size: 11px;
width: 158px;
height: 21px;
}
11
www.prettylovelydesign.com12 www.prettylovelydesign.com
Footer
The footer on the Matilda theme is not activated but is currently empty. These instructions are for
keeping the sidebar layout but also activating the footer. If you have a single column blog, please
see the special instructions below. To use the footer with a sidebar layout, simply turn on the
footer by following these instructions and see screenshots below.
Adding a footer to a 2 column blog
1. Turn on footer by going to SIDEBARS & FOOTER / FOOTER AREA and under Footer Main
Content Area select “include footer area”.
2. Once you activated the footer, you will need to change the copyright footer background
image. To do this go to ADVANCED / EXTRA BACKGROUND IMAGES and under extra
background image #1 and for #copyright-footer replace the background image with
footercap-1col.png
* The footer is turned off on Static Pages by default. It is not recommending using a footer on
pages.
Adding a footer to a 1 column blog
1. Turn on footer by going to SIDEBARS & FOOTER / FOOTER AREA and under Footer Main
Content Area select “include footer area”.
2. In the Footer content area background upload a new background. You will find the
background file in your prophoto files included with this download inside the folder single
column blog. Upload file footer-singlecolumn.png, SAVE
3. Change the copyright footer background by going to ADVANCED / EXTRA BACKGROUND
IMAGES and under extra background image #1 and for #copyright-footer replace the
background image with footercap-1col.png
13
www.prettylovelydesign.com(change background image if using a single column blog)
(change the copyright-footer background)
14
www.prettylovelydesign.comBackground Patterns
The Matilda theme comes a simple watercolor wash background. This background was strategically
chosen to coordinate with the logo, graphics, and hand drawn elements. Feel free to use your own
background pattern or texture when customizing this theme.
Fonts
There are quite a few fonts used throughout the matilda theme. Included below you will find all the
font details to coordinate with this theme along with some suggested free fonts as alternatives.
Logo Font (purchased)
Vermandois
http://www.myfonts.com/fonts/magpiepaperworks/vermandois/
Alternatives: Jacques & Gilles (purchased), Matchmaker (purchased), Allura (free), Clicker Script (free)
Masthead, Grid Buttons Font (purchased)
Strangelove Text
Alternatives: Amatic (free), Men in Black Credits (free personal use)
Primary Navigation, Sidebar Buttons, Call to Action Font (free)
Bentham
Post Title, Post Body Font(standard)
Helvetica
15
www.prettylovelydesign.comColor Palette
Matilda has a suggested color palette with this theme as installed.
● Color palettes are completely optional. You can customize all the elements that will
match your own preference.
● Some great places to find color palettes are Design Seeds, Pinterest, Creature Comforts
Blog, or even doing a simple Google image search for color palettes.
16
www.prettylovelydesign.comTips & Suggestions
These tips are just suggestions to make your blog/site look it’s absolute best it can look. Sometimes
it’s just the little details about your site that people will notice. Be creative and have fun with your
theme!
Customizing your pages with comments
Having pages are just as important as your blog posts. The number one thing I recommend for
custom pages is turning off your comments on your pages only. Not turning off the comments
makes your pages look like just another blog post. If you are operating your entire blog as a
blog-website combo, then this is even more important to separate your pages from your blog. You
can edit these settings right in your page post. See image below.
About pages
About pages are far overlooked when it comes to most blogs. Readers/Clients/Followers want to
know about you and what you do. Add a photo of yourself and tell them what you do. This
17
www.prettylovelydesign.comcreates connection and likeability between you and the reader.
Backups
It is highly recommended that you keep your files in a safe place. Included in your theme is a folder
called “blog assets”. These files are the current files created for the Matilda Theme. If you accidently
delete a core file, that folder will contain all the originals.
Image Grids
This theme is not setup for image grids but grid images are included! See the MISC folder included
in your prophoto files for the layered PSD. You can easily setup your grid as a homepage or as a
post or category page. There are many ways to get creative with your grid images!
If you want to change the layout spacing and text placement, you will need to go to the “Grid”
section of your ProPhoto blog in PROPHOTO/CUSTOMIZE/GRIDS
Organizing Categories
It is recommended with this theme to organize and strategically plan out your categories. Having
simple categories and only using a few categories per blog post help keep the clean and
organized appearance look to your site.
18
www.prettylovelydesign.comClipping Masks
To edit some of the Matilda PSD files you must use masked layers. These instructions are made for
use with Photoshop CS or higher.
1. Open both the template AND the image you want to use.
2. Click on the layer that says MASK first. Then go to your photo or image and drag it into the
template
3. Your photo will go directly on the mask you previously clicked on.
4. If you need to resize your photo to fit the template, click on EDIT >> FREE TRANSFORM to
resize your photo. Hold down the shift key to constrain your image sizing.
19
www.prettylovelydesign.comThe Extras
The Pretty Lovely Design online shop often carries coordinating marketing kits. Check us out on
Facebook too for Freebies & tips.
Support
For questions regarding templates created by Pretty Lovely Design, please check out the
ProPhoto Templates section on our website. Your question may already be answered. All
other questions can be directed to support@prettylovelydesign.com.
Credits
Sample photos used in this ProPhoto theme were provided by Kathleen Amelia.
20
www.prettylovelydesign.comYou can also read
