• 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)
  • 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

    (@davidgmii)

    Hello,

    Thanks so much for your reply! I’m on my testsite right now (where I do edit everything). 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.

    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

    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

    (@davidgmii)

    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

    (@davidgmii)

    Well, I’ve taking a slightly different route to accomplish this. I followed this handy tutorial Here.

    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.