Drop Cap appears as an HTML bracket ‘<’

cleanCaps takes the first character you type and displays it with a variety of preset customization options, which you can then customize and change to fit your theme.

One common issue occurs when using the built-in customization options RapidWeaver offers, such a changing the font (font-family). When this customization option is used the text is wrapped in HTML to help with formatting, but that causes the first character to be a ‘<’ bracket instead of the letter.

We’ve tried to include customization options with cleanCaps that allows you to achieve most effects you’d want, but we didn’t include everything or the options could be a bit cumbersome to navigate.

The solution is adding some simple CSS to your Page Info > Header > CSS section.

The class to target is ‘dropcapInner’ and be sure to include an !important tag at the end before the closing semicolon to override other customization. Here is an example:

1
.dropcapInner {font-family: arial, sans-serif !important;}

You can, of course, add any other styling here as well.

Set Drop Cap Background as Transparent

After placing a cleanCaps stack, select it and locate the customization options on the right. Find and select the option titled “Custom Bg” which by default will have text inside entered as “none”which sets there to be no current background image.

cleanCaps Transparent Background

Delete the text “None” and replace it with the text“Transparent” which will set there to be no background color either (if you currently have a background color added it will be ignored now). Alternatively, you can add custom background image files in this section as well.

Adding Google Web Fonts

1. Go to Google Web Fonts site.

2. For the font you wish to use click the “Quick-use” bottom located at the bottom right side of the font example.

Google Web Fonts

3. Scroll down to section 3 and copy the API’s URL address (only the URL, which is the part located inside the quotes after href=). In this example it would be http://fonts.googleapis.com/css?family=Finger+Paint

Google API URL

4. Paste the code into the Font Stylesheet section of the cleanCaps stack.

Font backend

5. In section 4 of Google’s site you’ll find the name of the font.

Google Web Font Name

6. Paste the name of the font in the cleanCaps section called Font Name, in this case ‘Finger Paint’, cursive.

Adding Custom Font Files

If you don’t already have commercial free custom fonts you can find some great ones over at Font Squirrel. For the best cross-browser compatibility be sure to download the font-face kits, which will typically consist of multiple font files (example: .ttf .svg .eot .woff).

  • Drag and drop all font files into the pages Resources section.

Fonts in Resources Section

  • In the Font Stylesheet field enter%resource(stylesheet.css)% – replace the name of the stylesheet to match whatever your stylesheet name is (I chose to leave it as stylesheet.css as that is the default name if you chose to download fonts from fontsquirrel.com).

Font backend

  • In Font Name field enter the name of the font as listed in the stylesheet. You can find this by first clicking on the stylesheet in the resources section and then selecting the icon that looks like an eye.

Font Stylesheet

Then locate the name of the font in the first line located after the @font-face call. In this example you would type ‘FFFTusjBold’ in the Font Name field.

Font Stylesheet Screenshot

Where can I find more commercial free fonts?

I use use three frequently myself as they offer excellent quality commercial free fonts:

How to justify the text

Justifying text can be done through a simple CSS code that is entered in the section of your Edit More under Page Info > Header > CSS.

1
p.dropcapInner {text-align: justify}

That code will justify the text inside all cleanCaps stacks on the current page.

Changelog

v1.3.3 (October 29, 2013)

  • Group changed back to ’1LD Stacks’
  • Added !important tags in CSS to fix some Theme conflicts
  • New Flat Icons

v1.3.0 (July 2, 2013)

  • SPARKLE ready

v1.2.1 (January 30, 2013)

cleanCaps new logoThis version of cleanCaps was designed to make the backend customization section easier to manage by placing the sections (previously organized with dividers) into collapsable sections. In addition, the Custom Bg option was removed and replaced with a Transparent Bg checkbox option as transparency was the main purpose for this section and the only one I could find customers using. However, you can still add a custom background image or pattern with a snippet, which I will include in the tutorial / manual for cleanCaps. Finally, the icon has also been changed as it appears to the right.

v1.1.0 (October 23, 2012)

  • Internet Explorer 9 Compatibility Fix