JavaScript in WP Pages

  • avanti_seo

    (@avanti_seo)


    16 years, 10 months ago

    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/
    – 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">   

    • Home

      • <li class="page_item page-item-7 current_page_item">Candidate
      <li class="page_item page-item-11">Client
      <li class="page_item page-item-14">Contact Us

      <li class="page_item page-item-17">Latest Vacancies
      <li class="page_item page-item-19">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</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/
      Description: Created by 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

      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/
      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

      */

      /* 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.