Title: Sidebar Link Layout
Last modified: August 20, 2016

---

# Sidebar Link Layout

 *  [DavidGMII](https://wordpress.org/support/users/davidgmii/)
 * (@davidgmii)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/sidebar-link-layout/)
 * Hello,
 * Theme: Twenty Ten
 * I’ve edited the sidebar, changing the color, rounded corners etc. However, I 
   have quite a few pages on my main navigation under the header, so I decided to
   add some of them to the sidebar. However, I would like to keep the menubar’s 
   layout when doing this. If I simply add links to the sidebar, it doesn’t look
   very professional (plain html). I want to have it so that when you scroll over
   the page’s link on the sidebar, it reacts by turning the background color to 
   a lighter color etc (like the main navigation). Hope I’m making myself clear,
   if not let me know. Thanks!

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

 *  [olavxxx](https://wordpress.org/support/users/olavxxx/)
 * (@olavxxx)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/sidebar-link-layout/#post-2420626)
 * Hi,
    You need to change the a:hover for that class or id then. What is the URL
   of your website? You can right click on links in chrome or firefox or opera and
   choose inspect item, to view the id/class.
 * If you are styling a class in css, it’s:
    .classname a:hover { }
 * Or for the ID:
    #idname a:hover { }
 * You might already have definitions for it though, so you should see “matched 
   class” and check if there is any there..
 *  Thread Starter [DavidGMII](https://wordpress.org/support/users/davidgmii/)
 * (@davidgmii)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/sidebar-link-layout/#post-2420732)
 * Hello,
 * Thanks so much for your reply! I’m on my testsite right now (where I do edit 
   everything). [http://film-classics.com/test](http://film-classics.com/test)
 * As you can see, I’ve edited the main navigation’s layout, hover etc. The thing
   is, on my main site I’m going to be adding numerous additional pages, which will
   clutter the main navigation. So, I want to add some of the pages to the sidebar.
   Which I’ve done, as you can see under “Pages” on my test site, but they are simply
   text links. I want them to look and feel like the main navigation, without spoiling
   the appearance of the, say “Recent Comments” which I need to leave alone (stay
   text/links).
 * I’m not sure what file to edit, or where to edit. Sidebar.php? Stylesheet?
 * Many many thanks!
    David.
 *  [olavxxx](https://wordpress.org/support/users/olavxxx/)
 * (@olavxxx)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/sidebar-link-layout/#post-2420760)
 * Styles are in the .css files, you can add new or change existing or override 
   with !important.
 * If you add more .css files, the best thing to do is to use this code:
    [http://codex.wordpress.org/Function_Reference/wp_enqueue_style](http://codex.wordpress.org/Function_Reference/wp_enqueue_style)
 * If you register and enque the style, you can later add a hook on the print_styles(
   add_action). The default action-priority is 10 if I remember correctly, so if
   you later on decide that you wish to override your new .css file on some pages,
   you can have a hook with let’s say 20 as priority. (so you know the first one
   is loaded, before you deregister it and re-register a new one).
 * It’s important that you then have a unique naming conventions for those styles
   you wish to control/deregister/register.
 * You can solve the “sidebar menu” in several ways. I think I would define a new
   menu (sidebar-menu), so you can easily manage the pages/posts as one and add 
   class as wanted, as well as you get the ability to style the current-item.
 * such definitions, hooks, etc. should go in the functions.php . You can actually
   look at the main menu you have there and try to replicate it your self.. it’s
   not very difficult 🙂
 *  Thread Starter [DavidGMII](https://wordpress.org/support/users/davidgmii/)
 * (@davidgmii)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/sidebar-link-layout/#post-2420843)
 * Hmm, this all seems a bit over my head, but I’ll give it a shot 😉
 * When I enque this sidebar-menu, is it a specific file that I’m editing, or a 
   file that I create? I guess I’m going at this thing rather blindly, what would
   you suggest as the first step?
 * Thanks!
    David.
 *  Thread Starter [DavidGMII](https://wordpress.org/support/users/davidgmii/)
 * (@davidgmii)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/sidebar-link-layout/#post-2420906)
 * Well, I’ve taking a slightly different route to accomplish this. I followed this
   handy tutorial [Here](http://www.jeremyyoung.ws/77/how-to-add-style-to-your-text-widgets-in-wordpress/).
 * If you take a look at the site, it’s looking quite a bit better now. However,
   I still don’t have the rollover image, just the rollover text. I don’t know if
   my css is lacking here, or what, but maybe if you took a look at it you could
   determine the problem. Here’s the following code that I used in my stylesheet.
 *     ```
       #text-4
       {
       background: url(img.png);
       height:21px;
       background-repeat:no-repeat;
       background-position:center;
       }
       #text-4 .textwidget {
       text-align: center;
               color: #000;
               display: block;
       	padding: 2px;
       	text-decoration: none;
               font-weight: bold;
               a visited: color(#000000);
       opacity:0.7;
       filter:alpha(opacity=70); /* For IE8 and earlier */
       }
       #text-4 .textwidget a:link,
       #text-4 .textwidget a:visited {
       	text-decoration: none;
               color: #000000;
       }
       #text-4 .textwidget a:hover {color: #fff; text-decoration:none;
       }
       ```
   
 * Everytime I’ve added the hover properties to the background image, it either 
   does not affect the image at all, or adds the hover image on the text, rather
   than the image. Suggestions?
 * Additionally, do you know of any way to close the gap between the two widgets(
   gallery/sample page)? I need about half the distance that’s between them at the
   moment.
 * Many thanks!
    David. David.

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

The topic ‘Sidebar Link Layout’ is closed to new replies.

 * 5 replies
 * 2 participants
 * Last reply from: [DavidGMII](https://wordpress.org/support/users/davidgmii/)
 * Last activity: [14 years, 6 months ago](https://wordpress.org/support/topic/sidebar-link-layout/#post-2420906)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics