Grow your CSS skills. Land your dream job.

Video 26 Custom WP Widget CSS Problem | Please Help!

  • # December 27, 2009 at 11:53 am

    Hi Everyone,

    God, where do I start…

    Thought I’d found the holy grail of Website creation stumbling onto this site. That’s why I jumped right in with creating a custom Theme for my personal blog. Unfortunately, in my haste to do cool looking stuff I’ve fallen astray from the video provided by Chris.

    1. If you check the link below, you’ll notice that the applied theme isn’t living up to the expectations of the mockup I created. For some reason after following Chris’ instructions, my ‘socialme’ widget places itself over my ‘twitter’ widget. worse still is that they’ve both deemed my .png images as unworthy and won’t display them. I thought the placement had something to do with Chris maybe leaving the css for the class "widget twitter" out of the tutorial but I’m more certain it’s an oversight on my part.

    Test Theme:
    http://www.joshroa.com/blog/

    Mockup:
    http://www.joshroa.com/blog/wp-content/ … Mockup.jpg

    2. As for the image formats, I’m stumped. The frustrating thing is they are out of the box .png files that display in dreamweaver though wouldn’t in the browser.

    3. The other thing was figuring out how to align the body posts up correctly inbetween both side widgets. Clearly a giant FAIL but I had trouble thinking how to have my right and left side-bg.png files in without creating a bunch of nested <div> tags. The only thing I managed to do was succeed at confusing myself.

    If you guys would like to download the theme, here is a link:
    http://www.joshroa.com/blog/wp-content/ … custom.zip

    I think I’ve linked up everything except the kitchen sink, now to commence hoping
    I’d appreciate any guru help as my wp-theme-kung-fu is not way strong. : (

    Oh, and for anyone who gets the crazy idea that they’d like to fix up my entire theme…I’m a 3dAnimator who would be happy to work out some type of contra arrangement. Check out my online portfolio at http://www.roarender.com.

    Thanks a bunch guys!

    # January 8, 2010 at 4:11 am

    After no luck, I decided to rebuild the mockup from scratch, unfortunately, I came to the same conclusion again, if anyone has any suggestions, I would be very grateful for the insight.

    # January 8, 2010 at 4:18 pm

    Well, I only messed with it for a couple of minutes. I know that sometimes using the absolute position and defining position is frowned upon, BUT it will place everything where you want it. At least that will provide you some time to mess around with your floats if you want to get this thing rolling soon.

    So, to do so, you’d remove the floats from your mid and right sections. Make them position:absolute. And for the mid, define it as "top:0px", "left:180px". And the right side do, "top:0px", "right:0px" and that will give your layout the right look.

    Like I said I wasn’t able to mess with it a bunch, but hopefully this invigorates you to get it fixed without the absolute positions while at least looking the way it should :)

    # January 9, 2010 at 6:44 pm

    Hey xHeathen,

    Was out with my daughters all yesterday so I didn’t have a chance to implement what you mentioned.

    I have now begun removing the floats and am having some measure of success. Thanks for the tip, I really appreciate it!

    I’ll post an update once I’ve nailed it down further.

    # January 19, 2010 at 7:12 am

    Sweet!

    With the help of xHeathen and Chris’ original file I was able to work out what I’d done wrong!!! I’d failed to leave a space between the div opening tag and the word class so it lloked like <divclass="widget"> ARGH!!! Live and learn I guess..

    Now I have the goal to put a custom adsense widget in the middle of my main column in an attempt to begin monetising it to a certain extent. I originally tried copying the adsense code into the adsensebar.php file that I had that simply consisted of a <div>tag with an id of "adsensebar". unfortunately the width of 700-odd pixels was too large for the 540 px space available so I changed the adsense dimensions from leaderboard to banner but now face not having the ads fit in the designated widget.

    If anyone could offer suggestions on how I could better fit the adsense ad within my widget I would appreciate it.

    Then I only have the final goal of post summaries on the landing page instead of an entire post.

    Again the url is http://www.joshroa.com/blog for any wise and powerful people out there.

    Thanks a lot guys, so glad I found this site!

    # January 24, 2010 at 12:37 pm

    Whoop!

    I launched my site live today and though it has a few kinks I intend to iron out, I’m happy with the progress. Some of the color schemes need to be changed to my own theme colors but this site and forum have been a real god-send. Chris, if you wander on to this post, thank you for the info!

    I appreciate it dearly!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".