Go to Simple Text Pro

Definition of Terms

General Controls

HTML 5 Wraps : This drop-down is set to Off by default. Selecting one of the other options will wrap your text in the semantically identical HTML 5 tag. Options are Section, Article, Address, and Details.

Justify Text : This is a basic alignment option that was not built into RapidWeaver, however they do have the other alignment options already built-in (left, right, center).

Focus Outline Off : This is checked by default and removes an annoying outlining effect that occurs on links in some browsers (i.e. Firefox). Most often this is not turned off in themes, but it annoys the heck out of me so I made it turned off by default.

Links Bold : Makes your links bold.

Links Inherit All : If you would rather just inherit all your themes built-in styles you can check this.

Link Decorations : This is set to inherit by default. Other options are None, Underline, Overline, Line-through (same as strikethrough).

Link Style Opt : Set to inherit by default you can also choose to Italicize or set to Normal.

Custom ID : There is no ID tag be default and adding one will give your text’s container whatever ID you specify. Note that ID’s cannot begin with a number and you should have only one (no spaces). They are also case sensitive.

Custom Class : Similar to the ID tag only you can create multiple of these – separate by a space.


Font Size Controls

Inherit Font Size : This is selected by default. Unselecting will give you the next option.

Fullscreen : This is the font size of your text. It’s only title fullscreen as it relates to the next option – if you select the next option you’ll be give responsive font size controls, so the one you’re setting here is for when the screen is larger than iPad Landscape (the widest of the responsive options).

iPad Landscape, iPad Portrait, iPhone Landscape, iPhone Portrait : These are the pixel font sizes for when the device size is used.

  • iPad Landscape = 1024 px
  • iPad Portrait = 768 px
  • iPhone Landscape = 480 px
  • iPhone Portrait = 320 px

Color Controls

Text : Color for all your basic text.

Links : Color for all your links.

Visited Links : Color for visited links or rather links that your users have already visited.

Hovered Links : Color for the link when the cursor is over it.

Active Links : Color for the link when it is clicked.

Focused Links : Color for the link when it activated or tabbed to.


Text Spacing

Line Height On : This will turn on control over the line-height, which is the vertical space the line of text takes up – increasing it will increase the distance between your line of text and other lines of text (including other elements).

Letter Spacing On : Turning this on will allow you to increase the distance between individual letters in your line of text.

Text Shadow : See section below.


CSS3 Effects

Animate In (sec) : In seconds smooth animation delay for hover color effects.

Animate Out (sec) : In seconds the delay for when the mouse leaves.

Rotate On : Allows you to rotate you text to any degree.

Using Text Shadowing with Code Generating Tools

The text shadow option is an effect for all the text inside of each Simple Text stack. I left this as an open field so that you can easily use any text shadowing effect. I also know that most of our users don’t want to learn text shadowing code and there are tons of text shadow generators available for free use on the internet, which I personally use and recommend for you to use as well (even if you do code).

When you generator your code make sure to only insert pixel sizes and colors, no classes or semicolons (;). The code should resemble something like this:

1
2px 2px 8px #CCCCCC

Using the Snippets

Double clicking the snippet files will install the snippets, which can then be found in the Snippets section in RapidWeaver’s Edit Mode:

RapidWeaver Snippets

The code in these snippets controls the CSS and can be dragged and dropped in the Page Info > Header > CSS section.You then need to create the HTML that will take the CSS styling. These are not in the Snippets and can be easily created by copying and pasting this code:

HTML

1
2
3
<a class="buttonDark" href="http://YourLinkSomewhere.com">Button for Dark Backgrounds</a>
<a class="buttonLight" href="http://YourLinkSomewhere.com">Button for Light Backgrounds</a>
<a class="buttonSimple" href="http://YourLinkSomewhere.com">Button that's just dang Simple</a>

The snippets are not necessary to have in your Snippets section in Edit Mode either (so if you want that section cleaned up you can use the following codes):

CSS

For Button on Dark backgrounds

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.buttonDark {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
     text-shadow: 0 1px 1px #000;
     width: 80px;
     text-align: center;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     padding: 7px 15px !important;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-  stop(100%,rgba(0,0,0,0.05)));
     background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
}

For Button on Light backgrounds

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.buttonLight {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
     text-shadow: 0 1px 1px #FFF;
     width: 80px;
     text-align: center;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     padding: 7px 15px !important;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-stop(100%,rgba(0,0,0,0.05)));
     background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
}

The Simple Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.buttonSimple {
	text-align: center;
	cursor: pointer;
	background: #349BCE;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 3px solid #4CAAD9;
	padding: 7px 15px !important;
	display: block;
	margin: 20px auto;	
	width: 90px;
}
.buttonSimple:hover {
	background: #4CAAD9;
}
.buttonSimple:active {
	background: #349BCE;
	border: 3px solid #349BCE;
}

Changelog

v1.8.0 (July 16, 2014)

  • Changes some slider controls into number controllers for more flexibility
  • Pro version available offering responsive font size controls and easy font importing tools

v1.7.9 (May 22, 2014)

  • Minor improvements to the customization options

v1.7.8 (February 4, 2014)

  • Added line-height to font sizes to override theme line-heights for responsive fonts

v1.7.7 (January 30, 2014)

  • Fixed minor syntax error

v1.7.6 (October 8, 2013)

  • Grouping changed back to ’1LD Stacks’

v1.7.5 (September 11, 2013)

  • HTML 5 Wrap On/Off Option Added
  • Font Size Inherit On/Off Option Added
  • Responsive Font Size On/Off Option Added
  • Various Customization Section Improvements
  • Cleaned Up Various CSS & JS Code

v1.5.0 (July 1, 2013)

  • SPARKLE ready

v1.4.1 (May 28, 2013)

New Customization Options

  • Links Inherit All – all colors & customization will be inherited from the theme
  • Line Height On/Off
  • Line Height Size (px)
  • Letter Spacing On/Off
  • Letter Spacing Size (px)

The container is now position: relative so that absolutely positioned items can be placed inside (for advanced users).

In addition, the overflow: visible for parent containers was removed as it was breaking functionality when placed in some stacks. This was originally done for the Rotating text option, which will now have to be done manually by adding padding with the built-in Stacks option, which is the better way to do it anyway or rotated text could overlap with other objects and text.