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 15MB. Contact with your web server provider if you have a problem in this regard.
- 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.
- Have you any further 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 from WordPress Panel > Settings > Yellow Pencil Source
04. Plugin Interface
Yellow Pencil has a simple interface. There are a left bar and right panel. Left bar has tools and right panel has style properties in which also blue borders show the selected elements.
Editor Panel (No Selected):
Editor Panel (The Element Selected):
B) Customizing Types
There are three customizing types which are "Global customization", "One page customization" and "template customization".
02. Global Customization
Global changes are applying to all pages. You must use global customizing type if you want to edit the element 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. One Page Customization
The changes are applying 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.
04. Template Customization
The changes are applying to 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.
Click "Customize Post Template" link to customize all single posts.
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. You can disable the tool from left bar. All elements will be active when Element Inspector disabled.
Tips: Some dynamic elements are not selectable with clicks, so try mouseover the element that you want select and and press to space key.
Tips: Disable the Element Inspector to turn off a popup or change tabs or slide the sliders.
Tips: Wireframe tool will help you to display the website layout and all elements.
03. Single Inspector
This tool allows you to select only the clicked element.
Example: Default element inspector is flexible and may select more elements than one, but Single element inspector will select just target element.
04. Search An Element
This tool allows you to search and select the elements by ID, Classes or tag names also this helps you to generate CSS selectors.
Also, you can use your selectors. Type the CSS selector and press to enter key to select them. See the following screenshot.
05. Custom CSS Selector Tips
"body" : It selects body of the web page. Edit main font family, font size, background color, etc.
"a" : It selects all link elements.
"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. Hover (mouseover) Selector
Click menu icon or right click selected element to open the menu and select ":hover" to apply mouseover style. The blue borders will be yellow on hover mode.
07. Focus Selector
Click 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 just to form elements, input, textarea etc.
08. Selecting multiple elements
Hold Shift key to select second element, next elements will be selected with single Inspector.
09. Selecting parent element
It lets you select parent element of the selected.
D) CSS Properties
Define the font family, boldness, size, and the style of a text.
|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.|
Define the background image, color and background effects for elements.
|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.|
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 yellow box shows the margin width.
|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.|
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.
|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.|
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.
|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 on responsive mode and edit it for the best viewport.
|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|
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.
|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.|
Yellow Pencil has 50+ ready-to-use animations, select an animation and have fun!
|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.|
Filter property defines visual effects (like blur and saturation) to an element.
|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. Box Shadow
The box-shadow property attaches shadow to an element. Take a look at following tutorial video.
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
|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. This feature is using CSS positioning 'relative' property for dragging 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 compatibility the page with all devices. Be sure your site look well on all screen sizes.
02. Live Resize
Resize any element in real-time. Resize feature uses CSS Width and height properties. If you can't resize the element, Check maximum/minimum width/height properties.
03. CSS Editor
An excellent CSS Editor for those who would like to coding! You can code live with CSS editor and interfere the generated CSS rules.
04. Responsive Tool
Yellow Pencil is coming with an advanced responsive 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.
- Use % instead of the pixels for width property.
- Use Display property for 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 informations from w3schools.
05. Measuiring Tool
Measuring tool helps you to see the element sizes. Activate Measuring Tool from the left bar and mouseover any element to display size information.
Wireframe tool clears the colors from the design and helps you to focus on the layout. Thus you can easily work on your website.
07. Design Information
Design information tool provides you to learn the basic and advanced information such as typography. For instance; used font families, colors, HTML classes, container width, the number of affected elements, element tag name, element DOM code and much more.
08. Animation Generator
Create custom animations with the scenes! Animation generator will be recording your moves 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 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 try mouseover styles and 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 WordPress Panel and also export all CSS codes as ready-to-use. Manage CSS Styles from WordPress admin > settings > Yellow Pencil Source page.
02. Reset the selected element
Select the element that you want reset , Open Menu > Reset > The Element.
03. Reset CSS Styles
Red bordered box shows the reset button in the following screenshot. The reset button will delete all current styles. It will reset all global data 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.
05. Reset Properties
Use icon to reset the property to default.
06. Export CSS Data
Go to WordPress Panel > Settings > Yellow Pencil Source > "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 is not available in exported styles and may some styles don't work well.
Notice: We recommend you to keep the plugin activate. The plugin loads the styles only when need so it will keep your website faster. The plugin will not slow down your site.
G) Advanced Users
This section is for advanced users, please skip this section if you don't know CSS.
01. CSS3 Prefixes
Don't add CSS3 Prefixes, It’s automatic.
02. Background Parallax
Example CSS Code:
background-image:url("background.png"); background-parallax:true; background-parallax-speed:4; background-parallax-x:10;
03. Hover/Focus Notice
Yellow Pencil is using a different CSS hover system.
This again replaces to ":hover" with PHP when it is included to the website.
04. Media queries
Yellow Pencil support any media queries. (Since 5.3.0 version)
05. Before & after
Technically this is not possible to edit :before and :after selectors.
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 not draggable. You must edit the element position from Yellow Pencil Panel -> Position.
03. External CSS option
Don't use any class or ID of body and HTML tags. Use it with tag name if need as "body.page", "html#site" otherwise some CSS selectors may not work well in external CSS option.
01. Can I customize anything with Yellow Pencil?
Yellow Pencil will work perfectly if your theme is good coded and clean. I tested Yellow Pencil on many themes. I will always make new updates for the best experience.
02. How to customize Login and Register Pages?
You must login to WordPress panel to use Yellow Pencil but may you will not be able to edit pages such as register, login page after logged.
03. How can i update the plugin?
Please go to Wordpress Panel > Settings > Yellow Pencil Update page. Fill the required information and save. You will see a notice and "update" button on WordPress panel when new update available.
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 are not the changes saved?
The plugin saves the changes with successful, but the cache plugins still load the old page. Shortly this issue about cache and you must clear 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.
- May your web server cache the files for a few hours. Contact with your web server provider.
- Be sure you using the latest version.
- May the theme is not standard.
- Need to 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.
Lite (Free Version)
The Lite version is completely free, and you can download it from wordpress.org but Font family, animation, size and some properties not available.
Each Regular license for one project/website. More info
Extended license for WP developers. Use in a single Theme that's sold. More info
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:
add_site_option( 'YP_PART_OF_THEME', 'true' );
This line code for disabling Envato Update API.
Activating Demo Mode
Add the following code just to the Theme Demo. Add it into functions.php file.
This code will activate Demo Mode and show "Live Editor" button but Live Editor button will not work if you are logged in.
Hides "Demo Options" in editor
Please add the following class to the theme demo option element to hide the demo choices in the editor.
You can use custom CSS for Yellow Pencil Editor.
- esc Leaving selected element and closing CSS Editor If is visible.
- space It's selecting the element which is mouse over.
- space It's Scrolling the page to 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
- jQuery UI
- Parallax Plugin
- Ace Code Editor
- Flat UI Colors
- Iris Color Picker
- Colour Lovers
- Google Web Fonts
- Context Menu
If you have any questions, please use our Support Forum. I will answer all questions maximum within 2 business days.