Support » Fixing WordPress » Please help…….

  • 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…..

Viewing 13 replies - 1 through 13 (of 13 total)
  • Any width, height or position changes should be in the CSS file for the theme itself.

    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?

    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.

    DigitalSquid

    (@twelvefootsnowman)

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

    After what line do I add the above?

    Or doesn’t it matter?

    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;
    }

    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

    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?

    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

    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.

    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

    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.

    I made the margin left and margin right to auto!

    Problem solved!

    Thank you very very very much robrat! 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Please help…….’ is closed to new replies.