Skip to content

Instantly share code, notes, and snippets.

@heywin

heywin/WordPress Dedault Widget HTML And CSS.md

Last active August 29, 2015 14:14
Show Gist options
  • Save heywin/f7d62ed4d184473f17bb to your computer and use it in GitHub Desktop.
Save heywin/f7d62ed4d184473f17bb to your computer and use it in GitHub Desktop.
Download ZIP
WordPress Dedault Widget HTML And CSS
Raw
WordPress Dedault Widget HTML And CSS.md

##Table

  1. General Unordered List With Children Item (NOT System Widget)
  2. Meta
  3. Pages
  4. Recent Posts
  5. Archives (List and Dropdown)
  6. Categories (List and Dropdown)
  7. Recent Comments
  8. Tag Cloud
  9. Calendar
  10. Search
  11. Text

###Description You can use General Unordered List With Children Item (NOT System Widget) instead of Meta, Pages, Recent Posts, Archives (List), Categories (List), Recent Comments, then defined "Dropdown" (with limited width), Tag Cloud, Calendar, Search, Text.

If we design individual style for each default widget, we have to defined css style for each one. ###General Unordered List With Children Item

<aside class="widget">
	<h2 class="widget-title">Title</h2>
	<ul>
		<li></li>
		<li>
			<ul class="children">
				<li><a href="#">Text</a></li>
				<li><a href="#">Text</a></li>
			</ul>
		</li>
		<li></li>
	</ul>
</aside>

/* general unordered list */
.widget {}

###Meta

<aside class="widget widget_meta">
	<h2 class="widget-title">Meta</h2>
	<ul>
		<li><a href="#">Text</a></li>
		<li><a href="#">Text</a></li>
	</ul>
</aside>

/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

###Pages

<aside class="widget widget_pages">
	<h2 class="widget-title">Pages</h2>
	<ul>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Level 1</a>
		<ul class="children">
			<li><a href="#">Level 2</a>
			<ul class="children">
				<li><a href="#">Level 3</a></li>	
			</ul>
			</li>
		</ul>
		</li>
	</ul>
</aside>

/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

###Recent Posts

<aside class="widget widget_recent_entries">
	<h2 class="widget-title">Recent Posts</h2>
	<ul>
		<li><a href="#">Text</a></li>
		<li><a href="#">Text</a></li>
	</ul>
</aside>

/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

###Archives (List and Dropdown)

<aside class="widget widget_archive">
	<h2 class="widget-title">Archives List</h2>
	<ul>
		<li><a href="#">Text</a></li>
		<li><a href="#">Text</a></li>
	</ul>
</aside>

<aside class="widget widget_archive">
	<h2 class="widget-title">Archives Dropdown</h2>
	<select name="archive-dropdown">
		<option value="">Select</option>
		<option value="#">Text</option>
		<option value="#">Text</option>
	</select>
</aside>

/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

###Categories (List and Dropdown)

<aside class="widget widget_categories">
	<h2 class="widget-title">Categories List</h2>
	<ul>
		<li><a href="#">Text</a>
		<ul class="children">
			<li><a href="#">Text</a>
		</li>
		</ul>
		</li>
	</ul>
</aside>

<aside class="widget widget_categories">
	<h2 class="widget-title">Categories Dropdown</h2>
	<select name="cat" id="cat" class="postform">
		<option>Select Category</option>
		<option class="level-0">Text</option>
		<option class="level-1">Sub Text</option>
	</select>
</aside>

/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {} 
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

###Recent Comments

<aside class="widget widget_recent_comments">
	<h2 class="widget-title">Recent Comments</h2>
	<ul id="recentcomments">
		<li class="recentcomments"><a href="#">Name</a> on <a href="#">Post</a></li>
		<li class="recentcomments"><a href="#">Name</a> on <a href="#">Post</a></li>
	</ul>
</aside>

/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

###Tag Cloud

<aside class="widget widget_tag_cloud">
	<h2 class="widget-title">Tag Cloud</h2>
	<div class="tagcloud">
		<a href="#">Text</a>
		<a href="#">Text</a>
	</div>
</aside>

/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

###Calendar

<aside class="widget widget_calendar">
	<h2 class="widget-title">Calendar</h2>
	<div id="calendar_wrap">
		<table id="wp-calendar">
		    <caption>January 2012</caption>
		    <thead>
		    <tr>
		        <th scope="col" title="Monday">M</th>
		        <th scope="col" title="Tuesday">T</th>
		        <th scope="col" title="Wednesday">W</th>
		        <th scope="col" title="Thursday">T</th>
		        <th scope="col" title="Friday">F</th>
		        <th scope="col" title="Saturday">S</th>
		        <th scope="col" title="Sunday">S</th>
		    </tr>
		    </thead>

		    <tfoot>
		    <tr>
		        <td colspan="3" id="prev"><a href="#">« Jan</a></td>
		        <td class="pad">&nbsp;</td>
		        <td colspan="3" id="next"><a href="#">Mar »</a></td>
		    </tr>
		    </tfoot>

		    <tbody>
		    <tr>
		        <td colspan="6" class="pad">&nbsp;</td><td><a href="#">1</a></td>
		    </tr>
		    <tr>
		        <td><a href="#">2</a></td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
		    </tr>
		    <tr>
		        <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
		    </tr>
		    <tr>
		        <td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
		    </tr>
		    <tr>
		        <td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
		    </tr>
		    <tr>
		        <td>30</td><td>31</td>
		        <td class="pad" colspan="5">&nbsp;</td>
		    </tr>
		    </tbody>
		</table>
	</div>
</aside>

/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

###Search

<aside class="widget widget_search">
	<h2 class="widget-title">Search</h2>
	<form class="search-form">
		Code...
	</form>
</aside>

/* search widget */
#search-form {}
.widget_search {}
.screen-reader-text {}

###Text

<aside class="widget widget_text">
	<h2 class="widget-title">Text</h2>
	<div class="textwidget">
		<p>
			Anything...
		</p>
	</div>
</aside>

/* text widget */
.textwidget {}
.widget_text {}
.textwidget p {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment