A) Getting Started

01. Install Plugin

  • Login to CodeCanyon and go to the downloads page.
  • Download WordPress plugin.
  • Go to your WordPress panel > Plugins > Add New and click "upload plugin" button.
  • Choose "waspthemes-yellow-pencil.zip" file and upload.
  • After upload, go to WordPress panel > plugins and activate the plugin.

02. Installing Tips

  • Do have a problem with the upload? Please be sure "maximum post size" and "maximum upload file size" are greater than 10MB. Contact with your web server provider if you need help making this change.
  • If you get "No valid plugins were found" error, be sure you are uploading the right file. Plugin file name is "waspthemes-yellow-pencil.zip"
  • If you are still facing a problem with the upload, try to upload plugin by using FTP. Watch this tutorial to learn more about how to upload a plugin with FTP.
  • Still having problems? Please create a ticket through our support desk. We'd love to assist you.

03. Admin Pages

  • Start customizing your website from WordPress Panel > Appearance > Yellow Pencil
  • Manage the styles and edit options from WordPress Panel > Yellow Pencil

04. Plugin Interface

Yellow Pencil has a simple interface. There are two main areas, a left bar and right panel. The left bar contains various tools and the right panel contains either the type of customization (Global, One Page and Template) or the style properties of a selected element. Selected elements are highlighted on the page by a blue border.

Left Bar:
Selected Element:
Editor Panel (No Element Selected):
Editor Panel (The Element Selected):

B) Customizing Types

01. Introduction

There are three customizing types available. These are "Global customization", "One page customization" and "template customization".

02. Global Customization

Global changes are applying to all pages. You must use the global customizing type if you want to edit elements which display on every page such as Header, Navigation, General site design etc.

Example: Use global customization if you want to customize the font size of the menu.

You will see a "global" notice if you are on the global customizing.

03. Template Customization

These changes apply to the current post type. For instance; customize the template if you want to customize all product pages or all portfolio pages, etc. You will see "Template" notice if you are customizing a template.

For instance; Click "Customize Post Template" link to customize all single posts.

04. One Page Customization

These changes apply only to the target page. You will see "Page" notice if you are customizing a particular page.

Click "Edit Page - Yellow Pencil" button to customize the current post/page.

05. Priorities

if you edit the same element in several customizing types, the plugin will apply One Page Customization changes as first priority. The priorities are applied in the order;

  • One Page Customization
  • Template Customization
  • Global Customization

C) Selector

01. What is CSS selector?

CSS Selectors are patterns used to select the elements you want to style. Yellow Pencil generates the CSS selector automatically when you select an element.

02. Element Inspector

Element Inspector is active by default. This tool helps you to select elements by clicking on them within the page. You can disable the tool from left bar. All elements will be active for selection when Element Inspector is disabled.

Tips: Some dynamic elements are not selectable with clicks, Please mouse over the element that you want select and press to space key.

Tips: Disable the Element Inspector to turn off a popup or change tabs or slide the sliders.

Tips: The wireframe tool will help you to display the website's layout and all elements.

03. Single Inspector

This tool allows you to select only the clicked element.

The default element inspector is flexible and may select more elements than one if the selector applies to multiple elements on the page, but Single element inspector will select just the target element clicked.

04. Search An Element

This tool allows you to find and select the elements by ID, classes or tag names.

Also, you can use your own selectors to select the target element. Type an CSS selector and press to enter key to select them. See the following screenshot.

05. CSS Selector Tips

01. "body"

"body" : It selects body of the web page. Edit main font family, font size, background color, etc.

02. "a"

"a" : It selects all link elements.

03. "h1,h2,h3,h4,h5,h6"

"h1,h2,h3,h4,h5,h6" : It selects all heading elements.

04. Selects multi elements

Example: ".my-first-class,.my-second-class". Yes, this simple. Use comma for next class name.

05. Selects the element by class, id either tag names.

Example class: ".my-class"
Example id: "#my-id"
Example tag: "section"

06. Selecting multiple elements

Hold Shift key to select second element, additional elements will be selected with single Inspector.

