[amyfanton]

Hi again-two quick questions I’m hoping you can help me with

1. I would like to add an additional image to the home page. I would like it to be only one image and run the entire length of the featured content/featured slider. I’m fine with it being in the footer if necessary or in some space below the featured content. Can you please advise the best way to do this?

2. Can you please help me trim the footer so that it isn’t so tall? It looks quite big and I would like it smaller.

[amyfanton]

Hi There,

I have been playing around with it a bit and I’ve figured out how to add an image to the “Footer one” area using a widget and then using text to add an image. Still having some issues though with spacing. You can see what I mean here: http://www.fantonphotography.com/
Also have a few more things I would like to fix so will include those below as well.

1. Above where all the badges are there is a space I would like removed (just below the text under the featured content), I would also like the margin on both sides of the banner to be removed and I don’t want the image cut off as it is being cut off now.

2.The text color in the footer isn’t visible and I can’t find where in the menu to change it so that it can be seen. I’ve looked in the “colors” menu but none of them seem to correspond with this text (or i can’t figure out which it is!)

3.I would like to trim the footer as I mentioned in the original post so that there isn’t so much space above and below the text

4. I would like to remove the dark box that shows on “home” when the main page is opened. I’m ok with the dark boxes showing up when someone is scrolling over but I don’t like the dark box there as it is.

5. Instead of this “banner” image that I have added into the footer one area, ideally i would like to update it so that each one of the “badges” is actually an image with a live link, however I have 7 of these badges and I would like them to display horizontally as it is in the “banner” i have created. Is this possible? In the meantime I am using this static image with a compilation of all of the badge images.

[amyfanton]

Sorry two more things!

6. Is it possible to center the text under the featured content images?
7. Is it possible to center the logo in the header?

Thank you so much for all of your help!!

[amyfanton]

and fyi for number (1) I am referring to the banner in the footer area one with the space on the left, right and above the image

[amyfanton]

Hi Sakin–really sorry to be a pain, am just trying to work all of the issues out of the site and am hoping you can get back to me soon? I have figured out many answers to the queries above. my website is http://www.fantonphotography.com and the only remaining questions I have are:

1. How can I remove the darkened box that remains on “home”? I am ok with the boxes going dark as you hover over them with your mouse, but I would like the menu bar to be all one color when someone isn’t hovering over it.

2. I can’t seem to figure out how to change the color of the text in the footer (where it has copyright, my email and phone) can you please help me with this

3. I need to remove the “title” area above the banner in footer area on (above where all of the badges that say featured on are located)

4. I would like to trim the border slightly between the featured content and the featured slider is this possible

5. Do you have any advice about adding individual images (with links) so that they appear horizontally in the same footer area one (as opposed to a static jpg banner that I uploaded in its place.)

Thank you and hope to hear from you soon.

[Sakin]

@amyfanton: Wow so many question for free support forum. My head is spinning round and round 🙂

1. Footer Area one image, you can add the following css in “Appearance => Theme Options => Custom CSS” box:

#supplementary {
    padding: 20px 0;
}
#footer-sidebar {
    padding: 0;
}
#supplementary .widget-area {
    float: left;
    text-align: center;
    width: 100%;
}
#supplementary #text-2 {
    line-height: 1px;
}
#supplementary .widget-area img {
    box-shadow: none;
}

2. Footer Text and Link Color, you can change the color code in the following css and add it in Custom CSS box:

#site-generator {
    color: #999;
}
#site-generator a {
    color: #ddd;
}

3. Footer text space above and below, you can edit the padding in the following css as per your need and add it in Custom CSS box:

#site-generator .site-info {
    padding: 40px 0;
}

4. To remove dark background in menu active item, you can add the following css in Custom CSS box:

#header-menu .menu .current_page_item > a, 
#header-menu .menu .current_page_ancestor > a {
    background-color: #bfcdcc;
}

5. Yes, add 7 small images with link, just add like the following in your current text widget:
<a href="your-link1" target="_blank"><img src="image-url1" alt="image-alternative-text1" /></a><a href="your-link2" target="_blank"><img src="image-url2" alt="image-alternative-text2" /></a><a href="your-link3" target="_blank"><img src="image-url3" alt="image-alternative-text3" /></a><a href="your-link4" target="_blank"><img src="image-url4" alt="image-alternative-text4" /></a><a href="your-link5" target="_blank"><img src="image-url5" alt="image-alternative-text5" /></a><a href="your-link6" target="_blank"><img src="image-url6" alt="image-alternative-text6" /></a><a href="your-link7" target="_blank"><img src="image-url7" alt="image-alternative-text7" /></a>

Then add the following css in “Custom CSS” box:

#supplementary #text-2 a {
    display: inline-block;
    float: left;
    width: 14.28%
}

6. To center the text below featured content. Just add the following css in Custom CSS box:

#featured-post .hentry {
    text-align: center;
}

7. To center the logo, just add the following css in Custom CSS box.

#header-left, 
#site-logo {
    width: 100%;
    text-aligh: center;
}
#hgroup-wrap img  {
    display: block;
    margin: 0 auto;
}

8. To trim the space between slider and featured content, you can adjust the padding in the following css and then add in Custom CSS box:

.home #main {
    padding-top: 20px;
}

Note: In Featured Content, I see that you have added in Large image with width of 1024px. Which is very big for that area and will be heavy for site load. I suggest you to change that and upload image of maximum width 400px.

[amyfanton]

Wow you totally rock! Thank you so much!

Everything seems to have worked except for the dark box on the menu over “home” — anything else I might be able to try?

I’m going to try the adding all the image links later 🙂

And thanks so much for the tip on the image size will change that as well.

[Sakin]

@amyfanton: There are many css issue in your custom css box. So, you need to clean up.

1. Find the following css and remove it. That is not necessary

@supplementary aside and (min-width: 1190px) }
#header-menu .menu .current_page_item > a, 
#header-menu .menu .current_page_ancestor > a {
    background-color: #bfcdcc;
}

2. Find the following css:

#header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #header-menu .menu .current-menu-item > a, #header-menu .menu .current-menu-ancestor > a, #header-menu .menu .current_page_item > a, #header-menu .menu .current_page_ancestor > a { background-color: #98aba8; }
#header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #header-menu .menu .current-menu-item > a, #header-menu .menu .current-menu-ancestor > a, #header-menu .menu .current_page_item > a, #header-menu .menu .current_page_ancestor > a { color: #fff; }

Then replace with the following css:
#header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #header-menu .menu .current-menu-item > a, #header-menu .menu .current-menu-ancestor > a, #header-menu .menu .current_page_item > a, #header-menu .menu .current_page_ancestor > a { background-color: #bfcdcc; color: #fff }

3. Find the following css:

#footer-sidebar .widget-area .widget {
    margin-bottom: 0 px;
}

Then replace with the following css:

#footer-sidebar .widget-area .widget {
    margin-bottom: 0;
}

[amyfanton]

Hi Sakin,

I can’t find this code at all:
#header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #header-menu .menu .current-menu-item > a, #header-menu .menu .current-menu-ancestor > a, #header-menu .menu .current_page_item > a, #header-menu .menu .current_page_ancestor > a { background-color: #98aba8; }
#header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #header-menu .menu .current-menu-item > a, #header-menu .menu .current-menu-ancestor > a, #header-menu .menu .current_page_item > a, #header-menu .menu .current_page_ancestor > a { color: #fff; }

Is it somewhere other than the custom css box?

[Sakin]

@amyfanton: If you cannot find that in Custom CSS then you might want to check your color code in “Appearance => Theme Options => Color Options => Menu Hover & Active Background Color”.

[Author]

Posts