For I think the first time in this series, we’re going to add some new things to the design directly by working in the browser (not starting in Photoshop first). Our goal is to design up the “Hot Links” modules that show themselves on the homepage. <\/p>\n
We label each section on the homepage with header tags. For instance “Latest Blog Posts” and “Hot Links”. Semantically, we should be using an h2 but the general h2 styling is too intense for that area. We use the classic trick where we have class name overrides for our header styling. That way we can always use the correct semantic tag but be able to override the styling at any time with the style from the header we want. e.g.<\/p>\n
<h2 class=\"h5\">\r\n <!-- correct semantically but we want style of h5 -->\r\n<\/h2><\/code><\/pre>\nThe Hot Link modules are largely the same as the article modules only less complicated and they have a red square in the upper left corner instead of an orange square.<\/p>\n","protected":false},"excerpt":{"rendered":"
For I think the first time in this series, we’re going to add some new things to the design directly by working in the browser (not starting in Photoshop first). Our goal is to design up the “Hot Links” modules that show themselves on the homepage. We label each section on the homepage with header […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":18010,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18692,"url":"https:\/\/css-tricks.com\/lodge\/v10\/131-building-more-homepage-modules\/","url_meta":{"origin":18309,"position":0},"title":"#131: Building More Homepage Modules","date":"October 2, 2012","format":false,"excerpt":"In this screencast we set about building out a few more of the modules we plan to have on the homepage. Just a little tweak and we're showing three hot links instead of two. Copy and paste a bit of module code and tweak a query and now we have\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18706,"url":"https:\/\/css-tricks.com\/lodge\/v10\/138-forums-homepage-styling\/","url_meta":{"origin":18309,"position":1},"title":"#138: Forums Homepage Styling","date":"October 2, 2012","format":false,"excerpt":"It's been a bit of a long road wrestling control over all the parts we need, with a couple of struggles and surprises along the way. We can finally get started designing those modules on the homepage according to the wireframes we have. A little margin, a little padding, a\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18688,"url":"https:\/\/css-tricks.com\/lodge\/v10\/129-photoshopping-more-homepage-modules\/","url_meta":{"origin":18309,"position":2},"title":"#129: Photoshopping More Homepage Modules","date":"October 2, 2012","format":false,"excerpt":"In this screencast we dig into adding some more modules to the homepage of the site. Fairly important stuff! At the moment, we only have a handful of them over there. We have a few hot links, a couple of ads, and a poll. Below that, a bunch of gray\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18714,"url":"https:\/\/css-tricks.com\/lodge\/v10\/142-forums-modules-styling\/","url_meta":{"origin":18309,"position":3},"title":"#142: Forums Modules Styling","date":"October 2, 2012","format":false,"excerpt":"Along the right side of the forums there are a series of modules. \"Modules\" visually, \"Modules\" literally in code, and \"Modules\" in that the content they contain is a related group, separate\/different from the content in other modules. The first one we look at is the Categories module. Vanilla Forums\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18047,"url":"https:\/\/css-tricks.com\/lodge\/v10\/008-photoshopping-the-module-pattern\/","url_meta":{"origin":18309,"position":4},"title":"#008: Photoshopping the Module Pattern","date":"September 7, 2012","format":false,"excerpt":"The entire site is going to based on \"modules.\" Each little thing is going to be literally be in a box (both visually and in the code, ultimately). We start with a module for the most recent blog post on the homepage, but the module pattern will be used everywhere.\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1543,"url":"https:\/\/css-tricks.com\/video-screencasts\/11-working-modularly-with-php\/","url_meta":{"origin":18309,"position":5},"title":"#11: Working Modularly with PHP","date":"November 26, 2008","format":false,"excerpt":"Many sites do not use any fancy Content Management System (CMS) to generate their pages, they are just just good ol' static HTML content. A site for your grandmothers pie baking business probably only has a few pages, perhaps a homepage, about page, and contact page. Each of these pages\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18309"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18309"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18309\/revisions"}],"predecessor-version":[{"id":209361,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18309\/revisions\/209361"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18010"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18309"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}