Problem with css on footer widgets

  • MsKazza

    (@mskazza)


    11 years, 11 months ago

    Hi all,
    was hoping you could help with a problem, i’m trying to get the background of widgets to show properly in the footer of the page, so far not much looks.

    This is the css footer code i am using : 

    #footer { background: url(images/footer-topbg.png) repeat-x; }
	#footer-widgets { padding: 48px 0px 45px; background: url(images/footer-bg.png) repeat-x bottom left; }
.footer-widget { width: 280px; margin-right: 60px; background: url(images/footerwidget-bottom.png) no-repeat bottom left; float: left; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); color: #fff; padding-right: 0px;   padding-bottom: 16px; position: relative;}
  #footer-widget-top {background: url(images/footerwidget-top.png) no-repeat bottom left; height: 11px;}

    #footer-widget-content{background: url(images/footerwidget-top-gradient.png) no-repeat bottom left;  }

		.last { margin-right: 0px; }
			#footer h4.widgettitle { font-size: 12px; font-weight: bold; color:#ffffff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); text-transform: uppercase; padding-bottom: 5px; }
				.footer-widget a { color: #ffffff; }
				.footer-widget a:hover { color: #eee; text-decoration: none; }
			.footer-widget ul { margin-bottom:8px;  }
				.footer-widget ul ul { margin-bottom:0; }
					.footer-widget ul li { background:url(images/footer-bullet.png) no-repeat 0 7px; padding:0px 0 7px 12px; }
					.footer-widget ul li ul { margin:0 0 -3px; padding:5px 0 0 7px; }
	#footer-bottom { padding: 24px 0px; }
		ul.bottom-nav li { float: left; padding-right: 20px; }
			ul.bottom-nav li a { color:#ffffff; font-size:12px; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); text-decoration: none; }
				ul.bottom-nav li a:hover {text-decoration: none; color: #fffae4; }
					ul.bottom-nav li.current_page_item a { color: #fffae4 !important; font-family: Georgia, serif; font-style: italic; }
		p#copyright { font-size: 12px; font-family: Georgia, serif; font-style: italic; float:right; color:#ffffff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3);  }
			p#copyright a { color:#ffffff; }

    the site url is : http://lawlorswholesale.com/

    there should be white background on each of the three footer widgets.
    Any help very much appreciated.
    Thanks
    MsKazza

Viewing 9 replies - 1 through 9 (of 9 total)
  • sonic1243

    (@sonic1243)

    11 years, 11 months ago

    Good day .. just browsing the forums . ..
    I use the right click and “Inspect Element” in Google Chrome to great effect in reverse engineering problems, I too am learning to theme WP.

    I can see that you are styling the footer-widget-content which is actually a full width container for all the footer widgets; not just one box – so this is the wrong place to add your images etc.

    You have also added the image to .footer-widget which is the correct place for a single widget box, you current code is:
    background: url(images/footerwidget-bottom.png) no-repeat bottom left;

    I suggest you add a background colour to that line:
    background: url(images/footerwidget-bottom.png) no-repeat bottom left #fff;

    Ahh, and your footer-widget-top is in the wrong place – that is the top of the whole full-width footer-widget-container – not the single footer-widget box. Put your footer-widget-top inside the footer-widget.

    You will require further tweaking of-course, but perhaps it will put you on track? It is all fairly easy to spot if you use the Inspect Element feature of Chrome.

    sonic1243

    (@sonic1243)

    11 years, 11 months ago

    I think the general problem is that you are using:
    color: #fff Which is for colouring text.
    For background you want: background: #fff
    Or something to that effect ..

    Michael

    (@alchymyth)

    11 years, 11 months ago

    your posted link is showing a commercial theme;
    therefore please ask at elegantthemes for support, as they are the sellers of that theme.

    the linked site does not show any footer widgets in the html code.

    sonic1243

    (@sonic1243)

    11 years, 11 months ago

    (its changed to the holding page since I was looking)

    Michael

    (@alchymyth)

    11 years, 11 months ago

    what is the point posting a link to a holding page?

    Thread Starter MsKazza

    (@mskazza)

    11 years, 11 months ago

    i didn’t post a link to a holding page and it isn’t, that is the template we are working on. and i thought the point of this forum was to learn about wordpress, which is what i want to do, the point isn’t that i want to specifically fix this template i want to learn about widgets and placing them in the footer, it just so happens that we are using this template which has been customized considerably since its creation.

    i’m asking please if someone can please tell me how to make the three separate widget boxes have their own backgrounds.

    sonic i attempted to put in the colour code as you suggested on the background however it is supposed to be a gradient image there. i got the three areas with the white background, the one time i managed to get the content background image to show it was as you said it covered the whole widget area in the footer.

    sonic1243

    (@sonic1243)

    11 years, 11 months ago

    Your website changed from the test blog I saw to your holding page about 30 mins ago? So I got to look at your footer widgets; but now I cannot.

    I also visited the website of the company credited as creator in the footer of the test site, perhaps that is not you, but a professional web designer shouldn’t have any trouble styling a few divs 😉

    Could you make the desired boxes from scratch in an html test page? If not then I suggest that’s a good way to start…

    Michael

    (@alchymyth)

    11 years, 11 months ago

    i want to learn about widgets and placing them in the footer

    dashboard – appearance – widgets;
    there you should see various areas at the right, one of which might be labelled ‘footer widgets’ or whatever

    (this is the part nobody can help with a commercial theme as there is no free way of downloading and testing this).

    if the original theme does not have footer widget areas, read: http://codex.wordpress.org/Widgetizing_Themes

    we are using this template which has been customized considerably since its creation

    again, virtually impossible to help you fixing something which you might have broken in the proocess – possibly restart the customisation with a new copy of the theme (?)

    how to make the three separate widget boxes have their own backgrounds

    for this, these three footer widgets need at least to be visible in the posted link – which they were not when I looked last time (and are still not visible).

    also, this WordPress forum is not the best place to ask questions purely about formatting.

    Thread Starter MsKazza

    (@mskazza)

    11 years, 11 months ago

    I appologize the holding page didn’t show up for me until i logged on this morning. Thanks for your responses the link to widgetizing themes very informative. Currently working through it now.
    🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Problem with css on footer widgets’ is closed to new replies.