Freshy Adjust Content and Widget Colums, fix footer

  • Unknown's avatar
    edouardbreine · Member ·

    Hi,

    I bought the right to modify the CSS and messed with the length of the columns and the footer… :(
    Can anyone have a look at it and tell me what I should change?
    My Blog: http://www.edouardbreine.com
    Thanks in advance,
    Edouard

    #page {
    text-align:center;
    background:url(‘http://edouardbreine.files.wordpress.com/2009/09/twiti1.jpg’) repeat;
    }

    body {
    font-size:90%;
    font-family:”Lucida Grande”, “Lucida Sans Unicode”, Arial, sans-serif;
    background:#000000 url(‘http://edouardbreine.files.wordpress.com/2009/09/twiti.jpg’) repeat fixed 0 0;
    color:#232323;
    margin:0;
    padding:0;
    }

    ::-moz-selection {
    background:#FF3C00;
    color:white;
    }

    ::selection {
    background:#FF3C00;
    color:white;
    }

    a {
    color:#515151;
    text-decoration:none;
    }

    #content a {
    border-bottom:1px dotted silver;
    }

    #content a:hover {
    border-bottom:1px dotted #FF3C00;
    }

    #title_image {
    text-align:left;
    display:block;
    height:95px;
    background:url(‘http://edouardbreine.files.wordpress.com/2009/08/cropped-le_q_blog_banner.jpg’) center center transparent repeat-y;
    margin:0;
    }

    #title {
    background:url(‘http://edouardbreine.files.wordpress.com/2009/09/header.gif’) top #7F7F7F no-repeat;
    height:76px;
    clear:both;
    text-align:left;
    margin:0;
    padding:25px 25px 0;
    }

    html>body #title {
    height:51px;
    }

    #title h1 {
    font-weight:normal;
    line-height:1em;
    font-size:2.1em;
    font-family:helvetica;
    margin:0;
    padding:0;
    }

    #title h1 a {
    color:white;
    display:block;
    }

    .description {
    color:#c9e45a;
    }

    #content h2 {
    color:#515151;
    border:none;
    clear:both;
    margin:0;
    padding:0;
    }

    #content h2 a {
    text-decoration:none;
    border:none;
    }

    #content h2 a:hover {
    border-bottom:1px dotted silver;
    }

    hr {
    display:none;
    clear:both;
    }

    h3,h4 {
    color:#515151;
    clear:both;
    margin:2em 0 0;
    padding:0;
    }

    input,textarea,select {
    border:1px solid #515151;
    font-size:.9em;
    line-height:1em;
    font-family:”Lucida Grande”, “Lucida Sans Unicode”, Arial, sans-serif;
    padding:4px;
    }

    input,label {
    height:auto;
    width:auto;
    padding:4px;
    }

    label {
    font-size:.9em;
    }

    #searchform input#s {
    width:130px!important;
    border:1px solid #515151;
    font-size:.9em;
    line-height:1em;
    text-transform:none;
    color:black;
    font-family:”Lucida Grande”, “Lucida Sans Unicode”, Arial, sans-serif;
    background:white;
    padding:4px;
    }

    #sidebar input.btn,#searchform input {
    width:65px;
    }

    #searchform {
    margin-top:10px!important;
    }

    #searchform br {
    display:none;
    }

    input.btn,#searchform input,input#submit {
    background:#111111;
    color:#FFFFFF;
    border:1px outset #000000;
    font-family:”Lucida Grande”, “Lucida Sans Unicode”, Arial, sans-serif;
    text-transform:uppercase;
    padding:4px;
    }

    input[class=btn],input[type=submit]
    input[id=submit] {
    padding:3px;
    }

    textarea {
    overflow:auto;
    display:block;
    width:100%;
    }

    ul,ol {
    list-style-type:none;
    list-style-position:outside;
    margin:.2em 0;
    padding:0;
    }

    #content ul li,#content ol li {
    background:transparent url(‘http://edouardbreine.files.wordpress.com/2009/09/bullet.png’) 11px .4em no-repeat;
    padding-left:27px;
    margin-bottom:.6em;
    }

    ul ul li,ol ol li {
    background:transparent url(‘http://edouardbreine.files.wordpress.com/2009/09/bullet.gif’) 0 .5em no-repeat;
    padding-left:8px;
    }

    #content ol {
    list-style-position:inside;
    }

    #content ol li {
    background:transparent;
    padding-left:0;
    margin-left:27px;
    list-style:decimal;
    }

    #content ol ol,#content ul ul {
    margin-top:.6em;
    }

    a img {
    border:0 none;
    }

    form {
    margin:0;
    padding:0;
    }

    pre,code {
    display:block;
    font:1em ‘Courier New’, Courier, Fixed, monospace;
    font-size:100%;
    color:#000;
    background:#fff url(‘http://edouardbreine.files.wordpress.com/2009/09/preback.jpg’) no-repeat left top;
    overflow:auto;
    text-align:left;
    border:1px solid #99cc66;
    line-height:17px;
    margin:1em 0;
    padding:0 20px 0 30px;
    }

    .alt {
    background-color:#F5F5F5!important;
    }

    .icon {
    vertical-align:middle;
    border:0;
    }

    .with_icon {
    padding:2px 0;
    }

    .navigation {
    clear:both;
    display:block;
    padding:0;
    }

    .alignleft {
    display:block;
    float:left;
    }

    .alignright {
    display:block;
    float:right;
    }

    #sidebar {
    font-size:.9em;
    }

    #sidebar ul,#sidebar ol {
    padding:0;
    }

    #sidebar form,#sidebar p {
    margin:0 0 1em;
    padding:0;
    }

    #sidebar h2 {
    background:#232323;
    font-size:1em;
    font-weight:normal;
    text-transform:uppercase;
    color:white;
    margin:10px 0;
    padding:8px;
    }

    html>body .ellipsis li {
    clear:both;
    }

    html>body .ellipsis li:after {
    content:”…”;
    display:inline;
    }

    html>body .ellipsis li span {
    white-space:nowrap;
    overflow:hidden;
    max-width:180px;
    width:auto!important;
    display:inline;
    float:left;
    }

    ol.ellipsis li span {
    white-space:nowrap;
    overflow:hidden;
    width:190px;
    display:block;
    }

    #sidebar a {
    text-decoration:none;
    }

    #sidebar a:hover,#sidebar .current_page_item li a:hover,#sidebar .current-cat li a:hover {
    color:#FF3C00;
    }

    #sidebar .current_page_item a,#sidebar .current-cat a {
    font-weight:bold;
    color:#FF3C00;
    }

    #sidebar .current_page_item li a,#sidebar .current-cat li a {
    font-weight:normal;
    color:#515151;
    }

    #sidebar li img {
    vertical-align:middle;
    border:0;
    }

    #sidebar input.btn {
    margin-left:4px;
    }

    .menu {
    list-style-type:none;
    background:url(‘http://edouardbreine.files.wordpress.com/2009/09/menu_bg.gif’) 50% 0 #515151 repeat-x;
    height:80px;
    width:780px;
    border-top:1px solid #FFFFFF;
    overflow:hidden;
    margin:0;
    padding:0;
    }

    .menu li {
    background:none;
    display:table-row;
    vertical-align:middle;
    float:left;
    height:80px;
    padding:0;
    }

    .menu li.last_menu,.menu li.right_menu {
    float:right;
    }

    .menu li a {
    font-size:.8em;
    text-transform:uppercase;
    line-height:normal;
    display:table-cell;
    vertical-align:middle;
    height:80px;
    background:url(‘http://edouardbreine.files.wordpress.com/2009/09/menu_triple.gif’) top left transparent repeat-x;
    color:white;
    text-decoration:none;
    padding:0 10px;
    }

    .menu li a:hover,.menu li a:active {
    background-position:center left;
    color:#FFFFFF;
    }

    .menu li.current_page_item a {
    background-position:bottom left!important;
    color:#1F3700!important;
    }

    .menu li a.first_menu {
    padding-left:35px;
    background-repeat:no-repeat;
    background-image:url(‘http://edouardbreine.files.wordpress.com/2009/09/menu_start_triple.gif’);
    }

    .menu li a.last_menu,.menu li a.last_menu_off {
    padding-right:35px;
    background-repeat:no-repeat;
    background-image:url(‘http://edouardbreine.files.wordpress.com/2009/09/menu_end_triple.gif’);
    background-position:top right;
    }

    .menu li a.last_menu:hover,.menu li a.last_menu:active {
    background-position:center right;
    }

    .menu li.current_page_item a.last_menu {
    background-position:bottom right!important;
    }

    .menu li.lang_menu {
    float:right;
    }

    .menu li.lang_menu a span {
    width:19px;
    height:80px;
    overflow:hidden;
    text-indent:100px;
    display:block;
    }

    .menu li.lang_menu a {
    display:block;
    width:19px;
    cursor:pointer;
    }

    .menu li#fr_FR a span {
    background:url(‘images/lang_fr.gif’) left transparent no-repeat;
    }

    .menu li#en_US a span {
    background:url(‘images/lang_en.gif’) left transparent no-repeat;
    }

    .menu li#fr_FR.current_page_item a span,.menu li#fr_FR a:active span {
    background-image:url(‘images/lang_fr.gif’);
    }

    .menu li#en_US.current_page_item a span,.menu li#en_US a:active span {
    background-image:url(‘images/lang_en.gif’);
    }

    #footer .footer_content {
    width:760px!important;
    display:block;
    margin-right:auto;
    margin-left:auto!important;
    margin-top:0;
    border-top:1px dotted silver;
    text-align:center;
    padding:10px;
    }

    .post {
    font-size:.9em;
    border-top:20px solid #F5F5F5;
    margin-bottom:10px;
    padding:1em 0;
    }

    .post h2,.post h3,.post h4,.post h5 {
    font-size:2em;
    }

    .post hr {
    display:block;
    }

    .highlight_box {
    font-size:.9em;
    border:2px solid #F5F5F5;
    margin-bottom:20px;
    padding:1em;
    }

    .highlight_box .post {
    font-size:1em;
    border:0 none;
    margin-bottom:0;
    padding:0;
    }

    .highlight_box .post p {
    margin:0;
    }

    .highlight_box .post .date {
    display:none;
    }

    .highlight_box h2,.highlight_box h3,.highlight_box h4,.highlight_box h5 {
    font-size:2em;
    border-bottom:10px solid #F5F5F5;
    }

    .highlight_box .post h2,.highlight_box .post h3,.highlight_box .post h4,.highlight_box .post h5 {
    font-size:1.5em;
    }

    .readmore {
    display:block;
    text-align:left;
    font-weight:bold;
    clear:both;
    color:#FF3C00;
    margin:1em 0;
    }

    .date {
    color:silver;
    float:right;
    line-height:2.3em;
    padding-left:5px;
    border-left:1px solid silver;
    font-size:.8em;
    text-align:center;
    position:relative;
    right:0;
    margin:1.5em 0 5px 10px;
    }

    .date_day {
    display:block;
    font-size:3em;
    text-align:right;
    }

    .date_month {
    display:block;
    font-size:3em;
    text-align:right;
    font-weight:bold;
    }

    .date_year {
    display:block;
    font-size:1.4em;
    line-height:.9em;
    }

    .postmetadata {
    color:#515151;
    list-style-type:none;
    margin:0;
    }

    #content .postmetadata a {
    color:#FF3C00;
    border:none;
    text-decoration:none;
    }

    #content .postmetadata a:hover {
    border-bottom:1px dotted silver;
    }

    .clear {
    clear:both;
    }

    .comment-author .avatar {
    float:left;
    border:1px solid silver;
    vertical-align:middle;
    margin:0 5px 0 0;
    }

    #content .commentlist dt {
    position:absolute;
    }

    html > body #content .commentlist dt {
    position:static;
    }

    #content .commentlist dd {
    font-size:1em;
    line-height:1.5em;
    color:silver;
    margin:0 0 1em;
    padding:10px 3em 10px 10px;
    }

    html > body #content .commentlist dd {
    padding:10px;
    }

    #content .commentlist div.comment {
    color:#000000;
    overflow:hidden;
    }

    #content .commentlist .date {
    margin-right:5px;
    font-size:.5em;
    }

    #content .commentlist .comment_text {
    margin-top:5px;
    display:block;
    }

    html > body #content .commentlist dd.author_comment {
    background:url(‘images/transp-80.png’) #c9e45a!important;
    width:auto;
    }

    #content .commentlist dd.author_comment {
    background-color:#c9e45a!important;
    filter:alpha(opacity=20);
    width:510px;
    }

    #content .commentlist .author_comment .author,#content .commentlist .author_comment .author a {
    color:#c9e45a!important;
    border-color:#c9e45a!important;
    }

    #content .commentlist dd.author_comment * {
    filter:alpha(opacity=100);
    position:relative;
    }

    #content .commentlist dt.author_comment .date {
    color:#a5ba52!important;
    border-color:#a5ba52!important;
    }

    #content textarea#comment {
    font-size:1em;
    line-height:1.3em;
    }

    #commentform small {
    color:#515151;
    }

    .entry {
    text-align:justify;
    margin:0;
    }

    .entry p {
    margin:1em 0;
    }

    img.centered,img.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    img.alignright {
    display:inline;
    margin:0 0 2px 7px;
    padding:4px;
    }

    img.alignleft {
    display:inline;
    margin:0 7px 2px 0;
    padding:4px;
    }

    .aligncenter,div.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    .wp-caption {
    border:1px solid #ddd;
    text-align:center;
    background-color:#f3f3f3;
    padding-top:4px;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin:10px;
    }

    .wp-caption img {
    border:0 none;
    margin:0;
    padding:0;
    }

    .wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
    }

    #content .commentlist dd.depth-2 {
    margin-left:2em;
    }

    #content .commentlist dd.depth-3 {
    margin-left:4em;
    }

    #content .commentlist dd.depth-4 {
    margin-left:6em;
    }

    #content .commentlist dd.depth-5 {
    margin-left:8em;
    }

    #content .commentlist dd.depth-6 {
    margin-left:10em;
    }

    #content .commentlist dd.depth-7 {
    margin-left:12em;
    }

    #content .commentlist dd.depth-8 {
    margin-left:14em;
    }

    #content .commentlist dd.depth-9 {
    margin-left:16em;
    }

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

  • Unknown's avatar
    edouardbreine · Member ·

    Ok worked on it and I found something nteresting,
    when I add:

    #page {
    text-align:center;
    background:url(‘http://edouardbreine.files.wordpress.com/2009/09/twiti1.jpg’) repeat;
    }

    , the background is displayed but the size of columns and footer are messed up,

    when I don’t place this code everything looks good except the background. Seems like the background is displayed but behind the grey color because when you scroll down to the bottom of the page you can see part of the background…

    any explanation?

    thanks in advance

  • Unknown's avatar
    francoisdevos · Member ·

    Hi Edouard,

    Here is an easy workaround for your problem :

    #footer .footer_content {
  padding: 0 10px; /* CHANGE! : instead of 10px */
}
#frame {
  background: #7F7F7F url(images/page_bg.gif) repeat-y scroll center center; /* ADD! */
  width: 800px; /* CHANGE! : instead of 780px */
}
.menu {
  margin: 0 0 0 10px; /* CHANGE! : instead of 0 */
}
#content {
  margin-left: 10px; /* ADD! */
}
#sidebar {
  margin-right: 10px; /* ADD! */
}

    Regards,

    —
    François

  • Unknown's avatar
    edouardbreine · Member ·

    Thank you so much!!!!!
    :)

  • Unknown's avatar
    edouardbreine · Member ·

    presque parfait!
    sais tu comment rajouter une bande blanche de 10px a cote de l image du menu (celle des panneaux et du resto)
    ;)

  • Unknown's avatar
    edouardbreine · Member ·

    je suis repasse en frame:780px avec background:white parce que si je passe en 800px, je ne sais pas pourquoi mais la marge de 10px ne se fait pas au niveau de l image des panneaux et resto
    j ai essaye de changer l attribut du background ce cette image de transparent a white et c est sans resultats… au cas ou t as l occase de jeter un oeuil.. soit le bienvenu! ;) lol

  • Unknown's avatar
    thesacredpath · Member ·

    http://fr.forums.wordpress.com/ ?

  • The topic ‘Freshy Adjust Content and Widget Colums, fix footer’ is closed to new replies.