Need someone with big CSS brain to help fix my little widget.

[Hawkgirl]

I'm a total CSS newbie - but I'm pretty decent at figuring things out rather quickly.

I have two CSS widgets on my home page - one at the very top and one just below it. The top CSS widget is great - does (almost) exactly what I want it to. The second widget is okay but I can't get it to align properly and I'm hoping someone will take pity on me and point out my error. (I know it's something stupid and small ... I just can't figure it out!)

All of the elements in the two widgets have unique names so the styles shouldn't be conflicting with one another.

The top widget has three columns - two float left and one floats right, so that when I expand the window, the right box moves with the right part of the screen.

The bottom widget (pink box containing 16 links) refuses to cooperate - I can't get it to align to the left of the screen like the top widget does. Any ideas? I know someone is sitting out there with a huge CSS brain and can answer this question in 2 seconds or so.

Thanks ...
Erika

Widgets can be found on home page of http://www.IVFConnections.com.


IVFConnections.com

[CroNiX]

#TOCbox { margin:0 auto} is the problem. The auto is telling it to center align that div.

--------------- Added [DATE]1293831709[/DATE] at [TIME]1293831709[/TIME] ---------------

It also looks like <div id="TOCrightrightcol"> needs to be placed within the #TOCbox div as the last element.

[Hawkgirl]

THANKS!

I knew a brain would come along quickly and be able to fix it. I really, really appreciate your help. I always try to solve my own problems, but I've wasted HOURS on this. I learn best by doing (teach a man to fish ....) but I was never going to catch that.

Erika
(Remember: build a man a fire, he'll be warm all afternoon. Set a man on fire, he'll be warm for the rest of his life.)

[CroNiX]

Not a problem

[Hawkgirl]

It looks so much better! Thanks again - happy new year!

[mccollin]

Nice style... love the clean lines. One suggestion is that you get rid of those little html icons on your widgets. You need to comment out the code for them in the vbcms_widget_static_page template.

--------------- Added [DATE]1294347164[/DATE] at [TIME]1294347164[/TIME] ---------------

How did you do the widgets with no border around them like the other widgets?

[Hawkgirl]

Originally Posted by mccollin

Nice style... love the clean lines. One suggestion is that you get rid of those little html icons on your widgets. You need to comment out the code for them in the vbcms_widget_static_page template.

--------------- Added [DATE]1294347164[/DATE] at [TIME]1294347164[/TIME] ---------------

How did you do the widgets with no border around them like the other widgets?

Thanks for the feedback. I really haven't had many forum people review my site ... and you know the members hate changes, so I can't ask them!

I had thought about commenting out those silly icons from the widget headers and hadn't gotten to it. I just did it and it looks great. (I centered the header, too - looks much better IMO).

The widgets without borders: just make a new template, call it vbcms_widget_static_noformat, and add:

<br />
<div align="center">
		
		{vb:raw static_html}
		
</div>
<br />

And then when you create a new widget, just make sure you change the template name to the one you created.

[mccollin]

Thanks... you lost me on that last part. I created the template. Then I go into the vbCMS Widgets section of the AdminCP and try to add a new widget. What type to I select, and then how do I tell it what template to use? Or am I missing something?

[Hawkgirl]

1. You created the new template (which works for a Static HTML widget).
2. Now go create a widget and choose Static HTML from the drop-down box as the type.
3. Save that widget.
4. Now scroll down the list until you find your new widget and click on the blue "Configure" link to the far right of the widget name.
5. Enter your custom code into the input box - your table, your text, your images, whatever it is you want to put in there. This is where I put my CSS boxes (for the boxes on my home page).
6. Before you save your work, be sure to change the Template Name to the name of the blank template you created in step 1 (using the code from my previous post).
7. And now go test it by adding the widget to one of your layouts and taking a look to see how it looks.

I have no idea if this is the best way to do things or not - I'm a self-taught vBulletin user over the past 16 months or so and there are times when I've found out I've done things the hard way.

HTH!
Erika

[mccollin]

You have unlocked a lot of capability for me with vB CMS. I was struggling with how to do a lot of the custom stuff and this is one of the big keys. The other one is how to "flatten" the layout and use that Yahoo stuff to build a custom layout. With the two of those things, it should be possible to do nearly anything. I also discovered that you can have your own templates for the other widgets like recent threads. That will open some more doors. I will use this. Thanks for sharing.

I was self taught on vBulletin 3 over the last 6 years or so... and had built a lot of custom stuff by grabbing hacks from different places and tweaking things and adding stuff. vBulletin 4 is nearly a total restart. Fireplug has been a life saver too.

I wish that they would get some good tutorials on some of this stuff because the product is great, but the documentation is pretty bad.