Title: JavaScript in WP Pages
Last modified: August 19, 2016

---

# JavaScript in WP Pages

 *  [avanti_seo](https://wordpress.org/support/users/avanti_seo/)
 * (@avanti_seo)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/javascript-in-wp-pages-1/)
 * Hi all, thanks in advance
 * My CSS is poor 🙁
    I have jacked the “Oriental” theme, and written some working
   PHP code to display child-pages of the current level-1 page in the ‘search bar’,
   Example URL is: [http://rocket.myzen.co.uk/candidate/](http://rocket.myzen.co.uk/candidate/)–
   The php I will post for others in a seperate post.
 * 2 problems:
    1. The white-swirl background image of the ‘searchbar/sub-page menu’
   works fine in FireFox, but often dissappears in I.E. when you move the window.
   Any thoughts?
 * 2. I would like the child-page links to be in the same ‘black bold non-underlined’
   font as the current parent page item (‘Candidate’ in the exmaple), and then to‘
   black underline’ when hovered over.
    – I have tried stealing chunks of code from
   elsewhere in the CSS, but to no avail. – I am fairly sure the correct place for
   the needed code is ‘somewhere’ in the ‘searchbar’ css code, but not sure which
   bit.
 * Here is the output HTML code in question:
    ` <div id="page"> <div id="navcontainer"
   > <ul id="navlist"><font face="Century Gothic" size="2"> <li id="first">[   ](https://wordpress.org/support/topic/javascript-in-wp-pages-1/?output_format=md#)
    - [Home](http://rocket.myzen.co.uk)
    -  <li class="page_item page-item-7 current_page_item">[Candidate](http://rocket.myzen.co.uk/candidate/)
      
      <li class="page_item page-item-11">[Client](http://rocket.myzen.co.uk/client/)
      <li class="page_item page-item-14">[Contact Us](http://rocket.myzen.co.uk/contact-us/)
    - <li class="page_item page-item-17">[Latest Vacancies](http://rocket.myzen.co.uk/latest-vacancies/)
      
      <li class="page_item page-item-19">[Useful Links](http://rocket.myzen.co.uk/useful-links/)
      </font> </div> <!-- <div id="subnavcontainer"> -->
    -  <div id="searchBar">
       <center> <table align="center" border="0" cellpadding
      ="0" cellspacing="0" height="30" width="0"> <tbody><tr> <td>
    - <!-- <ul id="navlist"> <font face='Century Gothic' size='4'> </font> -->
       
      Client<font face="Century Gothic" size="2">[Cand sub page 1](http://rocket.myzen.co.uk/candidate/cand-sub-page-1/)
      </font><!-- </font> <font face='Century Gothic' size='5'> </font> -->
    -   
       </td> </tr> </tbody></table> </center> </div>
    - Here is the CSS Stylesheet for the Theme:
       ` /* <div id="searchBar"> <div 
      id="navcontainer"> #navcontainer ul { background: #CC0000; padding: 0; margin:
      0; list-style: none; float: left; width: 100%; font-size: 1.0em;
    - Theme Name: oriental
       Theme URI: [http://pure-essence.net/2008/09/19/wordpress-theme-oriental/](http://pure-essence.net/2008/09/19/wordpress-theme-oriental/)
      Description: Created by [pure-essence.net](http://pure-essence.net/). Oriental,
      plum, bamboo, pine, flower, foliage, orange, red theme. Now compatible with
      wordpress 2.7.
    - version 1.1.1 - Recoded to use relative positioning instead of float.
    - version 1.1.2 - Fixed IE 6 issue brought up [http://wordpress.org/support/topic/208400](http://wordpress.org/support/topic/208400)
    - version 1.2.0 - Making the theme compatible with wp 2.7. And sorry I no longer
      wish to support IE 6. If this theme doesn't look good in IE 6, use a different
      one. And seriously everyone need to move off the evil IE 6.
    - version 1.2.1 - Made the theme a bit more backward compatible.
       Version: 1.2.1
      Author: Ying Zhang Author URI: [http://pure-essence.net/](http://pure-essence.net/)
      Tags: fixed-width, two-columns, threaded-comments, sticky-post, microformats,
      left-sidebar, yellow, orange, red
    -  The CSS, XHTML and design is released under GPL:
       [http://www.opensource.org/licenses/gpl-license.php](http://www.opensource.org/licenses/gpl-license.php)
    - */
    - /* Layout - font here is globally applied to whole page- */
       body { padding:
      0; margin: 0; font-size: 0.7em; font-family:Verdana; background: black; color:#
      000; }
    - /* Default */
       a { color: #3b6065; }
    - a:hover {
       color: #841700; }
    - h1 {
       font-size: 1.2em; }
    - h2 {
       font-size: 1.1em; }
    - h3 {
       font-size: 1em; }
    - h4 {
       font-size: .9em; }
    - h5 {
       font-size: .8em; }
    - h6 {
       font-size: .7em; }
    - h7 {
       padding: 0; margin: 0; font-size: 1.0em; font-family:Verdana; background:
      black; color: #000; }
    - blockquote {
       padding: 0 0.5em; font-size: 1.7em; border-left: 5px solid #
      f0e8a7; margin: 0; background-color: #f8f8e2; }
    - img.alignleft {
       float: left; margin: 0 .8em .8em 0; }
    - img.alignright {
       float: right; margin: 0 0 .8em .8em; }
    - .aligncenter {
       display: block; margin-left: auto; margin-right: auto; }
    - .alignleft {
       float: left; }
    - .alignright {
       float: right; }
    - a img {
       padding: 5px; border: 1px solid #ccc; }
    - form {
       padding: 0; margin: 0; }
    - /* Layout */
       #container { background: black; width: 980px; margin: 0 auto;}
    - #header {
       height: 123px; }
    - #header h1 {
       padding: 25px 0 0 53px; margin: 0; color: #faf6bb; font-family:
      Garamond, Georgia, serif; font-size: 2em; }
    - #header h1 a,
       #header h1 a:hover { text-decoration: none; color: #faf6bb;}
    - #header .description {
       padding: 0 0 0 53px; color: #c46816; font-family: 
      Garamond, Georgia, serif; font-size: 1.3em; }
    - #page {
       padding: 0 53px; background: black; }
    - #pageinner {
       position: relative; margin: 13px 0 0 0; background: white; }
    - #navcontainer ul {
       background: #CC0000; padding: 0; margin: 0; list-style:
      none; float: left; width: 100%; font-size: 1.0em; }
    - #subnavcontainer ul {
    -  background: #bb0000;
       padding: 0; margin: 0; list-style: none; float: left;
      width: 100%;
    - }
    - * html #navcontainer ul {
       background: green; font-family: Gothic; font-size:
      1.0em; }
    - #navcontainer ul li {
       display: inline; font-family: Gothic; font-size: 1.0em;}
    - #navcontainer ul li#first a,
       #navcontainer ul li#first a:hover { cursor: 
      default; background-image: none; text-decoration: none; font-family: Gothic;
      font-size: 1.0em; }
    - #navcontainer ul li a {
       color: #faf6bb; margin: 5px 0 0 0; padding: 4px 14px
      8px 12px; text-decoration: none; background: url(images/headerBarLiBk.gif)
      right 3px no-repeat; float: left; font-family: Gothic; font-size: 1.0em; }
    - #navcontainer ul li a:hover {
       text-decoration: underline; font-family: Gothic;
      font-size: 1.0em; }
    - /* Change font here for Navigation Menu */
       #navcontainer ul li.current_page_item
      a, #navcontainer ul li.current_page_ancestor a { background: url(images/searchBarBk.
      gif) repeat-x; color: black; padding: 4px 12px 8px 12px; margin-left: -2px;
      font-family: Gothic; font-size: 1.0em;
    - }
    - #navcontainer ul li.current_page_item a:hover,
       #navcontainer ul li.current_page_ancestor
      a:hover { text-decoration: none; font-family: Gothic; font-size: 1.0em; }
    - #navcontainer ul li a:hover {
       text-decoration: underline; font-family: Gothic;
      font-size: 1.0em; }
    - #searchBar {
       /* color: black; padding: 4px 12px 8px 12px; margin-left: -2px;
      font-family: Gothic; font-size: 1.0em;
    -  background: #CC0000;
       padding: 0; margin: 0; list-style: none; float: left;
      width: 100%; font-size: 1.0em;
    -  - orig search bar---------
       clear: left; background: url(images/searchBarBk.
      gif) repeat-x; text-align: right; font-family: Gothic; font-size: 1.0em; -----------------------
    -  padding: 0;
       margin: 0; font-size: 0.7em; font-family:Verdana; background:
      black; color: #000; font-family: Garamond, Georgia, serif; a { color: #3b6065;}
      a:hover { color: #841700; }
    -  */
    -  // a:hover {color: white}
       // color: black; // a:link {hover: text-decoration:
      underline} display: inline; clear: left; background: url(images/searchBarBk.
      gif) repeat-x;
    -  padding: 0 4px 2px 12px;
       // margin: 0px 0 0 0; font-family: Gothic; font-
      size: 1.2em; color: black width: 100%; // font-weight: bold; a:link {color:
      black text-decoration: none; }
    - }
    - #searchform {
       padding: 5px; }
    - #s {
       border: 1px solid #bbb; }
    - #searchsubmit {
       border: 1px solid #bbb; background: #fff url(images/buttonBk.
      gif) repeat-x; }
    - h2.pagetitle {
       background: White; margin: 0; color: White; font-family: Garamond,
      Georgia, serif; padding: 3px 3px 3px 10px; font-size: 1.9em;
    - }
    - #content {
       margin: 0 0 0 0px; padding: 0; font-size: 1.2em; }
    - #contentinner {
       padding: 10px; font-size: 0.9em; line-height: 1.5em; }
    - /* Post */
       .post h2.posttitle { padding: 0; margin: 0; float: left; font-
      size: 1.2em; }
    - .post h2.posttitle a,
       .post h2.posttitle a:hover { text-decoration: none;
      color: black; }
    - /* make your own sticky post styling */
       .sticky { }
    - small.postmetadata {
       font-size: 0.85em; }
    - ul.postmetadata {
       padding: 0; margin: 0; list-style: none; font-size: 0.85em;}
    - ul li.tags {
       float: left; }
    - ul li.comments {
       text-align: right; }
    - div.divider {
       background: url(images/divider.gif) center center repeat-x;
      height: 47px; margin: 1em 0; }
    - div.navigation {
       text-align: center; font-family: Garamond, Georgia, serif;
      padding: 0 0 2em 0; }
    - div.commentnavigation {
       padding: 0; }
    - #singlepost {
       background: url(images/commentBk.gif) center bottom repeat-
      x; padding: 10px 10px 49px 10px; margin: 0; font-size: 0.9em; line-height:
      1.5em; }
    - #commentwrapper {
       background: #dfd797 url(images/commentBottomBk.gif) center
      bottom repeat-x; padding: 0 15px 49px 15px; }
    - #commentwrapper h2 {
       margin: 0; padding: 0.5em 0; }
    - /* Comment */
       h2.commentheading { font-size: 1.2em; color: #fefef6; font-
      family: Garamond, Georgia, serif; }
    - ol.commentlist {
       padding: 0; margin: 0; list-style: none; font-family: Tahoma,'
      Trebuchet MS', Verdana, Arial, sans-serif; color: #3a3a3a; }
    - ol.commentlist a {
       text-decoration: none; }
    - img.avatar {
       border: 3px solid #fefef6; margin: 0 0.5em; }
    - ol.commentlist li.commentind {
       padding: 0 0 2em 0; margin: 0; }
    - ol.commentlist li.depth-1 {
       border-bottom: 3px double #fefef6; padding: 0
      0 1em 0; margin-bottom: 1em; }
    - ul.children {
       list-style: none; }
    - ol.commentlist ul.children li.commentind {
       padding: 1em 0 0 0; }
    - ol.commentlist li.commentind cite {
       font-style: normal; }
    - p.commentsedit {
       font-size: 0.9em; margin: 0 0 0 0.5em; }
    - .commentindheader {
       border-bottom: 1px dotted #fefef6; }
    - .commentindheader img.avatar {
       float: left; }
    - ol.commentlist li.legacyAlt .commentindheader {
       text-align: right; }
    - ol.commentlist li.legacyAlt .commentindheader img.avatar {
       float: right; }
    - ol.commentlist li.legacyAlt p.commentsedit {
       text-align: right; margin: 0
      0.5em 0 0; }
    - /* Comment form */
       form#commentform input, form#commentform textarea { border:
      1px solid #bbb; }
    - input#author,
       input#email, input#url { width: 60%; }
    - textarea#comment {
       width: 90%; }
    - input#submit {
       border: 1px solid #bbb; background: #fff url(images/buttonBk.
      gif) repeat-x; }
    - #footer {
       clear: both; background: black; height: 108px; margin: 0 53px; 
      font-family: Garamond, Georgia, serif; text-align: right; font-size: 1em; 
      color: #a66117; }
    - #footer p {
       margin: 0; padding: 0.9em; line-height: 1.5em; }
    - #footer a {
       color: #a66117; }
    - #footer a:hover {
       color: #cf7819; }
    - div#recaptcha_widget_div {
       float: right; }
    - /* WordPress required */
       .wp-caption { border: 1px solid #ddd; text-align:
      center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; }
    - .wp-caption img {
       margin: 0; padding: 0; border: 0 none; }
    - .wp-caption-dd {
       font-size: 11px; line-height: 17px; padding: 0 4px 5px; 
      margin: 0; }
    - h3.subpages {
       padding: 1em 0 0.5em 0; margin: 0; }
    - ul.subpages {
       padding: 0 0 0 1em; margin: 0 0 0 1em; list-style: square; }
    - /* Formatting */
       fieldset { border: 1px solid #ccc; padding: 0 1em; margin:
      0; }
    - legend {
       color: #999; font-size: 1.1em; font-weight: bold; }
    - hr {
       border: 0; color: #cfc887; background-color: #cfc887; }
    - pre, code {
       width: 100%; overflow: auto; font-size: 1em; }
    - .post table {
       width: 100%; border: 1px solid #ccc; border-top: 0; border-
      collapse: collapse; }
    - .post table th,
       .post table td { border: 1px solid #ccc; border-bottom: 0;
      padding: .3em .5em; }
    - .post table th {
       text-align: left; border-bottom: 2px solid #ccc; }
    - p.loggedinAs {
       margin: 0; padding: 0; }
    - a#cancel-comment-reply-link {
       display: block; margin-bottom: 1em; }
    - /* start subnav2 ------------ */
    - #subnav2 ul {
       background: url(images/searchBarBk.gif) repeat-x; padding: 
      0; margin: 0; list-style: none; float: left; width: 100%; font-size: 1.0em;}
    - #subnav2 container ul {
    -  background: url(images/searchBarBk.gif) repeat-x;
       padding: 0; margin: 0;
      list-style: none; float: left; width: 100%;
    - }
    - * html #subnav2 ul {
       // background: green; background: url(images/searchBarBk.
      gif) repeat-x; font-family: Gothic; font-size: 1.0em; }
    - #subnav2 ul li {
       background: url(images/searchBarBk.gif) repeat-x; display:
      inline; font-family: Gothic; font-size: 1.0em; }
    - #subnav2 ul li#first a,
       #subnav2 ul li#first a:hover { cursor: default; //
      background-image: none; background: url(images/searchBarBk.gif) repeat-x; 
      text-decoration: none; font-family: Gothic; font-size: 1.0em; }
    - #subnav2 ul li a {
       color: #faf6bb; margin: 5px 0 0 0; padding: 4px 14px 8px
      12px; text-decoration: none; background: url(images/searchBarBk.gif) repeat-
      x; float: left; font-family: Gothic; font-size: 1.0em; }
    - #subnav2 ul li a:hover {
       background: url(images/searchBarBk.gif) repeat-x;
      text-decoration: underline; font-family: Gothic; font-size: 1.0em; }
    - /* Change font here for Navigation Menu */
       #subnav2 ul li.current_page_item
      a, #subnav2 ul li.current_page_ancestor a { background: url(images/searchBarBk.
      gif) repeat-x; color: black; padding: 4px 12px 8px 12px; margin-left: -2px;
      font-family: Gothic; font-size: 1.0em;
    - }
    - #subnav2 ul li.current_page_item a:hover,
       #subnav2 ul li.current_page_ancestor
      a:hover { background: url(images/searchBarBk.gif) repeat-x; text-decoration:
      none; font-family: Gothic; font-size: 1.0em; }
    - #subnav2 ul li a:hover {
       background: url(images/searchBarBk.gif) repeat-x;
      text-decoration: underline; font-family: Gothic; font-size: 1.0em; }
    - /* end subnav2 ------------ */
    - Thanks again, Avanti Computer Northwood

The topic ‘JavaScript in WP Pages’ is closed to new replies.

 * 0 replies
 * 1 participant
 * Last reply from: [avanti_seo](https://wordpress.org/support/users/avanti_seo/)
 * Last activity: [16 years, 10 months ago](https://wordpress.org/support/topic/javascript-in-wp-pages-1/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics