With a few CSS changes, Sayontan Sinha’s Suffusion theme can be used in so many ways…
A lot of WordPress themes have bundled fonts, but Suffusion is the only one I have found that has TONS of fonts using Google’s font collection. Here’s how to access the Suffusion Google Fonts collection.
Step 1: Log into your WordPress dashboard and then go to Appearances.
Step 2: In the Appearances section, go to Suffusion Options. This will open to the Suffusion Options home page. Select Typography in the top menu.
Step 3: Once you are in the Typography section of the dashboard, you can select fonts for your content, headers, footer and so on. This is where you can select from a large range of Google fonts that have been pre-loaded into the theme.
Google Font Screenshots
Already got an idea of what you want? Here are the fonts again, categorized into Serif, Sans-Serif and Cursive
I recently started work on a new site for a photographer and we decided to try the Deep Focus theme from Elegant Themes. Since this theme utilizes the Custom Field function to create galleries based on Posts, I thought this would be a good opportunity to create a tutorial for adding images to a gallery page and editing the gallery as well.
For purposes of brevity I will assume that you have already downloaded and installed the Deep Focus theme from Elegant Themes as well as uploading some images that you want to use in some galleries into your dashboard’s Media Library. I would recommend pre-loading images because: a) with the new Media Uploading function you can upload multiple images at once and b) this will make step 1 go a lot smoother; especially if you open a second tab in your browser for creating your new post(s) and then you can switch between the two tabs to make your work-flow quicker.
How Does The Gallery Get Created?
Deep Focus as well as the Envisioned theme use a combination of Posts and Pages in their theme functions to create gallery pages for a site. If you want to create a gallery for Portraits, for example, what you do is create a new Page in WordPress, title it Portraits and then select a template for that page (Gallery or Portfolio). Once you have selected that template, you will see a dropdown menu appear that allows you to select which Category of Post will be used to create the photo gallery on the page. For example, on the site I am currently working on, I created a Page called Newborn Portraits and then a Category called Newborn Portraits.
Once you have your Page and your Category set up, it’s time to start adding images!
STEP 1: Sign into your WordPress dashboard and go to Media Library.
Choose an image that you would like to place in a gallery page. Hover over the image to get the quick-edit menu to pop up and select “Edit”.
STEP 3: Now go to Posts > Add New to create a new Post that will contain that image. When you are in the New Post window, give the Post a title. This will be what appears as the image’s title as it appears in its gallery Page. Also, make sure to select what Category the Post will be (i.e. Newborn Portraits). This is what tells the theme where the image should appear.
Wait! Shouldn’t I write something in the edit window?
You can if you want some information about the image to show when a viewer clicks on it in its gallery Page. When a viewer is looking at the gallery Page and hovers over an image, there are two options to view the image: the “magnifying glass” option will open up a slideshow window on the same page so they can view all the images that way. The “zoom-window” option will go to the image’s Post in a different window and they can see the image in Post format with the text that you added.
STEP 4: Now you are going to tell the Post which image to show. Scroll down past the edit window and you should see an option called Custom Field. (If you don’t see it, don’t worry, just go to the top right corner of the dashboard and click on “Screen Options” to select “custom fields” and add it to your editing options). There should be a dropdown menu of Custom Fields that you can choose from. You need to choose the field “Thumbnail”.
But I don’t see Thumbnail!?
No worries, you may need to simply add it in yourself. Just click “Add New” and type Thumbnail.
And that’s basically it. Any questions?
How can I change the order that my images appear in?
This can be done using the edit function for the date the post was published. In the Post’s edit window, simply click the word “edit” next to the “published on” date and alter it so that its date/time is before or after the image that you want it next to. Then, click “Update” and check that the new order is showing.
How can I remove an image from a gallery Page?
You can change the Publish status to “Draft” in the edit window and click “Update”. This will remove it from the lineup.
How can I show the same image in two gallery Pages?
Easy, just select more than one Category in that image’s Post.
One of my first clients, Beacon Insurance, had a site that was a good candidate for a WordPress makeover. Even with using the Library feature in Dreamweaver, changes to the navigation and content were cumbersome, especially when they wanted to add a new newsletter page. After creating a sample site and letting them check out the dashboard end of things, they decided to give me the go-ahead.
Jenn Mears Web Design has just launched a site for Patsy Ann doll enthusiasts that was designed for Marblehead resident, Debbie Essig. After collecting Patsy Ann dolls, furniture and ephemera for many years, Debbie decided to combine her love of this unique doll of the Depression Era with her gift for creating vintage design doll clothing into a site that would showcase her extensive knowledge of Patsy Ann as well as providing a way to sell her unique hand-made outfits online.
Debbie wanted to emulate the style of Effanbee’s 1930s advertising flyers, so I needed to incorporate vintage Depression Era graphic elements into the overall design. I found the Fairfax Station font to be a good choice for the main header as well as the side navigation and the page headers.
I built the page template based on the Silver Dreams theme (available at WordPress.org), and it was a highly adaptable, lightweight theme that provided a solid foundation to bring Debbie’s vision online.
Michael McCarthy Law has been in development for a while now and readers will soon find that it was worth the wait!
Meant to be much more than a simple “shingle site” for a Personal Injury and Estate Handling firm, MML is aimed at educating both current and potential clients, an approach that more and more businesses are finding to be beneficial to both parties. Creating this site was an exercise in conditional tags, one of WordPress’s most powerful site architecture tools. Certain pages were designated by the client to live in the top navigational bar, while pages dealing with the various areas of practice were to have their own listing in the left sidebar. The theme is a customized version of CognoBlue 1.0 by BlogsDNA, which was a pleasure to work with, clean, flexible and consistent across browsers. Feel free to stop by Michaelmccarthylaw.com and take the grand tour!
Ooh, I am so excited! I wanted to utilize the Sliding Door CSS theme by Wayne and incorporate it with a previous motif on the site which compared developing a site to the changing of the seasons. I’m still “unpacking the boxes” a little, so keep visiting for changes!