Custom Menu styling

  • sarah2230

    (@sarah2230)


    15 years, 1 month ago

    Hi,

    I am using a child theme of the Twenty Ten wordpress theme which I have modified. I am having a few issues trying to figure out where in the code I need to be looking in order to style the custom menu and links at the bottom.

    The site is located here, what I want to do is to style the links on the left so I can remove the bullet points and increase the text.

    I also want to be able to increase the text links at the bottom….

    Also, is it possible to have links on the two logos at the top so that when users click the images they are taken to a different site?

    Any help will be much appreciated, thanks in advance.

    Regards Sarah.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter sarah2230

    (@sarah2230)

    15 years, 1 month ago

    I have managed to style the menu using this code:

    .menu ul {
    list-style:none;
    }
    .menu li {
    list-style:none;
    }
    .menu-item a {
    color:#333333;
    font-size:14px;
    font-family:Arial, Helvetica, “Nimbus Sans L”, sans-serif;
    background: #e7e7e7;
    padding: 3px 3px 3px 3px;
    line-height: 20px;
    }
    .menu-item a:hover {
    color:#FF9900;
    text-decoration: none;
    font-size:14px;
    font-family:Arial, Helvetica, “Nimbus Sans L”, sans-serif;
    background: #e7e7e7;
    padding: 3px 3px 3px 3px;
    line-height: 20px;
    }

    Do’s anyone know how to add image links to the header?

    Thanks Sarah.

    bb_45

    (@bb_45)

    15 years, 1 month ago

    Hi,
    Hope this helps a bit. Not sure if this is what you are looking for.

    I haven’t finished locating the “title” and re-scripting it, but it shows what exist now.

    You can go to “quiltronpress.com” and with FF view the source and then click the style link to the CSS

    Below: The “header-right” info contains a CSS link, which, although I know nothing of WordPage yet, I imagine the link would bring up an image if it contains an image link.

    #title-right{
    position:absolute;
    top:155px;
    right:10px;
    font-family: Arial, Helvetica, Geneva, Swiss, “SunSans Regular”; “sans serif”; color: # #F85403;
    font-weight:900;
    font-size: .7em;
    text-align: center;
    text-decoration: blink;
    vertical-align:text-middle;
    padding-left: 0px;
    z-index:5;
    }

    #header-right {
    position:absolute;
    top:-15px;
    right:0px;
    width:125px;
    height:175px;
    padding-left: 0px;
    text-decoration:none;
    background-image:url(http://quiltron.net/products/books/dance/dance_cover_115.jpg);
    background-repeat:no-repeat;
    background-position: 10px 20px; /* first value = horizontal, second = vertical */
    z-index:4;
    }

    [please use the pastebin as per forum rules – and mark code here using backticks or the code button]

    Thread Starter sarah2230

    (@sarah2230)

    15 years, 1 month ago

    Thanks bb_45, this is exactly what I need 🙂

    bb_45

    (@bb_45)

    15 years, 1 month ago

    Sarah2230,

    You’re welcome. Had no idea – just supos’d –

    By making the suggestion, I just learned something about WordPress and how I can use my knowledge of CSS to modify my own WP site; which I will be doing ere’ long.

    BTW – if you look at the CSS style page – you’ll see another CSS style element for “product” and another for “site-logo”(?) I use those as containers to hold the “product image and the “title” (actually “text” – just a holdover name from a previous use)

    The extra div is really not needed in most cases – as I find that “p” elements work fie on their own most of the time.

    Dorian Jones

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

The topic ‘Custom Menu styling’ is closed to new replies.