Fancy Form Styling

Published: March 28, 2016By Sebastian

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

You’ve gained practical experience working with CSS properties and concepts pertaining to layout. Though essential to your progress, they’ may not give you that ‘Oohh, Aahh’ feeling. In this section I’m going to introduce some more colorful styles alongside some final CSS layout tips. This will hopefully give you a flavour of what else of possible with Microthemer.

Restyling The Twenty Ten Comment Form

Navigate to the Hello world! post using one of the Hello world! links you added to your custom main menu. The home page shows the Hello world! post by default, but you need to go to the dedicated single post page in order for the comment form to appear.

To see what the comment form looks like with some content, please paste the following text into the textarea (but don’t hit the submit button):

I've learned so much about CSS!

Dolores enim quia fuga ut voluptas cum. Voluptatem aut veniam occaecati voluptas ullam similique. Dolorem suscipit mollitia qui laborum vero porro.

The following instructions will show you how to convert Twenty Ten’s comment form from this:

orig-comment-form

To this:

comment-form-after

GUI Method

Comment Wrapper: Create A Selector

target-textarea-wrapper

  1. Click the All Devices tab.
  2. Double-click the main comment textarea to launch the selector wizard.
  3. Go to the Inspector tab if you’re not there already.
  4. Click the  up arrow on the directional controls once.
  5. The HTML shown below the directional controls should be: <p class=”comment-form-comment”>…</p>
  6. In the Name field, enter Comment Wrapper.
  7. In the Folder field, select Comments.
  8. Click the CREATE SELECTOR button.

Comment Wrapper: Apply New Styles

style-textarea-wrapper

  1. Go to the Font property group.
  2. Set  color to white #ffffff. You can achieve this by entering ‘#ffffff’ manually in the bottom hex field or by dragging the color pointer to the very top left of the color picker area. This will not have any noticeable effect at first. But the color value will be inherited and applied as a default border color to a pseudo element we will create shortly.
  3. Go to the Text property group.
  4. Set  text-align to center.
  5. Go to the Background property group.
  6. Set  background-color to full opacity. You will need to drag the opacity slider to the far right. Notice how the RGBA value in the box just below changes from rgba(0, 0, 0, 0) to rgb(0, 0, 0). The color picker switches to an RGB value. Although rgba(0, 0, 0, 1) would also be valid if you decide to enter the value manually. The three long fields in the color picker allow you to enter color values in whatever format is most comfortable to you: RGB/A, HSL, or Hex.
  7. Go to the Dimensions property group.
  8. Set  width to 70%.
  9. Go to the Padding & Margin property group.
  10. Set  padding-right to 25. Then double-click the padding-right field to set all padding fields to 25. This is a time saving trick. The chain icon provides an alternative to synchronising fields. You’ll use that shortly.
  11. Set  padding-top to 35.
  12. To center the comment area and give it some vertical space, set the four margin fields to the following: 30   auto   50   auto.
  13. Go to the Border property group.
  14. Click the chain icon next to the BORDER RADIUS label. This will synchronise all fields immediately after you make a change to one.
  15. Set  border-top-left-radius to 15. All border radius fields will be set to 15 too.
  16. Go to the Position property group.
  17. Set  position to relative. This defines the positioning context for a pseudo element which you will create next.

Comment Triangle: Create A Selector

create-pseudo-triangle

  1. You’re going to create a pseudo element for the first time. Please see the education note on pseudo elements below for an explanation.
  2. Expand the Comments folder quick edit options by clicking the Comments text in the top toolbar.
  3. Hover over the  Comment Wrapper selector and then click the Copy icon to copy the selector.
  4. Hover over the new copied selector:  Comment Wrapper Copy 1 and then click the clear icon to clear the copied selector’s styles.
  5. Click the edit icon to expand the selector editing options.
  6. Change the name of the selector to: Comment Triangle.
  7. Change the CSS selector code in the textarea to: form#commentform p.comment-form-comment::before.
  8. Click the EDIT SELECTOR button.
  9. The selector will be updated and renamed. Click the new name of the selector to navigate to it: Comment Triangle

Comment Triangle: Apply Styles

style-triangle

  1. The method I’m about to demonstrate for creating a triangle in CSS was inspired by this sitepoint article.
  2. Go to the Behaviour property group.
  3. Set the Content property on the far right to ' ' (just two single quotation marks separated by a space). The empty content is needed so that the pseudo element is visible and can be styled. Although, by default, pseudo elements have no width or height, and so won’t be visible yet.
  4. Go to the Position property group.
  5. Set position to absolute.
  6. Set top to 100%.
  7. Set left to 50%.
  8. Instead of setting width or height, the triangle effect relies border settings.
  9. Go to the Border property group.
  10. Set border-top-color to black #000000. You can achieve this by dragging the color pointer to the very bottom left of the color picker area.
  11. Click the chain icon next to the BORDER STYLE label.
  12. Set  border-top-style to solid. All border style fields will be set to solid too.
  13. Click the chain icon next to the BORDER WIDTH label.
  14. Set  border-top-width to 20. All border width fields will be set to 20 too.
  15. Go to the Padding & Margin property group.
  16. Set margin-left to -20. This is half the total width (40px) of the triangle (because border-left and border-right both add 20px). This adjustment ensures that the triangle is truly centered in the middle, rather than being 20px too far to the right. The position 50% puts the left edge of the element at the 50% mark, not the middle of the element, hence the need to correct.

Comment Label: Create A Selector

target-comment-label

  1. Double-click the small grey Comment label just above the textarea to launch the selector wizard.
  2. Go to the Targeting tab if you’re not there already.
  3. Click the second suggestion in the list to select it: p.comment-form-comment label
  4. In the Name field, enter Comment Label.
  5. In the Folder field, select Comments.
  6. Click the CREATE SELECTOR button.

Comment Label: Apply Styles

style-comment-label

  1. Go to the Font property group.
  2. In the font-family field, select Google Font.... A font browsing window will popup.
  3. Look for the Roboto Condensed font. To the far right, click the 700 link. This will select the bold variation of Roboto Condensed.
  4. Back on the left, click the Use this font link to apply the font.
  5. Set  color to white #ffffff.
  6. Set  font-size to 20.
  7. Go to the Position property group.
  8. Set  position to relative.
  9. Set  bottom to 18. This will move the label up 18px relative to where it was before.

Comment Textarea: Create A Selector

target-comment-textarea

  1. Double-click the textarea to launch the selector wizard.
  2. In the Name field, enter Comment Textarea.
  3. In the Folder field, select Comments.
  4. Click the CREATE SELECTOR button.

Comment Textarea: Apply Styles

style-comment-textarea

  1. Go to the Background property group.
  2. Set  background-color to black #000000.
  3. Go to the Border property group.
  4. Set  Border to relative.
  5. Click the chain icon next to the BORDER WIDTH label.
  6. Set  border-top-width to . All border width fields will be set to 0 too.
  7. Go to the Font property group.
  8. In the font-family field, select Google Font.... A font browsing window will popup.
  9. Find the Open Sans font and then click the Use this font link to apply the font.
  10. Set  color to white #ffffff.
  11. Set  font-size to 18.

Comment Button: Create A Selector

target-comment-button

  1. Double-click the ‘Post Comment’ button to launch the selector wizard.
  2. In the Name field, enter Comment Button.
  3. In the Folder field, select Comments.
  4. Click the CREATE SELECTOR button.

Comment Button: Apply Styles

style-comment-button

  1. Go to the Padding & Margin property group.
  2. Click the chain icon next to the PADDING label.
  3. Set  padding-top to 30. All padding fields will be set to 30 too.
  4. To center the button, set margin-right to auto and margin-left to auto. This won’t have the desired effect at first. In order to understand why…
  5. Go to the behaviour property group.
  6. Notice that the current value for display is inline-block. Margin ‘auto’ doesn’t work on inline or inline-block elements. The solution is to change display value to block. Please see the educational note on the display property below.
  7. Go to the Border property group.
  8. Set  Border to relative.
  9. Click the chain icon next to the BORDER WIDTH label.
  10. Set  border-top-width to . All border width fields will be set to 0 too.
  11. Click the chain icon next to the BORDER WIDTH label for a second time to disable syncing.
  12. Set  border-bottom-width to 4.
  13. Set  border-bottom-color to black #404040.
  14. Click the chain icon next to the BORDER RADIUS label.
  15. Set  border-top-left-radius to 100%. All border radius fields will be set to 100% too.
  16. Go to the Background property group.
  17. Set  background-color to a dark grey#252525.
  18. Go to the Font property group.
  19. Set  color to white #ffffff.
  20. Set  font-size to 18.
  21. In the font-family field, select Google Font.... A font browsing window will popup.
  22. Look for the Roboto Condensed font. To the far right, click the 700 link. This will select the bold variation of Roboto Condensed.
  23. Back on the left, click the Use this font link to apply the font.