07. Selecting the parent element

Selects the parent element of the selected element.

08. Hover Selector

Click the menu icon or right click selected element to open the menu and select ":hover" to apply mouse over style. The blue borders will be yellow on hover mode.

You must activate hover mode to show the element's hover changes in the editor.

09. Focus Selector

Click the menu icon or right click the selected element to open the menu and select ":focus" to apply focus style. The blue borders will be red on focus mode.

Please note: Focus feature is available only for form elements, input, textarea etc.

You must activate focus mode to show the element's focus changes in the editor.

D) CSS Properties

01. Text

Define the font family, boldness, size, and the style of a text.

Property Values Description
Font Family auto|value|inherit specifies the font for an element.
Font Weight 300|400|500|600|700 sets how thick or thin characters in text should be displayed.
Color color|transparent sets color to the text.
Text Shadow value|inherit adds shadow to text.
Font Size number|inherit sets the size of a font.
Line Height number|inherit specifies the line height.
Font Style normal|italic|inherit specifies the font style for a text.
Text Align start|left|center|right|justify specifies the horizontal alignment of text in an element.
Text Transform uppercase|lowercase|capitalize|none controls the capitalization of text.
Letter Spacing number|inherit increases or decreases the space between characters in a text.
Word Spacing number|inherit increases or decreases the white space between words.
Text Decaration overline|through|underline|inherit specifies the decoration added to text.
Text Indent number|inherit specifies the indentation of the first line in a text-block.
Word Wrap normal|break-word|inherit allows long words to be able to be broken and wrap onto the next line.

02. Background

Define the background image, color and background effects for elements.

Property Values Description
Background Color color|transparent sets the background color of an element.
Background Image url|none|inherit sets one or more background images for an element.
Background Position left top|left center|left bottom|right top|right center|right bottom|center top|center center|center bottom sets the starting position of a background image.
Background Size auto|length|cover|contain specifies the size of the background images.
Background Repeat repeat|repeat-x|repeat-y|no-repeat sets if/how a background image will be repeated.
Background Attachment scroll|fixed|local|inherit sets whether a background image is fixed or scrolls with the rest of the page.

03. Margin

Margin properties are used to generate space around elements.

Margin is on the outside of block elements while padding is on the inside.

  • Use margin to separate the block from things outside it.
  • Use padding to move the contents away from the edges of the block.

See Following screenshot, There is 100px margin bottom width and The green box shows the margin width.

Property Values Description
Margin Top value|none sets the top margin of an element.
Margin Right value|none sets the right margin of an element.
Margin Bottom value|none sets the bottom margin of an element.
Margin Left value|none sets the left margin of an element.

04. Padding

Padding properties are used to generate space around content.

Margin is on the outside of block elements while padding is on the inside.

  • Use margin to separate the block from things outside it
  • Use padding to move the contents away from the edges of the block.

Property Values Description
Padding Top value|none sets the top padding of an element.
Padding Right value|none sets the right padding of an element.
Padding Bottom value|none sets the bottom padding of an element.
Padding Left value|none sets the left padding of an element.

05. Border

Border properties allow you to specify the style, width, and color of an element's border. Take a look to following some border styles.

A dotted border.

A dashed border.

A solid border.

Property Values Description
Border Style solid|dotted|dashed|hidden|none sets the style of an element's four borders. This property can have from one to four values.
Border Width number|none sets the width of an element's four borders.
Border Color color|none sets the color of an element's four borders.

06. Border Radius

The border radius property is used to add rounded corners to an element. Following element has 25px border radius style.

A solid border and 25px border radius.

07. Position And Drag & Drop

Please watch the following short tutorial video to learn how the position feature works.

Tips: Please activate the Responsive mode after editing the element's positions. Run your website in responsive mode and edit it for the best view.

Property Values Description
Z Index auto|number|inherit specifies the stack order of an element.
Position auto|number|inherit Learn from w3school
Top auto|number|inherit Learn from w3school
Left auto|number|inherit Learn from w3school
Bottom auto|number|inherit Learn from w3school
Right auto|number|inherit Learn from w3school

