Need help? Check out our Support site, then


Cutline => Coraline : Replacing menu items with graphics

  1. One of my clients (fleurdepains.ch) got hit with the Cutline => Coraline blitz migration, and had no idea it was coming. The original web dev--who used custom CSS on the site--is not available to make the necessary changes. I'm a sysadmin with very, very little web development experience and NO WordPress experience.

    I would greatly appreciate help on any of the following three points:

    - Item 1
    Menu items: With Cutline, the text of a menu item was apparently
    replaced by a graphic using code like this in the custom CSS:

    #post-10 h2 {
    text-indent:-1000em;
    background:url('http://fleurdepains.files.wordpress.com/2008/10/fdp_titre_presentation.gif')
    no-repeat 0 0;
    height:36px;
    padding-bottom:0;
    }

    The above code replaced "PRÉSENTATION" with a graphic of the word
    "Présentation".

    I have the impression that "#post-10 h2" needs to be replaced with
    something that includes #access and ul, but how do I specify the post-10?

    - Item 2
    The subheader, below the banner, reads "L'essentiel au quotidien". This
    should be replaced with the graphic
    http://fleurdepains.files.wordpress.com/2008/10/lessentielauquotidien.jpg

    - Item 3
    Right-hand menu titles should also be replaced with graphics:

    "Magasins" should be replaced with
    http://fleurdepains.files.wordpress.com/2008/10/fdp_titre_magasins.gif

    "Articles récents" should be replaced with
    http://fleurdepains.files.wordpress.com/2008/10/fdp_titre_articles.gif

    Help!

    The blog I need help with is fleurdepains.ch.

  2. As you can see from the code below, you need to replace #post-10 h2 with .page-item-10 a. It is best if you just copy the first block of code multiple times for each navigation link and just change the page item number and the image URL each time.

    The other two blocks of code will fix the site sub-heading and the widget titles. They all follow the same method of indenting the text so it disappears off screen and then using a background image. If you want to change anything else this way you just need to look through the source code to find the element you want to modify.

    I hope this helps.

    #access .menu .page-item-10 a {text-indent:-999em; background:url("http://fleurdepains.files.wordpress.com/2008/10/fdp_titre_presentation.gif"); width:226px; height:36px; padding:0;}
    
    #site-description {text-indent:-999em; background:url("http://fleurdepains.files.wordpress.com/2008/10/lessentielauquotidien.jpg") no-repeat top center; height:34px;}
    
    #pages-2 h3 {text-indent:-999em; background:url("http://fleurdepains.files.wordpress.com/2008/10/fdp_titre_magasins.gif") no-repeat left center; height:23px;}
    #recent-posts-3 h3 {text-indent:-999em; background:url("http://fleurdepains.files.wordpress.com/2008/10/fdp_titre_articles.gif") no-repeat left center; height:23px;}
  3. Brilliant! Thank you so much for your help!

    Thanks also for the explanation of the code so that I understand what's going on.

    Cheers

  4. Hi,

    I'm trying to set my menu to replace text with graphics at menu item, like you did by the posts above.

    I used the code posted by hallluke, just changing the name of menu item (page-item-2) where I want the replace occur, exactly like that:

    #access .menu .page-item-2 a { text-indent:-999em; background:url("http://fleurdepains.files.wordpress.com/2008/10/fdp_titre_presentation.gif"); width:226px; height:36px; padding:0; }

    So, no changes occured. I cannot see any difference after add that code.

    I'm using the theme Vigilance, and made the code change at the Editing CSS Page, but I still don't have bought the permission to save changes do CSS. I'm just using the Preview mode, before buy it.

    Would anyone help me, please?

  5. @falandoabobrinhas
    CSS editng on wordpress.com is theme specific. You are using a different theme.

  6. In vigilance the navigation menu uses #nav instead of #access. You will also need to set display:block; on the anchor elements. You'll probably want to get rid of the top boreder that appears when the mouse is hovered over the link too as this shifts the picture down the page slightly each time.

    #nav .menu .page-item-2 a { text-indent:-999em; background:url("IMAGE_URL"); width:XXpx; height:XXpx; padding:0; display:block;}

Topic Closed

This topic has been closed to new replies.

About this Topic