WordPress.org

Forums

Please help....... (14 posts)

  1. Apoel
    Member
    Posted 4 years ago #

    Hi all,

    I am currently running WordPress 3.01 and my website's theme is FashionPress 1.0.

    My website is http://www.cyprus-now.com

    Now, I am very new to WordPress and blogging. I am still on a steep learning curve.

    I would like some advice, in simple terms on how to narrow my footer at the bottom of the website's page so that the footer is directly in line with the rest of my websites layout and falls directly within the A4 layout.

    I have been spending hours resarching the internet to find out and solve this issue, but to no avail. I am now frustrated and pulling teeth.

    Please help.....

  2. Jason
    Member
    Posted 4 years ago #

    Any width, height or position changes should be in the CSS file for the theme itself.

  3. Apoel
    Member
    Posted 4 years ago #

    I found the following within the CSS file:

    /******************
    * FOOTER *
    ******************/
    #footer {
    background: #bdd6ff;
    margin: 15px 0 0 0;
    padding: 10px;
    color: #666;
    line-height: 20px;
    list-style: none;
    }

    #footerbox {
    background: #fff;
    padding: 10px;
    }

    #footerbox ul li {
    list-style: none;
    margin: 0;
    background: #fff;
    padding: 3px 0 3px 0;
    border-bottom: 1px solid #f0f0f0;
    }

    #footerbox .box {
    width: 298px;
    margin: 0 15px 0 0;

    }
    #footerbox h3 {
    margin: 0;
    padding: 0 10px 0 0;
    background: #fff;
    color: #666;
    font-size: 15px;
    font-weight: bold;
    }

    #footerbox ul ul {
    display: none;
    }
    #footerbox img {
    padding: 5px;
    }

    /******************
    * BOTTOM *
    ******************/
    #bottom {
    background: #bdd6ff;
    margin: 15px 0 0 0;
    padding: 10px;
    color: #666;
    line-height: 15px;
    }

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

    #bottom a:hover {
    border-bottom: none;
    }

    #bottombox {
    background: #fff;
    height: 15px;
    padding: 10px;
    }

    I actually did change the width (highlighted above) to 150px, but this did not do anything to the footer box width!!!

    Any suggestions on what to do?

  4. robrat
    Member
    Posted 4 years ago #

    Firstly you need to add something like this to your CSS:

    #footer {
    	background: #bdd6ff;
    	margin: 15px 0 0 0;
    	padding: 10px;
    	color: #666;
    	line-height: 20px;
    	list-style: none;
    	width: 500px;
    }

    So you need to specify the width of the whole footer.

  5. DigitalSquid
    Member
    Posted 4 years ago #

    Just move the whole footer div inside the wrapper div and then in your CSS set the #footer to 630px width.

  6. Apoel
    Member
    Posted 4 years ago #

    After what line do I add the above?

    Or doesn't it matter?

  7. robrat
    Member
    Posted 4 years ago #

    Also noticed you have another div at the bottom of the page called #bottom . Add a width to this as well

    #bottom {
    	background: #bdd6ff;
    	margin: 15px 0 0 0;
    	padding: 10px;
    	color: #666;
    	line-height: 15px;
    width: 630px;
    }
  8. robrat
    Member
    Posted 4 years ago #

    Apoel - find the line of code in your CSS called #footer, and simply add this exactly after the {
    width:630px;
    and the same for the #bottom section

  9. Apoel
    Member
    Posted 4 years ago #

    I have just specified the width to 500px, and the footer has narrowed.

    http://cyprus-now.com/

    Now I need to move it to the right!

    Is the while footer inside the wrapper div in footer.php?

  10. Apoel
    Member
    Posted 4 years ago #

    I have made the following changes as instructed!

    /******************
    * FOOTER *
    ******************/
    #footer {
    background: #bdd6ff;
    margin: 15px 0 0 0;
    padding: 10px;
    color: #666;
    line-height: 20px;
    list-style: none;
    width: 630px;
    }

    #footerbox {
    background: #fff;
    padding: 10px;
    }

    #footerbox ul li {
    list-style: none;
    margin: 0;
    background: #fff;
    padding: 3px 0 3px 0;
    border-bottom: 1px solid #f0f0f0;
    }

    #footerbox .box {
    width: 298px;
    margin: 0 15px 0 0;
    }
    #footerbox h3 {
    margin: 0;
    padding: 0 10px 0 0;
    background: #fff;
    color: #666;
    font-size: 15px;
    font-weight: bold;
    }

    #footerbox ul ul {
    display: none;
    }
    #footerbox img {
    padding: 5px;
    }

    /******************
    * BOTTOM *
    ******************/
    #bottom {
    background: #bdd6ff;
    margin: 15px 0 0 0;
    padding: 10px;
    color: #666;
    line-height: 15px;
    width: 630px;
    }

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

    #bottom a:hover {
    border-bottom: none;
    }

    #bottombox {
    background: #fff;
    height: 15px;
    padding: 10px;
    }

    The footer and bottom box now need to be centred!

    http://www.cyprus-now.com

  11. robrat
    Member
    Posted 4 years ago #

    YOu want to ad a margin in as well, something like:
    margin: 10px 0px 10px 190px;
    Where the last value is the margin to the left.

  12. Apoel
    Member
    Posted 4 years ago #

    I have now made the following changes:

    #footer {
    background: #bdd6ff;
    margin: 15px 0 0 0;
    padding: 10px;
    color: #666;
    line-height: 20px;
    list-style: none;
    width: 915px;
    margin: 10px 0px 10px 190px;

    And this:

    #bottom {
    background: #bdd6ff;
    margin: 15px 0 0 0;
    padding: 10px;
    color: #666;
    line-height: 15px;
    width: 915px;
    margin: 10px 0px 10px 190px;

    I changed the 630 value to 915, because I need to get the footer and bottom box in line with the post bos and the right widget columns.

    Do you now what figure I should put for the width and the margin to get perfect alignment? Or is it a case of trial and error?

    http://www.cyprus-now.com

  13. robrat
    Member
    Posted 4 years ago #

    Actually I'm talking nonsense mate. Post this into your footer thing:

    #footer {
    background: #bdd6ff;
    padding: 10px;
    color: #666;
    line-height: 20px;
    list-style: none;
    width: 915px;
    margin-left: auto;
    margin-right: auto;

    This will dead center it. Then with your bottom box:

    #bottom {
    background: #bdd6ff;
    margin: 15px 0 0 0;
    padding: 10px;
    color: #666;
    line-height: 15px;
    width: 915px;
    margin-left: auto;
    margin-right: auto;

    Note the auto instead of a number. This means it'll always be dead center no matter how big the window.

  14. Apoel
    Member
    Posted 4 years ago #

    I made the margin left and margin right to auto!

    Problem solved!

    Thank you very very very much robrat! :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.