08. Size

The height and width properties are used to set the height and width of an element. Watch the following short tutorial to learn how to resize the elements in real-time.

Property Values Description
Width auto|number|auto sets the width of an element.
Height auto|number|auto sets the height of an element.
Box Sizing context-box|border-box The box sizing property is used to tell the browser what the sizing properties (width and height) should include.
Min Width number|initial The min width property is used to set the minimum width of an element.
Max Width number|auto The max width property is used to set the maximum width of an element.
Min Height number|initial The min height property is used to set the minimum height of an element.
Max Height number|auto The max height property is used to set the maximum height of an element.

09. Animation

Yellow Pencil has 50+ ready-to-use animations, select an animation and have fun!

Property Values Description
Animation animation|none Add a animation to selected element. There is 50+ animations also you will see there your own animations too. Use Animation manager tool to add multiple animations.
Animation Play yp_onscreen|yp_hover|yp_click|yp_focus Trigger animation to play when element visible on screen.
Animation Iteration number|infinite specifies the number of times an animation should be played.
Animation Duration number defines how many seconds or milliseconds an animation takes to complete one cycle. Use Animation manager tool to add editing animation duration visually.
Animation Delay number specifies a delay for the start of an animation. Use Animation manager tool to add editing animation delay visually.

10. Filters

Filter property defines visual effects (like blur and saturation) to an element. Usually web developers use filters when working with images.

Filter Description
none Default value. Specifies no effects
blur Applies a blur effect to the image. A larger value will create more blur.
brightness Adjusts the brightness of the image.
contrast Adjusts the contrast of the image.
grayscale Converts the image to grayscale.
hue-rotate Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.
saturate Saturates the image.
sepia Converts the image to sepia.

Notice: internet explorer does not support filters.

11. Lists

List styles allow you to edit the list marker. Set different list item markers for ordered lists or set an image as the list item marker.

Property Values Description
List Style Type disc|circle|decimal|lower-alpha|upper-alpha|upper-roman|none Specifies the type of list-item marker in a list.
List Style Image image|none replaces the list-item marker with an image.
List Style Position number|none Specify that the list-item markers should appear inside the content flow.

12. Box Shadow

The box-shadow property attaches shadow to an element. Take a look at following tutorial video.

13. Extra

The extra section is for advanced users. You can learn the properties from the following table. You can also get detailed information about Properties from w3schools.com

Property Values Description
Transforms - The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc. See more
Opacity number|auto Specifies the opacity/transparency of an element.
Float left|right|none specifies whether or not a box (an element) should float.
Clear left|right|both|none specifies on which sides of an element floating elements are not allowed to float.
Display none|inline|block|inline-block specifies the type of box used for an HTML element.
Visibility visible|hidden specifies whether or not an element is visible.
Overflow X visible|hidden|scroll|auto specifies what to do with the left/right edges of the content - if it overflows the element's content area.
Overflow Y visible|hidden|scroll|auto specifies what to do with the top/bottom edges of the content - if it overflows the element's content area.

E) Tools And Features

01. Drag & Drop

Click and hold the mouse button down over the selected element and drag it. Positioning uses the CSS positioning 'relative' property for dragged elements.

You must be careful while using this feature since it may cause compatibility problems in mobile devices in case of any misuse. Please check your website with the Responsive Tool after using drag & drop elements and use Responsive Tool to make sure the page looks correct on all devices.

02. Live Resize

Resize any element in real-time. The Resize feature uses CSS Width and height properties. If you can't resize the element, Check maximum/minimum width/height properties.

03. CSS Editor

There is an excellent CSS Editor for those who would like to code! You can code live with the CSS editor and see the effect of the generated CSS rules in real time.

Notice: CSS comments not supported.

04. Responsive Tool

Yellow Pencil comes with an advanced responsive design tool that lets you customize your website for any device such as mobile, tablet, desktops and more.

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

Slowly resize your website width with the responsive tool and be sure this looks good on all screen sizes.

