Side bar size

  • Unknown's avatar

    Hello,
    i just took upgrade in Custom Design with the CSS but dont really know how to make it work.
    I would like to change my FONT size to smaller on the side bar. and I would like to make the side bar smaller also.
    The HOME PAGE TOP AREA title above my image of the book are too big. HOW CAN I CHANGE THAT? WHAT are the specific code i can put.
    ALSO how can i have the menu with FACEBOOK icon and twitter in the extended footer. Thanks:)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    I’m happy to help you. I’ll give you a series of code snippets to solve two of your questions. All you have to do is go to your customize page, click the “css” link and then copy and paste each piece of code into the pop-up box. Let me know if you have any trouble!

    This should reduce the size of your sidebar:

    #secondary{
        width: 25%
    }

    This should make the text (or most of the text) in your sidebar smaller. If there is something remaining you want smaller let me know what it is specifically and I’ll send you additional code.

    #secondary p,#secondary a{
        font-size: .8em
    }

    I’m not sure what you mean by

    The HOME PAGE TOP AREA title above my image of the book are too big

    . Could you use this tool http://snag.gy/ to take a screen shot and then circle the part of the site you want to change?

    As for adding a Facebook link to your footer, you do that through appearance>menu on your dashboard. For more detailed info scroll to the bottom of this theme support document: http://theme.wordpress.com/themes/gridiculous-pro/

  • Unknown's avatar

    Wow thanks.
    If you look back at my site, you see under MENU there is two books pictures with title TOME 1 et TOME 2. I would like them to not have the black contour around or just be in a box. and the title being center to the image.
    Also if you look at the menu MES VOYAGES, before each country there is a icon of a person… how can I remove that?
    Thanks a lot, it help with the other code really happy!

  • Unknown's avatar

    Another question:
    Any possibility to have my main Header changing every 3 secondes to a new one?
    At the footer of the blog, there is ICONS i guess to put Facebook twitter etc. CAN i put them there. You said to look at the link you sent me but and can’t find in once in Menu.
    Also, each post if I dont show them entirely and if i am looking to just have a “read more” at the end of each post dont show pictures. I would like just to have a 3 lines descriptions of the post with a large pictures and then people click to read.
    lots of questions…
    do you think i should change theme? can a smile style like this site can be reach : http://garypeppergirl.com/category/iceland-2

  • Unknown's avatar

    This removes the black background:

    .home-widget img{
        background:none !important;
    }

    This should center the titles:

    .home-widget-title{
        text-align: center;
    }

    Your other questions are very theme specific and I can’t give you a step-by-step walk through because I don’t have access to your premium theme. You can however get help directly from your theme’s designer here: http://premium-themes.forums.wordpress.com/forum/gridiculous-pro

    The icons of the people are appearing on your menu because I think you are inadvertently adding your regular menu items to your social menu theme which is creating unexpected results. Someone with access to your theme should be able to help you get that worked out.

  • Unknown's avatar

    Thanks again a lot’ it works.
    Would you be nice enough to send me the code, to put the space between the menu and the image (BOOK IMAGE) less big, or really under the menu.
    and the black contour i could keep it but having it as a fine line?
    WONDERFUL!

  • Unknown's avatar

    Is my logo on the top of my blog can be also centered?

  • Unknown's avatar

    This will center (or pretty close to center) your site-logo:

    #site-logo{
        margin-left: 45% !important;
    }

    See how you like this for the books:

    .home-widget img{
        background: none !important;
        border: 1px solid black !important;
    }
    .home-widget{
        border: 1px solid black;
        margin: -35px 0 0 30px;
        width: 20% !important;
    }
  • Unknown's avatar

    Yes that can work:) Any chance I can remove the line around each item on the side bar? No line around “translate” etc…

  • Unknown's avatar

    try this:

    .widget{
        border:none !important;
    }
  • Unknown's avatar

    Thats better:) Thanks! Can I have less space between each widget also. please:) hihi

  • Unknown's avatar

    here you go:

    .widget{
        margin:0px !important;
    }
  • Hi there,

    Just a note that I see your sidebar looks a bit squashed on tablet-sized screens. You can fix this by adding a media query, such as:

    @media screen and (max-width: 800px) {
    	#secondary {
    	width: 30%;
    }}

    You can read more about media queries in CSS here:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  • Unknown's avatar

    Thanks @eurello. I didn’t think to check for that.

  • Unknown's avatar

    Thanks a lot to you all. really helpful!

  • Unknown's avatar

    Hello again. Do you think I can put Icon of Facebook and Twitter on the Header, vertically under another and not in line like right now? Any code?
    thanks again!
    http://www.chroniqueshotessedelair.com

  • Unknown's avatar

    Also, I reduce the size of the sidebar as you told me. How can then put bigger the size of post area with bigger pictures, main picture appear on the post. Thanks soooooo much!

  • Unknown's avatar

    I’m not sure how to help you with the Facebook and Twitter icons, but perhaps Elizabeth (the Happiness Engineer who was helping earlier) will have a solution for you.

    This will expand the size of the post area.

    #primary{
        width:75%;
    }

    If that messes things up on tablets and phones you can update your media query to put things back to normal on small screens:

    @media screen and (max-width: 800px) {
    	#primary {
    	width: 66.6%;
    }}

    This last bit should only target images in posts that you have centered. That way the large images will fill the post area, but the smaller images aren’t impacted. I’m stretching a little on that one, so if it doesn’t work, or if it has unintended consequences let me know and we’ll try something else.

    article img.aligncenter{
        width: 100% !important;
    }
  • Unknown's avatar

    hello:) i just put this
    #primary{
    width:75%;
    but doesn’t seem to make a big difference. but anyway not a big deal. the other CSS were changing apparence on Iphone so i dont put it.
    Seems there is a lot still to do with my blog apparence. I dont like the contour around the picture everytime i put one. any other code I should add? After that i stop writing you promess:) hihi

  • Unknown's avatar

    This will remove the black frame from your photos:

    img{
        background:none !important;
    }
  • The topic ‘Side bar size’ is closed to new replies.