Comment Button (Hover State): Create A Selector

target-comment-button-hover

  1. You’re going to use a pseudo class for the first time. Please see the education note on pseudo selectors below for an explanation.
  2. Expand the Comments folder quick edit options by clicking the Comments text in the top toolbar.
  3. Hover over the  Comment Button selector and then click the Copy icon to copy the selector.
  4. Hover over the new copied selector:  Comment Button Copy 1 and then click the clear icon to clear the copied selector’s styles.
  5. Click the edit icon to expand the selector editing options.
  6. Change the Name of the selector to: Comment Button Hover.
  7. Change the CSS selector code in the textarea to: form#commentform input#submit:hover.
  8. Click the EDIT SELECTOR button.
  9. The selector will be updated and renamed. Click the new name of the selector to navigate to it: Comment Button Hover.

Comment Button (Hover State): Apply Styles

style-comment-button-hover

  1. Go to the Font property group.
  2. Set  color to white #ffffff.
  3. Go to the Background property group.
  4. Set  background-color to a yellowy green #c8cd00.
  5. Go to the Behaviour property group.
  6. Set cursor pointer.

Code Method

Import Google Fonts

code-font-import

One of the advantages of the UI over writing code is that Microthemer automatically building a Google Fonts URL when it detects the use of Google fonts. You will need to do this manually when using the code method. Paste the following import statement at the very top of the code editor:

@import '//fonts.googleapis.com/css?family=Roboto+Condensed%3A700%7COpen+Sans%3A400normal&ver=4.4.2';

Some points to note:

  • This will allow you to use custom Google fonts in your CSS e.g. font-family: ‘Open Sans’;
  • Using // instead of explicitly defining http or https means that the browser will default to whatever protocol is used on your page. So if your site uses https, the browser will use https//fonts.googleapis.com. If your site uses plain http, the browser will use http//fonts.googleapis.com.
  • The @import method is convenient for quickly adding Google fonts to Microthemer, but the <link> method is considered better practice because it’s a bit faster. The warning in the code editor relates to this. However, the <link> method requires theme file editing (often header.php).

Comment Wrapper

code-textarea-wrapper

Start a new line in the code editor just above the media query code and type the following code:

/* Comment Form Styling */
#commentform .comment-form-comment {
	color: #fff;
	text-align: center;
	background-color: #000;
	width: 80%;
	padding: 35px 25px 25px 25px; /* this warning doesn't apply because you have set box-sizing:border-box */
	margin: 30px auto 50px auto;
	border-radius: 15px 15px 15px 15px;
	position: relative;
}

Some points to note:

  • I’ve used the #commentform id in the CSS selector because the Twenty Ten theme uses an id (#respond) when targeting the comment form. The #commentform id ensures the selectors have higher CSS specificity and therefore override the theme’s default stylesheet.
  • Position:relative is used to set the positioning context for the pseudo element you are about to create. Please see the educational note on pseudo elements below.
  • Color:#fff is used because this sets the default border color. This also has relevance to the pseudo element you will create.

Comment Triangle

code-triangle

Start a new line in the code editor and type the following code:

#commentform .comment-form-comment::before {
	border-top-color: #000;
	border-width:20px;
	border-style: solid;
	content: ' ';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -20px;
}

Some points to note:

  • This method for creating a triangle in CSS was inspired by this sitepoint article.
  • The empty content: ‘ ‘  is needed so that the pseudo element is visible and can be styled. Note, pseudo elements have 0 width and height by default.
  • Margin-left:-20px is used because this is half the total width (40px) of the triangle (because border-left and border-right both add 20px). This adjustment ensures that the triangle is truly centered in the middle, rather than being 20px too far to the right. The position 50% puts the left edge of the element at the 50% mark, not the middle of the element, hence the need to correct.

Comment Label

code-label

Start a new line in the code editor and type the following code:

#commentform .comment-form-comment label {
	font-family: 'Roboto Condensed';
	color: #fff;
	font-size: 20px;
	position: relative;
	bottom: 18px;
}

Some points to note:

  • Position:relative isn’t only used for setting the positioning context for child elements. In combination with bottom:18px, the label moves up by 18px relative to where it was before.

Comment Textarea

code-textarea

Start a new line in the code editor and type the following code:

#commentform #comment {
	font-family: 'Open Sans';
	color: #fff;
	font-size: 18px;
	background-color: #000;
	border-width: 0;
	outline:0;
}

Some points to note:

  • Outline:0 is used to prevent the blue textarea highlighting browsers add by default. This often looks ugly.

Comment Button

code-button

Start a new line in the code editor and type the following code:

#commentform #submit {
	font-family: 'Roboto Condensed';
	color: #fff;
	font-size: 18px;
	background-color: #252525;
	padding: 30px;
	margin:0 auto;
	border-bottom-color: #000;
	border-width: 0 0 4px 0;
	border-radius: 100%;
	display: block;
}

Some points to note:

  • In order for margin:0 auto to center the button, it must be given a display value of block. Please see the educational note on the display property below.
  • Setting border-radius:100% gives the button a smooth roundness. Setting border-radius:50% would actually achieve the same effect. The browser rounds anything above 50% down to 50%. Try it.

Comment Button (Hover State)

code-button-hover

Start a new line in the code editor and type the following code:

#commentform #submit:hover {
	color: #000;
	background-color: #c8cd00;
	cursor: pointer;
}

Some points to note:

  • You have used a pseudo class for the first time. :hover at the end of the selector targets the button in the hover state. Move your mouse over the button to see the effect. Please see the education note on pseudo selectors below for further explanation.

The Display Property (Inline vs Block)

The display property has evolved and now has many possible values. I’m going to talk about inline, block, and inline-block. These values determine if width, height, margin, or vertical-align work as expected or not.

Block elements fill the width of their parent element (unless they are floated) and start on a new line. Some elements that are block by default include <p>, <div>, <ul>, <li>, and all headings. Block elements ignore the vertical-align property.

Note: the content inside block elements can be aligned by setting text-align: center.  But if you wanted to centrally align a smaller block element inside a bigger element, you must set margin-left and margin-right to auto.

Inline elements flow with the text without starting a new line. Some elements that are inline by default include <a>, <span>, <b>, <em>, and <code>. Inline elements ignore the width, height, and margin-top/bottom properties (but do respond to margin-left/right). Setting a height of 1000px for instance will do nothing to change an inline element’s height. Inline elements do not fill the full width of their parent. If floated left or right, inline elements behave like block elements (they do respond to width, height, and margin-top/bottom properties).

Note: inline elements can be aligned by setting e.g. text-align: center, but this must be set on a parent block element, not the inline element itself. 

Inline-block elements behave as though they were block elements. Apart from one detail. They flow with the text like inline elements rather than filling a whole line like block elements.

Note: setting display to block on input elements doesn’t set the input to the full width of its parent element, unlike most elements that have display:block.

Understanding Pseudo Elements

Pseudo elements are elements that you create with CSS rather than HTML tags. They’re called pseudo elements because they don’t exist as part of the HTML source code. You can apply CSS to them as if they were HTML elements though.

The most common pseudo elements are created with ::before and ::after. You may see :before or :after with only a single colon used sometimes. This is deprecated (no longer regarded as valid by the CSS specifications) but still works.

When you want to style an element in a way that would normally involve adding extra HTML, ::before and ::after are useful. Styling content to look like a speech bubble is a good example. Designers often create a pseudo element with ::after and use it for the pointy part. Another common application for pseudo elements is inserting SVG icons e.g. Font Awesome.

Sometimes pseudo elements cause confusion for beginners. It can be hard to trace styling back to a selector if it applies to a pseudo element. Microthemer cannot detect pseudo elements unfortunately. Browser inspectors come to the rescue though. Chrome inserts ::before and ::after in the HTML pane on the left, almost as if they were real HTML elements. Look out for these, you can click them to see which styles apply in the CSS pane on the right.

Note: pseudo elements can only be applied to HTML elements that can be containers for other HTML elements. The textarea elements cannot have HTML child elements. That’s why the comment triangle pseudo element was applied to the textarea wrapper element in the previous demonstration, instead of the textarea.

find-pseudo-element

::before and ::after aren’t the only pseudo elements.

Understanding Pseudo Classes

Pseudo classes target elements that have a particular property or are in a particular state. This can be quite diverse. The most common pseudo class is probably :hover, which applies to elements in the hover state. Other pseudo classes include :first-child, which applies to elements that are the first child of their parent, and :required, which applies to form elements that have the required attribute defined. There are many more.

Close