WordPress.org

Ready to get started?Download WordPress

Forums

Question to Footer and Meta? (26 posts)

  1. annliu
    Member
    Posted 8 years ago #

    1. How can I do to adjust the footer to let it display in the middle of the page? (www.marketingbyann.com)

    2. Is that possible to hide Meta section and do not let it display on the sidebar? If it can do, please advise how to do it?

    Thank you.

  2. Mark (podz)
    Support Maven
    Posted 8 years ago #

    Your site looks broken in Firefox I'm afraid.

    #footer {
    background-color: #eee;
    text-align:center; <----------
    }

    adding the indicated line will sort what you need.

    In sidebar.php you have a section that starts
    <li><h2>Meta</h2>
    <ul>

    and ends
    <?php wp_meta(); ?>
    </ul>
    </li>

    Delete all that - those tags included. Don't worry about getting them back if you need them - they are default tags :)

  3. annliu
    Member
    Posted 8 years ago #

    Hi, I follow what you said, the Meta gone now --> Thank You.

    But the footer still the same, it doesn't change?

  4. annliu
    Member
    Posted 8 years ago #

    Aha, now the footer comes to the middle, but how to adjust it to let it position properly? I mean show above the line?

  5. annliu
    Member
    Posted 8 years ago #

    I tried, but I still couldn't solve this Footer problem? And I got another new problem - my site work well in IE, but comes to Firefox, the header shift out to left?? Please help --> http://www.marketingbyann.com

  6. spencerp
    Member
    Posted 8 years ago #

    I think podz just meant to add that addition line of code to the css, not the <---- part, just do this once:

    #footer {
    background-color: #eee;
    text-align:center;
    }

    Which he meant was, just add this to the main footer CSS part of the css: text-align:center;

    cause it depends on the theme you're using...which I noticed the one you're using and mine and I'm currently using the same one as you and it's fine...just do like above:
    #footer {
    background-color: #eee;
    text-align:center;
    }

    spencerp

  7. annliu
    Member
    Posted 8 years ago #

    Its still the same, the footer is in the middle but the position not inside the template?

  8. annliu
    Member
    Posted 8 years ago #

    I use default theme 1.5.3

  9. spencerp
    Member
    Posted 8 years ago #

    Have a look at mine once:
    http://www.vindictivebastard.net/test101/

    Get the CSS for that and see... =) I think I lost the margin some how on the bottom but I was tinkering before though to..cause I added some javascript codes here and there for a test... i dunno

    spencerp

    But normally, I thought that theme did have the text centered to start with lol...maybe I'm just too drunkish or something haha

  10. annliu
    Member
    Posted 8 years ago #

    hey, your site footer is right, but mine is not :-(
    your header image also in the middle when I put your site in the firefox, but my is shift to the left - broked!?? Please help .. thank you

  11. spencerp
    Member
    Posted 8 years ago #

    http://vindictivebastard.net/test101/wp-content/themes/default/style.css

    Just look at the CSS file of mine and find the header section of it and use that maybe, or whatever..if you didn't really modfiy anything of the CSS, just get a new copy of that Theme and re-edit the part you did change to what you wanted...

    spencerp

  12. annliu
    Member
    Posted 8 years ago #

    I can't open the your link? :-(

  13. spencerp
    Member
    Posted 8 years ago #

    Why not lol? I'll post in here then.. But I'm not sure if I modified some of it or not, so becareful, best bet is to just download a good copy and use that one and then just modify what was mentioned above... ok.. =) That's if you didn't really make any special changes to it...

    /*
    Theme Name: WordPress Default
    Theme URI: http://wordpress.org/
    Description: The default WordPress theme based on the famous Kubrick.
    Version: 1.5
    Author: Michael Heilemann
    Author URI: http://binarybonsai.com/

    Kubrick v1.5
    http://binarybonsai.com/kubrick/

    This theme was designed and built by Michael Heilemann,
    whose blog you will find at http://binarybonsai.com/

    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php

    *** REGARDING IMAGES ***
    All CSS that involves the use of images, can be found in the 'index.php' file.
    This is to ease installation inside subdirectories of a server.

    Have fun, and don't be afraid to contact me if you have questions.
    */

    /* Begin Typography & Colors */
    body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color: #d5d6d7;
    color: #333;
    text-align: center;
    }

    #page {
    background-color: white;
    border: 1px solid #959596;
    text-align: left;
    }

    #header {
    background-color: #73a0c5;
    }

    #content {
    font-size: 1.2em
    }

    .widecolumn .entry p {
    font-size: 1.05em;
    }

    .narrowcolumn .entry, .widecolumn .entry {
    line-height: 1.4em;
    }

    .widecolumn {
    line-height: 1.6em;
    }

    .narrowcolumn .postmetadata {
    text-align: center;
    }

    .alt {
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    }

    #footer {
    background-color: #eee;
    text-align:center;
    }

    small {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.9em;
    line-height: 1.5em;
    }

    h1, h2, h3 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;
    }

    h1 {
    font-size: 4em;
    text-align: center;
    }

    .description {
    font-size: 1.2em;
    text-align: center;
    }

    h2 {
    font-size: 1.6em;
    }

    h2.pagetitle {
    font-size: 1.6em;
    }

    #sidebar h2 {
    font-family: 'Lucida Grande', Verdana, Sans-Serif;
    font-size: 1.2em;
    }

    h3 {
    font-size: 1.3em;
    }

    h1, h1 a, h1 a:hover, h1 a:visited, .description {
    text-decoration: none;
    color: white;
    }

    h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    color: #333;
    }

    h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
    text-decoration: none;
    }

    .entry p a:visited {
    color: #b85b5a;
    }

    .commentlist li, #commentform input, #commentform textarea {
    font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

    .commentlist li {
    font-weight: bold;
    }

    .commentlist cite, .commentlist cite a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
    }

    .commentlist p {
    font-weight: normal;
    line-height: 1.5em;
    text-transform: none;
    }

    #commentform p {
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

    .commentmetadata {
    font-weight: normal;
    }

    #sidebar {
    font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

    small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    color: #777;
    }

    code {
    font: 1.1em 'Courier New', Courier, Fixed;
    }

    acronym, abbr, span.caps
    {
    font-size: 0.9em;
    letter-spacing: .07em;
    }

    a, h2 a:hover, h3 a:hover {
    color: #06c;
    text-decoration: none;
    }

    a:hover {
    color: #147;
    text-decoration: underline;
    }

    #wp-calendar #prev a {
    font-size: 9pt;
    }

    #wp-calendar a {
    text-decoration: none;
    }

    #wp-calendar caption {
    font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align: center;
    }

    #wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }
    /* End Typography & Colors */

    /* Begin Structure */
    body {
    margin: 0px 0px 0px 0px;
    padding: 0;
    }

    #page {
    background-color: white;
    margin: 0px 0px 0px 0px;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;
    }

    #header {
    padding: 0;
    margin: 0px 0px 0px 0px;
    height: 200px;
    width: 100%;
    background-color: #73a0c5;
    }

    #headerimg {
    margin: 0px 0px 0px 0px;
    height: 200px;
    width: 100%;
    }

    .narrowcolumn {
    float: left;
    padding: 0 0 20px 45px;
    margin: 0px 0 0;
    width: 450px;
    }

    .widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 150px;
    width: 450px;
    }

    .post {
    margin: 0 0 40px;
    text-align: justify;
    }

    .widecolumn .post {
    margin: 0;
    }

    .narrowcolumn .postmetadata {
    padding-top: 5px;
    }

    .widecolumn .postmetadata {
    margin: 30px 0;
    }

    #footer {

    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 760px;
    clear: both;
    }

    #footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
    /* End Structure */

    /* Begin Headers */
    h1 {
    padding-top: 70px;
    margin: 0;
    }

    .description {
    text-align: center;
    }

    h2 {
    margin: 30px 0 0;
    }

    h2.pagetitle {
    margin-top: 30px;
    text-align: center;
    }

    #sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }

    h3 {
    padding: 0;
    margin: 30px 0 0;
    }

    h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
    /* End Headers */

    /* Begin Images */
    p img {
    padding: 0;
    max-width: 100%;
    }

    /* Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) */

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

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

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

    .alignright {
    float: right;
    }

    .alignleft {
    float: left
    }
    /* End Images */

    /* Begin Lists

    Special stylized non-IE bullets
    Do not work in Internet Explorer, which merely default to normal bullets. */

    html>body .entry ul {
    margin-left: 0px;
    padding: 0 0 0 30px;
    list-style: none;
    padding-left: 10px;
    text-indent: -10px;
    }

    html>body .entry li {
    margin: 7px 0 8px 10px;
    }

    .entry ul li:before, #sidebar ul ul li:before {
    content: "0BB 020";
    }

    .entry ol {
    padding: 0 0 0 35px;
    margin: 0;
    }

    .entry ol li {
    margin: 0;
    padding: 0;
    }

    .postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
    }

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

    #sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    }

    #sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px;
    }

    #sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 10px;
    }

    #sidebar ul ul ul, #sidebar ul ol {
    margin: 0 0 0 10px;
    }

    ol li, #sidebar ul ol li {
    list-style: decimal outside;
    }

    #sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
    }
    /* End Entry Lists */

    /* Begin Form Elements */
    #searchform {
    margin: 10px auto;
    padding: 5px 3px;
    text-align: center;
    }

    #sidebar #searchform #s {
    width: 115px;
    padding: 2px;
    }

    #sidebar #searchsubmit {
    padding: 1px;
    }

    .entry form { /* This is mainly for password protected posts, makes them look better. */
    text-align:center;
    }

    select {
    width: 130px;
    }

    #commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
    }

    #commentform textarea {
    width: 100%;
    padding: 2px;
    }

    #commentform #submit {
    margin: 0;
    float: right;
    }
    /* End Form Elements */

    /* Begin Comments*/
    .alt {
    margin: 0;
    padding: 10px;
    }

    .commentlist {
    padding: 0;
    text-align: justify;
    }

    .commentlist li {
    margin: 15px 0 3px;
    padding: 5px 10px 3px;
    list-style: none;
    }

    .commentlist p {
    margin: 10px 5px 10px 0;
    }

    #commentform p {
    margin: 5px 0;
    }

    .nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
    }

    .commentmetadata {
    margin: 0;
    display: block;
    }
    /* End Comments */

    /* Begin Sidebar */
    #sidebar
    {
    padding: 20px 0 10px 0;
    margin-left: 545px;
    width: 190px;
    }

    #sidebar form {
    margin: 0;
    }
    /* End Sidebar */

    /* Begin Calendar */
    #wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
    }

    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }

    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }

    #wp-calendar a {
    display: block;
    }

    #wp-calendar caption {
    text-align: center;
    width: 100%;
    }

    #wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }

    #wp-calendar td.pad:hover { /* Doesn't work in IE */
    background-color: #fff; }
    /* End Calendar */

    /* Begin Various Tags & Classes */
    acronym, abbr, span.caps {
    cursor: help;
    }

    acronym, abbr {
    border-bottom: 1px dashed #999;
    }

    blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }

    blockquote cite {
    margin: 5px 0 0;
    display: block;
    }

    .center {
    text-align: center;
    }

    hr {
    display: none;
    }

    a img {
    border: none;
    }

    .navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    }
    /* End Various Tags & Classes*/

    /* "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you.
    It won't be a stylish marriage, I can't afford a carriage.
    But you'll look sweet upon the seat of a bicycle built for two." */

  14. annliu
    Member
    Posted 8 years ago #

    Spencerp -- Thank You!
    The footer problem solved. But the Image Header Problem still there?? Can you please check my site in the Firefox, then you will know what the problem I have, okay?

  15. spencerp
    Member
    Posted 8 years ago #

    Well, maybe try lowering the Font sizes of your page title and description of the blog once... I'm not really sure if you're using basically the original CSS file to begin with lol...
    Also, try changing this once in the header.php file I believe it is:
    #header { margin: 0 !important; margin: 0px 0px 0px 0px; padding: 1px; height: 198px; width: 760px; }
    #headerimg { margin: 0px 0px 0px 0px; height: 192px; width: 760px; }

    spencerp

    P.S. Maybe Moshu might be able to see something I'm not seeing...

  16. annliu
    Member
    Posted 8 years ago #

    Hi - Spencerp -- Thank You A Lot. You are so expert, It is working now :-)

    By the way, do you know which Image Plugin is the best choice for default 1.5. I tried few, but all error. I mean the one don't emphasis much in the technical part.

  17. spencerp
    Member
    Posted 8 years ago #

    "Hi - Spencerp -- Thank You A Lot. You are so expert, It is working now :-)"

    LOL! Me expert, not really lmao, just noticed ya changed the codes in the header.php file and gave you the original right coding hehe... For the other question, I really haven't added any image "gallery plugin" to my WordPress Blog yet... But, someone else might show ya the way...or I could even browse and find one...might be a little while though since Im enjoying my brew... =)

    spencerp

  18. annliu
    Member
    Posted 8 years ago #

    Okay, I am going to ask someone else then, really thank you. Ann

  19. spencerp
    Member
    Posted 8 years ago #

    No problem.. =)

    spencerp

  20. spencerp
    Member
    Posted 8 years ago #

    But your footer image isn't showing right either...I feel bad about that lol. I'm going to check about that now...hold on. Maybe you just messed with the coding in the header.php file again or the footer.php file or something...

    spencerp

  21. spencerp
    Member
    Posted 8 years ago #

    Annliu, I'm still seeing this in your css:
    #footer {
    background-color: #eee;
    text-align:center; <----------
    }

    Can you take that arrow out of there lol? This: <-------

    Just have this:
    #footer {
    background-color: #eee;
    text-align:center;
    }

    Also, further down your CSS file Find this:
    .widecolumn .postmetadata {
    margin: 30px 0;
    }

    Underneath that, you'll see this coding of your's:
    #footer {
    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 760px;
    clear: both;
    }
    #footer p {styles}
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }

    Try replacing it with mine below here once:

    #footer {
    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 760px;
    clear: both;
    }

    #footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }

    Some where along the line you were trying to adjust some CSS codes and messed up some others I guess....but just try that once ok...

    spencerp

  22. annliu
    Member
    Posted 8 years ago #

    Hi Spencerp, where did you see <------? I took this arrow out few hours ago. I didn't get why you said my footer still not look okay> -- I check my site in both IE and Firefox, it works fine and the footer is position in the middle and inside the template?

  23. spencerp
    Member
    Posted 8 years ago #

    Well, when I checked the site before, I pulled up the css file and it was still in there hehe. but it's looking better now. But for some reason the header and footer image is off yet or either the background itself is off. Maybe it's just some other css codes that is off, because it's not looking flush. I'm using Firefox 1.5 now...

    spencerp

    You're almost there though..almost.. =)

  24. annliu
    Member
    Posted 8 years ago #

    I just checked it again, all the code are same as yours ...

  25. spencerp
    Member
    Posted 8 years ago #

    Ok, well for some reason it looks fine in IE, except for the fact the footer margin is lesser then the top. But in Firefox, it's all kinda screwy. Can you just copy and paste a brand new copy of the CSS file (Of that theme) into the Theme Editer in the Control Panel of your WordPress and then just add that part for the footer to make your text centered?
    #footer {
    background-color: #eee;
    text-align:center;
    }

    spencerp

    Or if you want to, get me on MSN Messenger or Yahoo Messenger:
    psgif180@hotmail.com or twistedsociety666@yahoo.com

  26. annliu
    Member
    Posted 8 years ago #

    okay, I did what you said, how is it look now?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags