reducing space between images on sidebar & a few menu questions

  • Author
    Posts
  • #943708

    I am playing around with the look of my slider area and I have added individual images with links to some of my most popular posts. I would like to reduce the spacing between each image to make it appear more like they are all one section under ‘your favorite posts’. I’m assuming I need some sort of CSS code for this but I’m unsure of what.

    I also would like to increase the size font used for my menu options.

    Thanks so much!

    The blog I need help with is oneyounglove.com.

    #944058

    Is it possible that this question has been over looked? It has been about a week since it was originally posted.

    #944059

    timethief
    Member

    I have flagged this thread so it will be moved to the CSS Forum wehere you can get help with your CSS editing.

    #944060

    To keep this from messing up the alignment on all other image widget, you will need to target the specific widgets by ID. If you change or add more widgets to the favorite posts area, you will have to add that specific selector to this rule in your CSS. I’ve not changed the bottom image widget in that section so that it maintains a proper separation with the title of the “latest posts” widget.

    #image-8, #image-9, #image-10, #image-11 {
    margin-bottom: -8px;
    }

    This leaves a tiny bit of white in between the images which I’m not sure how to get rid of, or what is causing that. See what you think.

    #944061

    Hmm, I have made the changes on my CSS but I don’t know that visually it changed anything…I’m fine with a bit of white I just want it to look like all one category. I pulled up my original page while I was previewing the changes using the above coding and they looked the same to me. I have left it with the new change so you can see if it looks any different to you?

    #944062

    Hmmm, it worked for me with Firebug, but add the “!important” attribute. That forces the declaration to override everything except for a style declaration in the HTML itself.

    #image-8, #image-9, #image-10, #image-11 {
    margin-bottom: -8px !important;
    }
    #944063

    Wonderful! Exactly what I was looking for. Thank you for your help!

    Any suggestions about increasing the font size for my menu?

    #944064

    You are welcome and that would be here in your custom CSS:

    #access a {
    font-size: 100%;
    }

    Just increase the 100% to your desired size.

    #944065

    Thank you, I had tried that before and it didn’t work but I added the !important; code that you suggested to override the spacing and it worked for the font size as well. Thank you again for your help!

    #944066

    You are welcome. In the theme you are using it appears as if one of the theme CSS files is loading after your custom CSS, so you might end up having to use the important attribute a good deal. Staff need to fix that so that the custom CSS you enter loads last and overrides everything else.

    #944067

    Thanks for the tip, I just thought I wasn’t understanding the CSS. I will likely be able to figure more out on my own now!

The topic ‘reducing space between images on sidebar & a few menu questions’ is closed to new replies.