Build Your Own Business Website header image

Community Library Website – Part 27, Styling the Teaser Using CSS

Difficulty Level -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is the twenty seventh in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we change the display of the teaser subtitle, author name, topics and location. We accomplish this with CSS in Firebug and Web Developer.

Community Library Website – Case Study Part 1 – Site Organization
Community Library Website – Case Study Part 2 – Create Custom Post Types
Community Library Website – Case Study Part 3 – Custom Post Type Configuration
Community Library Website – Case Study Part 4 – Custom Taxonomy Decisions – Theory
Community Library Website – Case Study Part 5 – Custom Taxonomy Decisions – Practical Application
Community Library Website – Case Study Part 6 – Incorporating Existing Data Into the Project
Community Library Website – Case Study Part 7 – Creating Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 8 – Creating Non-Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 9 – Creating Custom Post Meta
Community Library Website Case Study – Part 10a – Restore the Database Using BackupBuddy
Community Library Website Case Study- Part 10 – Creating Custom Post Meta – Continued
Community Library Website – Part 11 – Importing Existing Data to the Website
Community Library Website – Part 12 – Prepare Existing Data for import by the CSV Importer plugin
Community Library Website – Part 13 – Import Existing Data Using the CSV Importer Plugin
Community Library Website – Case Study Part 14 – Date in Permalink Configuration
Community Library Website – Part 15 – Importing Images
Community Library Website – Part 16b – Final Data Import
Community Library Website – Part 17 – Add Thesis Post Meta to Custom Post Type
Community Library Website – Part 18 – Add WordPress 3.0 Menus
Community Library Website – Part 19 – Add Post Meta and Taxonomy Information to the Post Display
Community Library – Part 20 – Add topics and audience to book display
Community Library – Part 21 – Display the Rest of the Post Meta in the Post
Community Library Website – Part 22, Create the Permalink Structure
Community Library – Part 23 – Remove Custom Post Meta from Post Display
Community Library Website – Part 24, Add Taxonomy and Post Meta Data to the Teaser
Community Library Website – Part 25, Add Taxonomy Data to the Teaser
Community Library Website – Part 26, Adjust the Teaser Styling Using Design Options
Community Library Website – Part 27, Styling the Teaser Using CSS
Community Library Website – Part 28 – Fine Tune the Teaser Display
Community Library Website – Part 29, Designing a Custom Catalog Page
Community Library Website – Part 30, Using a Query String in a URL
Community Library Website – Part 31, Adding Custom WordPress Menus
Community Library Website – Part 32, Add Custom Menus to the Catalog Page
Community Library Website – Part 33, Add Another Custom Menu to the Catalog Page
Community Library Website – Part 34, Troubleshooting Custom Menus
Community Library Website – Part 35, Add Styling to WordPress Menus
Community Library Website – Part 36, Add HTML Markup to WordPress Menus
Community Library Website – Part 37, Add WordPress Menus to Archive Pages
Community Library Website – Part 38, Add and Style a List of Tags
Community Library Website – Part 39, Add a Search Box to the Sidebar
Community Library Website – Part 40, Add Links to the Sidebar
Community Library Website – Part 41, Add Taxonomy Drill Down Browsing
Community Library Website – Part 42, Custom Loop to Display Custom Post Types
Community Library Website – Part 43, Simple Custom Query
Community Library Website – Part 44, Custom Taxonomy Query
Community Library Website – Part 45, Add Thesis HTML Structure to Teasers
Community Library Website – Part 46, Display Posts from the Last 60 Days
Community Library Website – Part 47, Custom Loop If Have Posts
Community Library Case Study – Part 48, Increase the Number of Posts that Display on the Custom Catalog
Community Library Website – Part 49 – Naming Conflicts in Custom Taxonomies
Community Library Website – Part 50 – Find and Replace Semi-colons in the Database
Community Library Website – Part 51 – Modify Taxonomy Names Directly in the Database
Community Library Website – Part 52 – Sort Posts by Meta Value
Community Library Website – Part 53 – Show the Term Label Only when a Term Exists
Community Library Website – Part 54 – Sort Archive Posts by Meta Value
Community Library Website – Part 55 – Add Sort Order to Custom Taxonomy

Video Transcript

So now we need to take this font and we need to make it larger and we’re going to make it gray and we’re going to make it Arial. So I clearly misunderestimated the time it was going to take us to do this teasers thing didn’t I? I said about a half hour and we’ve been at it for a lot longer than that.

Okay so inspect the element and so, let’s see, edit CSS, custom and let’s see… let’s copy this then we’re going to make this teaser display. And so the first one is byob subtitle and do I already have that someplace? No, I guess not. Okay so copy and we’re going to say control D, byob subtitle and it’s going to have… I think actually, what we really ought to do is .custom .teaser .byobsubtitle. That way, this only will apply to the teasers and then what we want is a… let’s see, font family, Arial and then color: gray…maybe a little darker gray than that. And then font size… let’s call that 14 point or 14 pixel and I think you made it italic too, right? Font style: italic.

Okay, let’s give it a top margin… margin top of 10 px. Okay maybe just 5 px. Well in fact, let’s give it a margin top and bottom of 5 px. Okay and I guess we can just say 0 px. So top and bottom is 5, left and right is 0.

Okay let’s see if we can find a nice dark gray here someplace, just to borrow one instead of what I just said. I don’t know, I guess that’s okay. Let’s see, color gray… let’s say it’s eee… nope. 222? Let’s see, aaa…afafaf. Well, I’m just going to put 6 a’s in there and let it sit there like that for the time being. I hope I didn’t delete anything, there we go.

Okay and so then the next thing is to increase the size of our author. And so, that is again, the same thing really. We’re going to… but instead of byob subtitle, it’s going to be byob author name and it’s not… we don’t need the color gray here. We probably don’t need the margin on this one. And so, let’s see… yeah, I think that looks pretty good like that. Let’s go to our sample for a second.

Yup, okay. Let’s go back and look at our real example…yeah, it’s got decent line. Okay so then we need to style this stuff and you know, maybe all we really need to do with this is just give it a little bit of space there. So inspect the element and that is byob teaser location… no. Yeah, teaser location, okay… teaser bottom is what we’ll do. And so, teaser bottom and 1, 2, 3. And then we’re just going to say what? Margin top: 10 px;

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment