Last active
August 12, 2023 02:27
-
-
Save ScribbleGhost/1000bc60bee8e0837deca3ebae21aadb to your computer and use it in GitHub Desktop.
A visual illustration of underscores, the WordPress theme starter framework
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- below is content from header.php --> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Heebo&display=swap" rel="stylesheet"> | |
| <style> | |
| @-ms-viewport { | |
| width: device-width; | |
| } | |
| body * { | |
| font-family: 'Heebo', sans-serif; | |
| font-size: 18px; | |
| color: #000000; | |
| font-weight: bold; | |
| } | |
| body, | |
| #page, | |
| #masthead, | |
| .site-branding, | |
| #site-navigation, | |
| #content, | |
| #primary, | |
| #main, | |
| article, | |
| #colophon, | |
| #secondary, | |
| #comments, | |
| .navigation | |
| { | |
| border-radius: 10px; | |
| border: solid 3px black; | |
| box-shadow: -6px -4px 4px 2px rgba(0, 0, 0, 0.22); | |
| margin: 10px; | |
| color: black; | |
| padding: 0px 15px 15px 15px; | |
| } | |
| body { | |
| background-color: #010125; | |
| border-color: white; | |
| } | |
| body > p { color: white; } | |
| p {padding: 5px, 5px 0 5px; display: block; } | |
| #page { background-color: #FFC207; } | |
| #content, #masthead, #colophon { background-color: #009788; } | |
| .site-branding, #primary, #site-navigation, #secondary { background-color: #EC275D; } | |
| #main { background-color: #683AB6; } | |
| article, #comments, .navigation { background-color: #4CB050; } | |
| .description { | |
| font-weight: normal; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>body</p> | |
| <div id="page" class="site"> | |
| <p>#page .site</p> | |
| <header id="masthead" class="site-header"> | |
| <p>#masthead .site-header</p> | |
| <div class="site-branding"><p>.site-branding</p><p class="description">Contains logo, title and blog description</p></div> | |
| <nav id="site-navigation" class="main-navigation"><p>#site-navigation .main-navigation</p><p class="description">Contains the main menu</p></nav> | |
| </header> | |
| <div id="content" class="site-content"> | |
| <p>#content .site-content</p> | |
| <!-- below is content from index.php --> | |
| <div id="primary" class="content-area"> | |
| <p>#primary .content-area</p> | |
| <main id="main" class="site-main"> | |
| <p>#main .site-main</p> | |
| <p class="description">Starts the loop</p> | |
| <!-- below is content from content.php --> | |
| <article><p>article</p><p class="description">The actual single page article or page content goes here</p></article> | |
| <nav class="navigation"><p>.navigation .post-navigation</p><p class="description">The post navigation, for example "previous/next post"</p></nav> | |
| <div id="comments"><p>#comments .comments-area</p><p class="description">Comments for the single post/page</p></div> | |
| </main> | |
| </div> | |
| <div id="secondary" class="widget-area"><p>#secondary .widget-area</p><p class="description">Contains WordPress widgets</p></div> | |
| <!-- below is content from footer.php --> | |
| </div> | |
| <footer id="colophon" class="site-footer"> | |
| <p>#colophon .site-footer<p class="description">The footer content for the site</p></p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is extremely helpful! Thanks so much!!