WordPress.org

Forums

How Can I Center the wp-calendar? (5 posts)

  1. blogd
    Member
    Posted 7 years ago #

    I am using WordPress 2.2.1 with widgets. I want to format the wp-calendar widget so that it appears centered within the sidebar, and not flush to the left side. I have looked a lot for any CSS that would do this, but can't find anything that works. Is it under #wp-calendar, #wp-calendar table, or something else? And what is the specific tag under that which will center it?

    Thanks!

  2. Cephus
    Member
    Posted 7 years ago #

    The calendar has it's own class wp-calendar I believe. You can set the margin:auto; But that's just were the fun starts. See, the Calendar is placed within a

  3. element, so your calendar will be centered within that element and most themes indent
  4. 's.

    Here's the CSS for the Calendar on my latest theme: Black and Tan (www.3dohio.com [sorry for the shameless plug])

    Some of the following code is redundant.
    /* Calendar */
    #wp-calendar {
    color:black;
    width:200px;
    text-align:center;
    padding:0px;
    margin:auto;
    border-collapse: collapse;
    line-height:normal;
    font:normal 12px/18px verdana, helvetica, sans-serif;
    }
    #wp-calendar caption {
    text-align:center;
    font-weight: bold;
    padding:0px;
    margin:auto;
    line-height:40px;
    background:url("img/bt-calendar.gif") no-repeat;
    height:30px;
    color:black;
    }

    #wp-calendar th, td {
    text-align:center;
    border:solid 1px #EEE;
    background:white;}
    #wp-calendar th {
    background:white;
    font-weight: bold;

    }
    #wp-calendar th[title="Saturday"] {
    background:#CDEB8B;
    }
    #wp-calendar th[title="Sunday"] {
    background:#CDEB8B;
    }
    #today {
    background:#FFA;

    }
    #wp-calendar a, #wp-calendar a:active, #wp-calendar a:link, #wp-calendar a:visited {
    line-height:normal;
    padding:0px;
    margin:0px;
    color:black;
    background:#C3D9FF;
    display:inline;
    }

    #wp-calendar a:hover {
    padding:0px;
    margin:0px;
    }
    #wp-calendar #prev a, #wp-calendar #prev a:active, #wp-calendar #prev a:link, #wp-calendar #prev a:visited,
    #wp-calendar #next a, #wp-calendar #next a:active, #wp-calendar #next a:link, #wp-calendar #next a:visited{
    background:none;
    font-weight:bold;
    }

  • blogd
    Member
    Posted 7 years ago #

    Umm... that's very nice, Claus, thank you. Unfortunately, it does not answer my question: how do you center the calendar? If there's a command for that in all of that code, I can't see it. Would you mind singling it out for me?

  • Cephus
    Member
    Posted 7 years ago #

    #wp-calendar {margin:auto;} will center your calendar within its element. If your

  • has padding, then you're screwed. You could move it this way, but it may not look correct in other browsers - you'll have to test.

    #wp-calendar { position:relative; left:-10px; }

    If you where not using widgets, you could use an inline style to remove the padding on your

  • I hope this helps.

  • Cephus
    Member
    Posted 7 years ago #

    the above response is talking about padding on your list items. I forgot to put this in a code

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags