WordPress.com

1. jkcollier
   Member
   Sep 14, 2010, 5:50 AM

   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. hallluke
   Member
   Sep 15, 2010, 9:13 AM

   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. jkcollier
   Member
   Sep 15, 2010, 4:34 PM

   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. falandoabobrinhas
   Member
   Oct 25, 2010, 1:18 AM

   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. timethief
   Member
   Oct 25, 2010, 3:55 AM

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

6. hallluke
   Member
   Oct 25, 2010, 10:52 AM

   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.