Video 26 Custom WP Widget CSS Problem | Please Help!

[morph106]

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!

[morph106]

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.

[morph106]

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.

[morph106]

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!

[morph106]

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!

[Author]

Posts