VReel Page Customizer

This is the page of "VReel Page Customizer"



"VReel Page Customizer" is the script for Greasemonkey to customize the pages on VReel(vreel.net).

Mouseover Translate English-Japanese EX No English Page 日本語ページ
Change style of video information boxes for VReel English Page 日本語ページ
VReel Page Customizer English Page 日本語ページ
Veoh Page Customizer English Page 日本語ページ
Show User CSS for Veoh User English Page 日本語ページ
Show Node Tree English Page 日本語ページ

Table of contents

  1. User's manual
    1. Procedure
    2. Target pages
    3. Command Menu
    4. Customizing Definition Form
    5. Priority
    6. Changelog
    7. System requirement
    8. Related Links
    9. Appendix
  2. Sample CSS code and image
  3. FAQ

  1. User's manual

    1. Procedure

      2. (1) Show the page which you want to customize.
      (2) Select the page type(all or this) from the command menu of Greasemonkey.
      (3) Select Customization type in the form.
      (4) If you selected "URL",enter URL of the CSS file, and if you selected "CSS code", enter CSS code.
      (5) If you want to set the style attribute, check the "Option" check box. If you don't set it, go to (7).
      (6) Click the Option No. and enter the informations to search the target nodes.
      (7) Confirm the window after you have clicked the "Preview" button.
      (8) If it is OK,click the "Save" button and save the setting. If it id NG, edit CSS code and retry preview.

    2. Target pages

      3. You can customize following pages.

      (1) Profile pages
      • It means the pages specified by following url.
      • (a) http://beta.vreel.net/profile_*.html
      • (b) http://beta.vreel.net/index.php?q=profile&id=*
      • This page type is specified for both all profile pages and individual profile pages.
      • If you select individual profile page, the specification is only available in that user profile pages.

      (2) Channel pages
      • It means the pages specified by following url.
      • (a) http://beta.vreel.net/index.php?q=channels*
      • (b) http://beta.vreel.net/index.php?q=channels&id=*
      • This page type is specified for both all channel pages and individual channel pages.
      • If you select individual group page, the specification is only available in that group pages.
      • The all channel pages contains channel pages without id.

      (3) Community Group pages
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=community&a=show&id=*
      • This page type is specified for both all community group pages and individual community group pages.

      (4) Community Groups list pages
      • It means the pages specified by following url.
      • (a) http://beta.vreel.net/index.php?q=community
      • (b) http://beta.vreel.net/index.php?q=community&page=*
      • This page type is specified only for all of the community groups list pages.
      • The url of type (a) is same as page=0 of type (b).

      (5) Watch pages
      • It means the pages specified by following url.
      • http://beta.vreel.net/watch_*.html
      • This page type can be specified only for all of the watch pages.

      (6) Search result pages
      • It means the pages specified by following url.
      • (a) http://beta.vreel.net/index.php
      • (b) http://beta.vreel.net/index.php?q=search
      • This page type is specified for the search result pages.
      • The url of type (a) is same as top page,
      • but the search result page contains the tag having the id of 'search'.
      • Therefore these are distinguishable.

      (7) My Profile(My Account) pages
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=my
      • This page type is specified for both all My Profile pages and individual My Profile pages.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (8) Edit Profile(Account Settings) page
      • It means the page specified by following url.
      • http://beta.vreel.net/index.php?q=mya
      • This page type is specified for both all Edit Profile(Account Settings) page and individual Edit Profile(Account Settings) page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (9) Manage Movies(Update Information) page
      • It means the page specified by following url.
      • http://beta.vreel.net/index.php?q=mye2
      • This page type is specified for both all Manage Movies(Update Information) page and individual Manage Movies(Update Information) page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (10) Manage Movies(My Videos) page
      • It means the pages specified by following url.
      • (a) http://beta.vreel.net/?q=mye
      • (b) http://beta.vreel.net/index.php?q=mye*
      • This page type is specified for both all Manage Movies(My Videos) page and individual Manage Movies(My Videos) page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (11) Message page
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=message*
      • This page type is specified for both all Message page and individual Message page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (12) Friends page
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=friends*
      • This page type is specified for both all Friends page and individual Friends page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (13) Blocked users page
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=blocked*
      • This page type is specified for both all Blocked users page and individual Blocked users page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (14) Subscriptions page
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=subscribe2user*
      • This page type is specified for both all Subscriptions page and individual Subscriptions page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (15) Invite Friends page
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=invite*
      • This page type is specified for both all Invite Friends page and individual Invite Friends page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (16) Upload step 1/2 page
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=upload
      • This page type is specified for both all Upload step 1/2 page and individual Upload step 1/2 page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (17) Upload step 2/2 page
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php
      • This page type is specified for both all Upload step 2/2 page and individual Upload step 2/2 page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.
      • The url is same as top page,
      • but the upload step 2/2 page contains the tag(button) having the id of 'upload_submit'.
      • Therefore there are distinguishable.

      (18) Uploading result page(3rd page)
      • It means the pages specified by following url.
      • http://beta.vreel.net/index.php?q=upload3
      • This page type is specified for both all Uploading result page and individual Uploading result page.
      • You need to be logging in to see and customize.
      • And other users can not watch that page.
      • The individual specification is for the user having multi account.

      (19) Top page
      • It means the pages specified by following url.
      • (a) http://beta.vreel.net/
      • (b) http://beta.vreel.net/index.php
      • This page type is specified for the top page.

      (20) Other pages
      • It means the pages specified by following url.
      • (a) http://beta.vreel.net/index.php?*
      • (b) http://beta.vreel.net/index.php?q=*
      • This page type is specified for both all other pages and individual other pages.
      • The url of type (a) is for all other pages.
      • The url of type (b) is for individual other pages with the name following 'q='.

      (21) Forum
      • It means the pages specified by following url.
      • (a) http://vreel.net/board/*
      • (b) http://vreel.net/board/forumdisplay.php?f=*
      • This page type is specified for both all forum pages and individual forum pages.
      • The url of type (a) is for all forum pages.
      • The url of type (b) is for individual forum pages with forum id.

    3. Command Menu


      4. (1) ====== VReel Page Customizer ======
      • This menu is a title line. It doesn't happen at all.

      (2) Common customizing
      (2-1) Customize all ****** pages
      (2-2) Customize my profile pages
      (2-3) Customize community groups list pages
      • In the type of (2-1),you can customize all ****** pages.
      • In the type of (2-2),it is an example menu of the pages for login user.
      • In the type of (2-3),it is an example menu not having ID like community group list pages.

      (3) Individual customizing
      (3-1) Customize this ****** pages
      (2-2) Customize this user's my profile pages
      (3-3) Customize the ****** group
      • If you want to customize this ****** pages, select this menu.
      • This menu appears profile,group,videos category pages with ID.
      • In the type of (3-1),you can customize the individual channel/etc. pages with ID.
      • In the type of (3-2),you can customize all profile pages of the displayed user.
      • In the type of (3-3),you can customize all group pages of the displayed group.
      • In the inbox,etc,it will be displayed a similar menu.

      (4) Show Current CSS Code
      • If you want to see the CSS code used now, select this menu.

      (5) Show Original CSS Code
      • If you want to see the CSS code of the Vreel's original system CSS, select this menu.

      (6) View value list
      • Show list of the key and the values used in this script.

      (7) Change log output mode for Page Customization for Vreel
      • This menu is for debbuging.
      • Set log mode off usually.
      • If you want to output log,set log mode ON.
      • If you don't want to output log,set log mode OFF.

    4. Customizing Definition Form


      5. (1) Title area
      • This area is showing a kind of the page which you are going to customize.
      • When you move the mouse cursor on the title area,the mouse cursor will be changed to move cursor.
      • You can move the form box to another place using drag & drop.

      (2) Command Button
      1. Reset
        This button initializes all form parts.

      2. Save
        This button closes form after saving the data.
        If you didn't click "Preview" button,you have to reload after saving.

      3. Quit
        This button closes form without saving the data.
        If you clicked "Preview" button,the view will be back before.

      4. Preview
        This button shows the preview according to the setting.

      5. Help
        When you click this button,this page(main site) will be shown.
        When you click this button while push the shift key,this page(mirror site) will be shown.

      (3) Customization Type
      1. Unused
        This type does not customize. It is default setting.

      2. URL
        This type customizes the pages by using CSS file of the specified URL.
        Put the URL of the CSS file into the input area.

      3. CSS code
        This type customizes the pages by using the entered CSS code.
        Put CSS code into the textarea.

      4. Disable
        This type disables customizing.
        It disables also Vreel system customizing.

      5. Option
        This is an option to add a style to the specified elements.
        If you select Customization Type "Disable", option is also disabled.

      (4) Option setting
      • The target node is searched by using XPath.
      • You can set the option from 1 to 10.
      • When the style of the target node is specified at the style attribute of it,
      • if you want to specify the same property, you have to use this feture.
      • Because the priority(specificity) of the style attribute is highest.

      1. Option No.(Radio Button)
        2. Select option number.

      2. Enable this option(Check Box)
        3. If you want to take effect the setting, check the check box.

      3. Set type(Radio Button)
        4. If you want to append your code to the style attribute of the target nodes, select "Append".
        If you want to replace with your code to the style attribute of the target nodes, select "Replace".

      4. Tag(Input Text)
        5. Specify the tag name to search target nodes if it is necessary.

      5. ID(Input Text)
        6. Specify the ID value to search target nodes if it is necessary.

      6. Class(Input Text)
        7. Specify the class name to search target nodes if it is necessary.

      7. Attribute(Input Text)
        8. Specify the Attribute name and value to search target nodes if it is necessary.
        Set attribute name to the left box.
        Set attribute value to the right box.

      8. Style Code(Input Text)
        9. Specify CSS code to set the target nodes.

      9. Clear Option(Command Button)
        10. This button clears your specification of the current option number.

      10. Set XPath(Command Button)
        11. This button makes XPath code(XPathExpression) to search the target and displays in the XPath box.
        You need not to click this button,because it is the button for confirming the specification.

      11. XPath(Check box and Input Text)
        12. If you want to enter a code into the XPath box directly, check the check box on the side of "XPath"(V1.0 or later).
        If this check box is checked, the other boxes are ignored and your inputted code will be used.

    5. Priority

      6. (1) Disable
      • The priority of "Disable" is highest.
      • And the next is URL/CSS code.

      (2) "Individual customizing" and "Common customizing"
      • The priority of "Individual customizing" is higher than "Common customizing".
      • The individual customizing affects to a page with an id like Profile pages and Group pages.

      (3) Vreel's system defined style
      • It is removed from the html if you specified "Disable" or "URL/CSS code" in "Individual customizing" or "Common customizing".

      • System defined style < Common customizing < Individual customizing
      • Therefore at finally,the customizing combination is defined like the following table.
      Individual customizing
      DisableURL/CSS codeUnused
      Common customizingDisableDisableDisableDisable
      URL/CSS codeDisableIndividual customizingCommon customizing
      UnusedDisableIndividual customizingSystem

    6. Changelog

      7. DateVersionReason
      2009-07-041.0.6Changed around Help and mouse cursor, etc.
      2009-06-251.0.5Added the mirror page and a tooltip to the Help button.
      2009-06-181.0.4Changed URL of the Help page.
      Remove changelog.
      2009-06-061.0.3Removed height property of the option box.
      Changed background of the title area in the form.
      Changed the code about radio buttons.
      2009-05-301.0.2Added Help button.
      Changed log mode function.
      2009-05-191.0.1Fixed some bugs(e.g. element type customizing,etc.).
      Replaced document.getElementById to $.
      2009-05-161.0Cleaned up the code a little.
      Supported direct input of the XPath box.
      Set the mouse cursor on the title area and the buttons
      2009-04-300.9Removed the command buttons for moving the form.
      Supported the movement of the form by Drag&Drop.
      2009-03-170.8Added the button to move the configuration form
      2009-02-080.7Added element style customizing option
      2009-02-010.6Added configuration form
      2009-01-070.5Modified for the pagination of the community and groups
      2008-12-270.4Integrated function for individual page
      2008-12-200.3Added function for individual page(profile/channel/group)
      2008-12-130.2Added function for inputing CSS code by textarea
      2008-12-060.1New creation

    7. System Requirement

      8. (1) Browser
      • Firefox 3.x
      • I don't know about Firefox 2.x.

      (2) Add-on of Firefox
      • Greasemonkey 0.8.20090123.1 or later ( using GM_deleteValue and GM_listValues )
      (1) Firefox

      (2) Firefox add-ons

      (3) userscripts.org

      (4) VReel

    8. Appendix

      9. (1) Share CSS
      • If you want to share your CSS code between greasemonkey users, you should select URL type.
      • Then you put your CSS file in the open server.

      (2) Edit the script
      • If you want to customize this script only for using yourself, you don't need to get my permission.
      • But that script must be only used by you.

      (3) Publish the script
      • If you want to add your code in this script for other people, first of all,contact me.
      • If it is very useful, I might allow it with condition.

      (4) Request
      • If you want to request another useful feture in this script, contact me.

  2. Sample CSS code and image

    3. These CSS codes can be used by my script "VReel Page Customizer"


  3. FAQ

    4. 1QWhy the priority of "Common customizing" is higher than "System defined style"?
    AIn community groups,there is no way to know that the sytle is default style or it was customized blue type.
Free Web Hosting