Customising the footer with responsive theme

  • Resolved thegoatboy

    (@thegoatboy)


    10 years, 8 months ago

    Hello,

    Please don’t be too harsh on me I am very new to this!!

    I am trying to customise a footer on my website

    I want a background image behind the menu at the top, and in the footer.

    I have managed to get the background image on my footer and header with:

    .menu {
background: url("****wp-content/uploads/2013/08/topNav.jpg");
}

.menu .current_page_item a,
.menu .current-menu-item a {
  background: url("****/wp-content/uploads/2013/08/topNav.jpg");
  color: #fff2ba;
  font-weight: bold;
  height: 19px;
}

    I want the background image to be a specific height as well –

    probably here:

    .menu a {
    cursor: pointer;
    display: block;
    font-size: 12px;
    height: 19px;

    something in there

    however, if I try to adjust the footer height, the text at the bottom is not centered in the background image.

    does someone know how I can change it???

Viewing 11 replies - 1 through 11 (of 11 total)
  • WPyogi

    (@wpyogi)

    10 years, 8 months ago

    We need to see your site for helping with CSS questions like this.

    Thread Starter thegoatboy

    (@thegoatboy)

    10 years, 8 months ago

    I’ve taken it out of maintenance mode.

    http://www.penarthkds.com

    If you look under the bottom image, you will see that there is some text in no man’s land

    I’d like that to be centred in background image.

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    Have you modified any theme files? How/where did you add that text?

    Thread Starter thegoatboy

    (@thegoatboy)

    10 years, 8 months ago

    I have created a child theme and the snippets of code about are contained in there.

    They are modified in the custom CSS section of wordpress for that child theme.

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    Okay, I see your Custom CSS now – the height you have here is causing that problem:

    #footer {
  font-size: 11px;
  text-align: center;
  height: 19px;
  padding: 5px;
  clear: both;
  width: 100%;
}

    So try removing that line of code.

    Thread Starter thegoatboy

    (@thegoatboy)

    10 years, 8 months ago

    Thanks for taking the time to look.

    If I remove the height from the footer, the background image is huge.

    Is that right?

    i am trying to get it to look like the top background (as you will see in the site).

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    Okay, so try adding this CSS:

    #footer-wrapper .grid.col-940 {
    display: none;
}

    And then add the margin line to this one (which is in your CSS already):

    .copyright {
    color: #FFF2BA;
    font-weight: 700;
    margin: 5px 0;
    text-align: center;
}

    Thread Starter thegoatboy

    (@thegoatboy)

    10 years, 8 months ago

    Ahhh, I’ve had a play with some of the things you mentioned above and things are looking good!

    🙂

    I’m not 100% there, but getting close!

    Thanks for your help.

    It is very much appreciated!

    Thread Starter thegoatboy

    (@thegoatboy)

    10 years, 8 months ago

    I’m getting closer, but I still can’t align my text so that it is in the centre of the footer.

    Any suggestions??

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    It looks like there is some strange stuff going on, but try adding this:

    #footer-wrapper .col-300 {
    display: none;
}

    Thread Starter thegoatboy

    (@thegoatboy)

    10 years, 8 months ago

    Fantastic!

    Thank you very much!

    I was pretty close at times!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Customising the footer with responsive theme’ is closed to new replies.