Tips
  • Use % instead of the pixels for width property.
  • Use Display property to hide elements (Extra -> Display).
  • A responsive website will work well on all screen sizes.
  • Here is a nice website that is displayed on various device sizes.

Some images and information from w3schools.

05. Measuiring Tool

Measuring tool helps you to see the element sizes. Activate Measuring Tool from the left bar and mouse over any element to display size information.

06. Wireframe

Wireframe tool hides the colors from the design and helps you to focus on the layout. Thus, you can easily see the structure of your website.

07. Design Information

The Design information tool provides you with basic and advanced design information such as typography.

It gives you these information;

  • used font families,
  • used colors,
  • HTML classes,
  • container width,
  • the number of affected elements,
  • element tag name,
  • element DOM code,
  • element box model,
  • and more.

08. Animation Generator

Create custom animations with scenes! Animation generator records your styles as an animation! Add more scenes, more styles and have fun! Provide mobility for your website with your unique animations! Take a look at the following tutorial video.

09. Animation Manager

Manage all Yellow Pencil animations! Use 50+ ready-to-use animations or use your own custom animations. Control animation durations and delays. Animation manager supports multiple animations! Yay! It's a unique feature in web technology!

10. Live Preview

"Live Preview" feature is an excellent tool to see your changes before saving. You can see all animations in action.

Take a look at the following screenshot:

11. Smart Guides

The Smart guide allows calculating intersection alignment while you are dragging and resizing the elements. You can enable/disable smart guides with CTRL + G.

F) Manage Styles

01. Manage Styles

You can see all customized pages and generated animations from the WordPress Panel and you can also export all CSS codes as ready-to-use. Manage CSS Styles from WordPress Panel > Yellow Pencil > CSS Styles.

02. Reset the selected element

Select the element that you want reset, Open Menu > Reset > The Element.

Notice: it resets changes of the selected element only for the current customizing type.

Notice: it also resets responsive changes of the selected element.

03. Reset CSS Styles

Red bordered box shows the reset button in the following screenshot. The reset button will delete all styles in current customizing type.

Example: It will reset all global changes if you reset changes in global customization.

Notice: Please check "you are customizing" area before you reset the changes. Take a look at the following screenshot:

Please note: You can't undo changes after reset.

04. Edit CSS Data Manually

Click "CSS Editor" icon from left bar or press on é " key to open CSS Editor and you can use esc key to close CSS editor.

Tips: Yellow Pencil automatically adds the CSS selector of the selected element.

Tips: Yellow Pencil automatically adds @Media queries in responsive mode.

Notice: CSS comments not supported.

05. Reset Properties

Use (undo) icon to reset the property to default.

06. Export CSS Data

Go to WordPress Panel > Yellow Pencil > CSS Styles and click "Download" button. Open downloaded stylesheet file with any text editor, copy all codes and paste to Custom CSS field in WordPress Panel > Customize > Additional CSS.

Notice: You can export CSS data as a stylesheet file but some features as background patterns, parallax, the plugin animations are not available in exported styles and may cause some styles not to work well.

Notice: We recommend that you keep the plugin activate. The plugin loads the styles only when needed so this is faster than exported stylesheet method. The plugin will not slow down your site.

G) Advanced Users

This section is for advanced users, please skip this section if you aren’t comfortable with CSS.

01. CSS3 Prefixes

Don't add CSS3 Prefixes, It’s automatic.

02. Background Parallax

Background Parallax is a Javascript based Custom CSS Rule.

Example CSS Code:
background-image:url("background.png");
background-parallax:true;
background-parallax-speed:4;
background-parallax-x:10;
Property Values:
background-parallax: true / false
background-parallax-speed: 1 to 10
background-parallax-x: 1 to 100

03. Hover/Focus Notice

Yellow Pencil uses a different CSS hover system.

.my-class:hover{color:red}
instead of
body.yp-selector-{hover,focus} .my-class{color:red}

This replaces ":hover" with PHP when it is included on the website.

04. Media queries

Yellow Pencil supports any media queries. (Since 5.3.0 version)

05. Before & after

Technically this is not possible to edit :before and :after selectors.

06. "!important" Tag

The plugin checks if the CSS rule needs to important tag and will add it if needed.

H) Notices

01. Don't break responsive system

Please check the page with Responsive Tool to be sure its works well on all screen sizes before saving changes because position and width changes may break a responsive page.

02. Drag & Drop Support

Please check the page with Responsive Tool to be sure its works well on all screen sizes before saving changes because Position changes may break a responsive page.

Some form elements are not draggable. You must edit the element position from Yellow Pencil Panel -> Position.

03. External CSS option

Don't use any classes or IDs of body and HTML tags without including the tag name as "body.page", "html#site" otherwise some CSS selectors may not work well using the external CSS option.

I) F.A.Q

01. Does the plugin work with all themes and plugins?

Yellow Pencil will work perfectly if your theme is well coded and clean. I tested Yellow Pencil on many themes. I will always make new updates to provide the best experience.

02. How to customize Login and Register Pages?

You must show the page as visitor to customize register, login pages, please click your gravatar on the right panel to toggle the view mode.

03. How can i update the plugin?

Please go to WordPress Panel > Yellow Pencil > Product License and activate your copy with your Envato Login.

Also, you can download the latest version from CodeCanyon > downloads page.

04. Can I request a refund?

Yes, you can. Click here to request a refund.

05. Why aren’t changes being saved?

The plugin states that it saves the changes successfully, but cache plugins may still load the old page. If you are experiencing this problem please clear your cache.

  • Deactivate the cache plugin or clear cache from cache plugin options after using the editor.
  • Clean web Browser cache and refresh Yellow Pencil Editor page.
  • Your web server may cache the files for a few hours. Contact with your web server provider if clearing the cache doesn’t fix the issue.
  • Be sure you are using the latest version.
  • There may be a problem with your theme.
  • Need help? Please create a ticket on our support forum.

06. Browser Support

Tested on Firefox, Chrome, Opera and Safari. Always Use Latest version of your browser. Use Chrome for best performance and experience.

  • Don't use "internet explorer".
  • Use Latest version of your browser.

J) Licences

Lite (Free Version)

The Lite version is completely free, and you can download it from wordpress.org. Font family, animation, size and some properties are not available in the free version.

Regular

Each Regular license is for use with one project/website. More info

Extended

Extended license for WP developers. Use in a single Theme that's sold. More info

K) Developers

Can I sell the plugin with my theme?

Yes, you can. You need one "Extended License" for each of your themes. Please see more about CodeCanyon licenses.

You must add the following code to theme function.php file:

define('YP_THEME_MODE', "true");

This code disables "the activate plugin" notifications.

Activating Demo Mode

Add the following code just to the Theme Demo.

define("WT_DEMO_MODE", "true");

This code will activate Demo Mode and show "Live Editor" button but Live Editor button will not work if you are logged in. Please log out to test demo mode.

Hides "Demo Options" in editor

Please add the following class to the theme demo option element to hide the demo choices in the editor.

.theme-demo-options


Custom CSS

You can use custom CSS for Yellow Pencil Editor.

body.yp-yellow-pencil .my-theme-element{
color:pink;
}

is_yellow_pencil() Function:
function is_yellow_pencil(){
if($("body").hasClass("yp-yellow-pencil")){
return true;
}else{
return false;
}

Yellow Pencil is compatible with all themes but If you want to make it more compatible, then use custom CSS and custom javascript.

L) Shortcuts

  • shift + arrow keys updates the selected element position.
  • esc Leaving selected element and closing CSS Editor if it is visible.
  • space Selecting the element which is being moused over.
  • space Scrolling the page to the selected element.
  • r Activate responsive mode
  • f Search an element.
  • h Hides the editor panel.
  • m Activate measuring tool.
  • w Activate wireframe mode.
  • é " Shows CSS editor.
  • l Hides the blue Borders.
  • ctrl + z Undo Changes.
  • ctrl + y Redo Changes.

M) Sources and Credits

N) Support

If you have any questions, please use our Support Forum. I will answer all questions within 2 business days.

Live Editor