help with active links needed

  • hello there!
    I’m new to wordpress and I’m at the moment editing a theme to make it a static website theme. I have a problem with the active links.
    There is a mousehover effect set in pink for both menu and submenu but i would like the link to stay pink when someone clicks on a navigation point so that people always know where exactly they are on the page. I’m not using the pages widget. Can someone please explain to me what i have to change in the css so that it works?and do i have to change something in any of the php files as well?I appreciate your help a lot. Thanks so much in advance!

    here is my website:https://thelondonlife.de/

    here is my css:

    /*
    Theme Name: Scribblings
    Description: Grungey Notepad Layout with original illustrations. Includes a blank header graphic so that you can draw your own header. Valid XHTML 1.0 Strict and CSS.
    Version: 1.02
    Author: Joey Robinson
    Author URI: https://www.techdesigns.co.uk
    Tags: two-columns, fixed-width, left-sidebar
    */
    html, body{ margin:0; padding:0; text-align:center; background:url(img/bg.jpg) top center #BFAC7F;}
    #background{ width:100%; margin-left:auto; margin-right:auto; background:url(img/background.jpg) top center repeat-x;}
    #pagewidth{ width:1000px; text-align:left; margin-left:auto; margin-right:auto; background:url(img/page_bg.jpg) top center repeat-y;}

    #page{ width:940px; text-align:left; margin-left:auto; margin-right:auto; background:url(img/page.jpg) top center no-repeat; padding: 0px 30px 0px 30px;}

    #header{ position:relative; height:223px; width:940px; overflow:hidden;}

    #titles{float:left; clear:left; width: 500px; height:223px; overflow:hidden;}
    #titles h1{ position:relative; float:left; margin:63px 0px 0px 45px; padding:0px; font-family:arial; font-weight:normal; color:#FF0099; font-size:20px;}
    #titles h1 a{color:#FF0099; text-decoration:none;}
    #titles h1 a:hover{color:#000000; text-decoration:none;}
    #titles h2{ position:relative; float:left; clear:left; margin:4px 0px 0px 50px; padding:0px; font-family:arial; font-weight:bold; color:#000000; font-size:14px; width: 400px;}

    #search{float:right; clear:right; margin: 59px 20px 0px 0px; height:178px; width: 300px; overflow:hidden;}

    div.searchfield{padding: 0px 6px 0px 15px; width: 153px;height: 34px; overflow:hidden; border:0px; color:#FF0099; float:left; background: url(img/search_field.gif) no-repeat;outline: none; margin: 0px; }
    div.searchfield:hover{ background: url(img/search_field.gif) no-repeat -200px 0px;color:#FF0099;overflow:hidden;}

    .searchtext{background: url(img/search_trans.gif); border:0px; color:#FF0099; font-size:14px; font-family:arial; font-weight:bold; padding: 9px 10px 0px 0px; width: 143px; overflow:hidden;}

    input.searchsubmit { float:right; clear:right; width: 115px;height: 35px;background: url(img/search_button.gif) no-repeat;outline: none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
    input.searchsubmit:hover { background: url(img/search_button.gif) no-repeat -115px 0px;}

    #menu{ position:relative; height:37px; width:940px; overflow:hidden;}

    #tabs { float:right; display:block; line-height:normal; width:930px; margin: 0px 20px 0px 0px; height: 37px; text-align:right; padding: 0px 0px 0px 0px;overflow:hidden; }
    #tabs ul { margin:0; padding:0px 0px 0px 0px; list-style:none;float:right; font-family: arial; font-size: 14px; font-weight:bold;}
    #tabs li { display:inline; margin:0; padding:0; }
    #tabs a { float:left; background:url(img/tab.gif) no-repeat left top; margin:0px 2px 0px 0px; padding:0 0 0 15px; text-decoration:none; }
    #tabs a span { float:left; display:block; background:url(img/tab2.gif) no-repeat right top; padding:8px 10px 11px 0px; color: #000000; text-transform:uppercase; font-style:italic;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span { color: #FF0099; }
    #tabs a:hover { background-position:0% -45px; color: #FF0099; }
    #tabs a:hover span { background-position:100% -45px; color: #FF0099; }
    #tabs #current a { background-position:0% -45px; }
    #tabs #current a span { background-position:100% -45px;}

    #leftcol{ width:205px; float:left; position:relative; padding:10px 0px 20px 25px;}
    #leftcol h1, #leftcol h2, #leftcol h3, #leftcol h4, #leftcol h5, #leftcol h6 {font-family:arial; color:#000000; font-size:15px; margin:0px; padding:0px 0px 3px 0px;}

    #leftcol ul {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;list-style: none; width:180px; clear:both;}
    #leftcol ul li{margin: 0px 0px 0px 0px; display: block; font-family: arial; font-size: 14px; text-decoration:none; font-weight:bold;}
    #leftcol ul li a{ width: 149px; display: block; background:url(img/menu_li.gif) top left no-repeat; padding: 6px 5px 3px 26px; text-decoration:none; color:#000000; vertical-align: bottom;}
    #leftcol ul li a:hover{ background-repeat: no-repeat; background-position: -300px 0px; background-image:url(img/menu_li.gif); text-decoration:none; color:#FF0099; }
    #leftcol ul li.active a:hover {color:#6b6f70;}
    #leftcol ul li ul{margin: 0px 0px 0px 10px; display: block; font-family: arial; text-decoration:none; font-weight:bold;}
    #leftcol ul li ul li{margin: 0px 0px 0px 0px; display: block; font-family: arial; font-size: 14px; text-decoration:none; font-weight:bold;}
    #leftcol ul li ul li a{ width: 140px; display: block; background:url(img/menu_li_sml.gif) top left no-repeat; font-size: 12px;padding: 6px 5px 3px 25px; text-decoration:none; color:#000000; vertical-align: bottom;}
    #leftcol ul li ul li a:hover{ background-repeat: no-repeat; background-position: -300px 0px; background-image:url(img/menu_li_sml.gif); text-decoration:none; color:#FF0099; }
    #leftcol ul li ul li ul{margin: 0px 0px 0px 10px; display: block; font-family: arial; text-decoration:none; font-weight:bold;}
    #leftcol ul li ul li ul li a{ width: 130px; display: block; background:url(img/menu_li_sml.gif) top left no-repeat; font-size: 11px; padding: 6px 5px 3px 25px; text-decoration:none; color:#000000; vertical-align: bottom;}
    #leftcol ul li ul li ul li a:hover{ background-repeat: no-repeat; background-position: -300px 0px; background-image:url(img/menu_li_sml.gif); text-decoration:none; color:#FF0099; }

    #leftcol a{ font-family: arial; text-decoration:none; color:#FF0099;}
    #leftcol a:hover{ font-family: arial; text-decoration:none; color:#000000;}

    .menuheader{width:205px; height:7px; background:url(img/menu_header.gif) top left no-repeat; display:block; overflow:hidden;}
    .menucontent{width:180px; background:url(img/menu_bg.gif) top left repeat-y; overflow:hidden; margin: 0px 0px 0px 0px; padding: 0px 10px 3px 15px;}

    .menucontent h5{font-family:arial; color:#000000; font-size:15px; margin:0px; padding:0px 0px 3px 0px;}
    .menucontent ul{padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;list-style: none; width:180px; clear:both;}
    .menucontent ul li{margin: 0px 0px 0px 0px; display: block; font-family: arial; font-size: 14px; text-decoration:none; font-weight:bold;}
    .menucontent ul li a{ width: 149px; display: block; background:url(img/menu_li.gif) top left no-repeat; padding: 6px 5px 3px 26px; text-decoration:none; color:#FF0099; vertical-align: bottom;}
    .menucontent ul li a:hover{ background-repeat: no-repeat; background-position: -300px 0px; background-image:url(img/menu_li.gif); text-decoration:none; color:#000000; }

    #recentcomments {list-style: none; clear:left; }
    ul#recentcomments {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;list-style: none; width:180px; clear:both;}
    ul#recentcomments li{margin: 0px 0px 0px 0px; display: block; font-family: arial; vertical-align: bottom;padding: 6px 5px 3px 26px; font-size: 14px; text-decoration:none; font-weight:bold;width: 149px;display: block; background:url(img/menu_li.gif) top left no-repeat; }
    ul#recentcomments li a{ text-decoration:none; color:#FF0099; background:url(img/search_trans.gif);}
    ul#recentcomments li a:hover{ background-repeat: no-repeat; background:url(img/search_trans.gif); text-decoration:none; color:#000000; }

    .menunav{width:180px; height:1px; display:block; overflow:hidden;}
    .menunav span{display:none; }

    .menufooter{width:205px; height:60px; background:url(img/menu_footer.gif) top left no-repeat; display:block; overflow:hidden;}

    #linkcat-2 h2{font-family:arial; color:#FF0099; font-size:15px; margin:0px; padding:0px 0px 3px 0px;}

    #info {font-family: arial; font-size: 11px; text-decoration:none; width:205px; text-align:center; font-weight:bold; color:#FF0099; padding: 15px 0px 0px 0px;}
    #info a{ color: #FF0099;}
    #info a:hover{ color: #000000;text-decoration:none;}

    table#calendar_wrap {width:180px; overflow:hidden;}

    #wp-calendar{font-family: arial; font-size: 14px; text-decoration:none; font-weight:bold; color:#000000; width:180px;}
    #wp-calendar a{font-family: arial; font-size: 14px; text-decoration:none; font-weight:bold; color:#FF0099;}
    #wp-calendar a:hover{font-family: arial; font-size: 14px; text-decoration:none; font-weight:bold; color:#000000;}

    #maincol{ float: right; display:inline; position: relative; width:671px; padding: 10px 15px 20px 24px;}

    .contentheader{width:671px; height:10px; background:url(img/content_header.gif) top left no-repeat; display:block; overflow:hidden;}
    .content{width:671px; background:url(img/content_bg.gif) top left repeat-y; overflow:hidden; margin: 0px 0px 20px 0px;}
    .contentfooter{width:671px; height:10px; background:url(img/content_footer.gif) top left no-repeat; display:block; overflow:hidden;}

    .postcontent{width:621px; overflow:hidden; padding: 10px 25px 15px 25px; font-family:verdana; font-size:12px; color:#000000; line-height:1.5em;}

    .postcontent h1{font-family:arial; font-weight:normal; color:#FF0099; font-size:20px; margin:0px 0px 5px 0px; padding:0px 0px 3px 0px; background:url(img/h1.gif) top left no-repeat;}
    .postcontent h2{font-family:arial; font-weight:normal; color:#FF0099; font-size:19px; margin:0px; padding:0px 0px 3px 0px;background:url(img/h1.gif) top left no-repeat;}
    .postcontent h3{font-family:arial; font-weight:normal; color:#FF0099; font-size:18px; margin:0px; padding:0px 0px 3px 0px;background:url(img/h1.gif) top left no-repeat;}
    .postcontent h4{font-family:arial; font-weight:normal; color:#FF0099; font-size:17px; margin:0px; padding:0px 0px 3px 0px;background:url(img/h1.gif) top left no-repeat;}
    .postcontent h5{font-family:arial; font-weight:normal; color:#FF0099; font-size:16px; margin:0px; padding:0px 0px 3px 0px;background:url(img/h1.gif) top left no-repeat;}
    .postcontent h6{font-family:arial; font-weight:normal; color:#FF0099; font-size:15px; margin:0px; padding:0px 0px 3px 0px;background:url(img/h1.gif) top left no-repeat;}
    .postcontent h1 a{font-family:arial; font-weight:normal; color:#FF0099; font-size:20px; text-decoration:none; margin:0px 0px 5px 0px; padding:0px 0px 3px 0px; }
    .postcontent h2 a{font-family:arial; font-weight:normal; color:#FF0099; font-size:19px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h3 a{font-family:arial; font-weight:normal; color:#FF0099; font-size:18px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h4 a{font-family:arial; font-weight:normal; color:#FF0099; font-size:17px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h5 a{font-family:arial; font-weight:normal; color:#FF0099; font-size:16px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h6 a{font-family:arial; font-weight:normal; color:#FF0099; font-size:15px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h1 a:hover{font-family:arial; font-weight:normal; color:#000000; font-size:20px; text-decoration:none; margin:0px 0px 5px 0px; padding:0px 0px 3px 0px; }
    .postcontent h2 a:hover{font-family:arial; font-weight:normal; color:#000000; font-size:19px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h3 a:hover{font-family:arial; font-weight:normal; color:#000000; font-size:18px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h4 a:hover{font-family:arial; font-weight:normal; color:#000000; font-size:17px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h5 a:hover{font-family:arial; font-weight:normal; color:#000000; font-size:16px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}
    .postcontent h6 a:hover{font-family:arial; font-weight:normal; color:#000000; font-size:15px; text-decoration:none; margin:0px; padding:0px 0px 3px 0px;}

    .postcontent p{ color:#000000; font-size: 12px; line-height:1.7em;}
    .postcontent p a{ color:#FF0099; background:url(img/underline.gif) top left;text-decoration:none;}
    .postcontent p a:hover{ color:#000000; text-decoration:none; background:url(img/underline.gif) top left; background-position: 0px -50px ;}
    .postcontent ul{ color:#000000; font-size: 12px; line-height:1.7em; margin: 10px 0px 10px 10px; padding: 0px; }
    .postcontent ul li{ color:#000000; font-size: 12px; line-height:1.7em; background:url(img/li.gif) top left no-repeat; list-style: none; padding: 0px 0px 5px 25px;}
    .postcontent ol{ color:#000000; font-size: 12px; line-height:1.7em;margin: 10px 0px 10px 0px; padding: 0px 0px 0px 20px;}
    .postcontent ol li{ color:#000000; font-size: 12px; line-height:1.7em; background:url(img/li.gif) top left no-repeat; padding: 0px 0px 5px 25px;}

    blockquote { margin:20px; padding:8px 8px 8px 15px;}
    blockquote p {background-color:inherit; color:#505050; font-size:0.9em; line-height:1.3em;}
    label {background-color:inherit; color:#606060; font-size:0.9em; font-weight:bold;}
    table#wp-calendar {margin:0 0 20px; width:140px;}
    code {font-size:1.2em; display:block; padding:5px 5px 5px 8px; margin:5px 0 15px 0;}

    #author,#email,#url,#comment {border:1px solid #cccccc; font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px;}
    #commentsection {margin:25px 0 0;}
    #commentsection p {margin:0 0 6px;}

    img.centered {display:block; margin-left:auto; margin-right:auto;}
    img.alignright {padding:4px; margin:0 0 2px 7px; display:inline;}
    img.alignleft {padding:4px; margin:0 7px 2px 0; display:inline;}
    .aligncenter { display: block; margin-left: auto; margin-right: auto;}
    .alignright {float:right;}
    .alignleft {float:left;}

    .divider{height: 25px; width:604px; background: url(img/divider.jpg) top center no-repeat; margin: 10px auto 20px auto;}
    .left {border:1px solid #cccccc; float:left; margin:10px 15px 10px 0;}
    .right {border:1px solid #cccccc; float:right; margin:10px 0 5px 10px;}
    .center {border:1px solid #aaaaaa; margin:5px auto 12px; text-align:center;}
    .textright {text-align:right;}
    .small {font-size:0.8em;}
    .bold {font-weight:bold;}
    .hide {display:none;}
    .post {margin:0px;}
    .postinfo { color:#606060; font-size:0.9em; font-weight:bold; line-height:1.5em; margin:0px; padding:8px 0px 8px 0px;}
    .comment { color:#606060; margin:0 0 10px; padding:8px 5px 0 8px;}
    .comment p {font-size:0.9em; line-height:1.3em; margin:0 0 6px; padding-bottom:5px;}
    .gravatarside {float:right; width:48px; height:48px; margin:0 5px 5px 5px;}
    .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
    .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;}

    #footer{ height:48px; width: 1000px; background:url(img/footer.jpg) top center no-repeat; clear:both; margin-left:auto; margin-right:auto;font-family:arial; font-weight:bold; color:#FF0099; font-size:14px; padding: 7px 0px 0px 0px;}
    #footer a{ font-family:arial; font-weight:bold; color:#FF0099; font-size:14px;}
    #footer a:hover{ font-family:arial; font-weight:bold; color:#000000; font-size:14px; text-decoration:none;}

    .clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; }

    .clearfix{display: inline-block;}

    /* Hides from IE-mac \*/
    * html .clearfix{height: 1%;}
    .clearfix{display: block;}
    /* End hide from IE-mac */

    /*printer styles*/
    @media print{
    /*hide the left column when printing*/
    #leftcol{display:none;}
    #twocols, #maincol{width:100%; float:none;}
    }

    here is my functions.php:

    <?php

    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘Left Sidebar’,
    ‘before_widget’ => ‘<div class=”menuheader”></div><div class=”menucontent”>’, // Removes

    • ‘after_widget’ => ‘</div><div class=”menufooter”></div>’, // Removes

      • ‘before_title’ => ‘<h5>’,
      ‘after_title’ => ‘</h5>’,
      ));

      // WP-techdesigns01 Page Navigation
      function widget_techdesigns01_pagenav() {
      ?>
      <div class=”menuheader”></div><div class=”menucontent”>

      }
      if ( function_exists(‘register_sidebar_widget’) )
      register_sidebar_widget(__(‘Pages’), ‘widget_techdesigns01_pagenav’);

      // WP-techdesigns01 Search
      function widget_techdesigns01_search() {
      ?>
      <?php
      }
      if ( function_exists(‘register_sidebar_widget’) )
      register_sidebar_widget(__(‘Search’), ‘widget_techdesigns01_search’);

      // WP-techdesigns01 Links
      function widget_techdesigns01_links() {
      ?>

      <?php
      }
      if ( function_exists(‘register_sidebar_widget’) )
      register_sidebar_widget(__(‘Links’), ‘widget_techdesigns01_links’);

      // List Subpages – Code from a plugin by Rob Miller (https://robm.me.uk/). Thanks Rob!
      function list_subpages_techdesigns01($return = 0) {
      global $wpdb, $post;
      $current_page = $post->ID;
      while($current_page) {
      $page_query = $wpdb->get_row(“SELECT ID, post_title, post_parent FROM $wpdb->posts WHERE ID = ‘$current_page'”);
      $current_page = $page_query->post_parent; }
      $parent_id = $page_query->ID;
      $parent_title = $page_query->post_title;
      if($wpdb->get_results(“SELECT * FROM $wpdb->posts WHERE post_parent = ‘$parent_id’ AND post_status = ‘publish'”)) {
      echo'<div class=”menuheader”></div><div class=”menucontent”><h5 class=”menunav”><span>Navigation</span></h5>

      ‘;
      $html = wp_list_pages(“child_of=$parent_id&depth=$depth&echo=”.(!$return).”&title_li=0&sort_column=menu_order”);
      echo’

    </div><div class=”menufooter”></div>’; }
    if($return) {
    return $html;
    } else {
    echo $html; } }
    ?>

Viewing 2 replies - 1 through 2 (of 2 total)

  • WordPress gives you .current_page_item for this purpose. : )

    Replace this:

    #tabs #current a { background-position:0% -45px; }
#tabs #current a span { background-position:100% -45px;}

    With this:

    #tabs .current_page_item a { background-position:0% -45px; }
#tabs .current_page_item a span { background-position:100% -45px;}

    Thread Starter agatha83

    (@agatha83)

    thanks for that.
    but now when i click on a subnavigation point the active link in the main navigation disappears and also there are still no active links in the subnavigation ?? i read i have to put .current_page_parent into my css but i tried and still didn’t find out where?
    can anyone please help me?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘help with active links needed’ is closed to new replies.