WordPress.com

1. twopointohmy
   Member
   Mar 3, 2011, 7:46 PM

   Hello,

   I just got the CSS upgrade and have been doing pretty well so far with the help of the posts here and some googling. There are still a couple of things that are completely stumping me though. I would like to:
   - have a custom bullet point in text widget lists
   - change the color that comes up when you hover on a drop-down menu item
   - move the comments thing at the bottom of the post all the way to the right
   - reduce the amount of white space above the menu at the very top of the page
   - have a little circle between each menu item to match the theme

   If any one could help that would be amazing! I think I have fully exhausted my google skills at this point... Thanks so much!

   The blog is: http://baffledbooks.wordpress.com and I'm using bueno with a lot of tweaks. :)

   The blog I need help with is baffledbooks.wordpress.com.

2. thesacredpath
   Staff
   Mar 4, 2011, 12:50 AM

   These take care of the spacing above the nav and moving the comments stuff to the right. Do

   #header {
   padding: 0;
   }
   
   .post-meta li .head {
   text-align:right;
   }
   
   .post-meta li {
   float: right;
   text-align: right;
   }

3. thesacredpath
   Staff
   Mar 4, 2011, 12:54 AM

   On the bullet points and circle between menu items, you have to first create those images. They can then be added either as background elements or as custom bullets using list-style, but you need to create those and upload them to the media library and then give use the URLs so we have something to work with.

   Your blog is all wacky right now but it looks like you have solved the hover color for the menu items, correct?

4. twopointohmy
   Member
   Mar 4, 2011, 1:31 AM

   It's wacky? It looks fine to me, what's out of place?

   I already uploaded an image and everything ( http://baffledbooks.files.wordpress.com/2011/03/bullet.png ) already to use as a custom bullet but the code I tried just didn't work and seemed to have lost it now so I can't even tell you what it was, sorry!

   That code worked perfectly for the other things! Thanks! :D

   And yep, I figured that one out eventually.

5. thesacredpath
   Staff
   Mar 4, 2011, 3:30 AM

   For the bullets for the nav, I had to make several changes and adjustments. I added the image as a background element rather than a list image and I had to add some padding and margins here and there to get things to align nicely. I also decreased your menu font size from 16 to 14 since with the bullet image, it forced the nav into two lines which looked strange.

   .nav li, #header .menu li {
   background: url("http://baffledbooks.files.wordpress.com/2011/03/bullet.png") no-repeat scroll 0 0 transparent;
   margin-bottom: 10px;
   }
   
   #pagenav {
   float: left;
   }
   
   #pagenav a {
   font-size: 14px;
   margin-left: 10px;
   padding-top: 2px;
   }

   Give the above a try and see what you think. I'll work on the widgets next.

6. thesacredpath
   Staff
   Mar 4, 2011, 3:49 AM

   The following takes care of the widget with the "most recent reviews." It will not take care of other widget types such as the links widget and such. This was targeted at the h4 link font in this particular widget.

   #container .widget-bueno-featured .right h4 a {
   padding-left: 25px;
   }
   
   #container .widget-bueno-featured li a {
   background: url("http://baffledbooks.files.wordpress.com/2011/03/bullet.png") no-repeat scroll 0 0 transparent;
   }

7. twopointohmy
   Member
   Mar 4, 2011, 11:40 AM

   Excellent! Thanks! :D

   Is there any way for the bullet to either not come up before 'home' or to come up after 'our review policy'? I would prefer it not to come up before home but either would make my silly need for symmetry happy!

   And how can we put bullets in a text widget? The one that says 'upcoming reveiws' for example? It's formatted as a list in html.

   Thanks so much for the work put in! You are awesome!

Topic Closed

This topic has been closed to new replies.