How Do You create CUSTOM FORUM BUTTONS without left alignment?

[addamroy]

I'm trying to figure out how to create custom buttons properly which automatically inherit the style of the forum.

So I figured out if I just wrap the newcontent_textcontrol class around text will make the button with whatever text I want in it, however it's ALWAYS aligned to the left, no matter if I put any type of align="center" in any HTML surrounding it. Very frustrating.

I can't find this particular entry in any of the CSS files, I was searching so I could just duplicate it in additional CSS with a new name and eliminate any attributes that might be causing it to align left no matter what I do.

Here's a snapshot of the type of 'forum button' I'm talking about, http://screencast.com/t/l6fT8YE1Coi1

Essentially what I had come up with so far, but always results in a far left alignment is this:

<a class="newcontent_textcontrol" href="http://www.forumname.com/wherever-button-goes">Click here</a>

After searching all the various CSS templates for all instances of newcontent_textcontrol I could only find the one I need to duplicate and change so I can align the button however I want.

Basically I just have some ads/banners and I want to use a custom 'click here' button that matches the forum itself.

[addamroy]

Edit - WITHOUT the left alignment. I can make the button just need it to not align so I can do whatever I want with it.

Anyone??

[Lynne]

Can we get a link (and possibly a test username/password) to view the problem? It's impossible to troubleshoot CSS from an image.

[addamroy]

Hey Lynne thanks for the reply.

If you put this code anywhere on your board, (where you can input html) the button will always be aligned left and I want to be able to do this however without the left alignment.'

<a class="newcontent_textcontrol" href="http://www.forumname.com/some-link">Click here</a>

I'm assuming there's a newcontent_textcontrol css class somewhere that I can just duplicate, rename, and place in the additional.css template and just remove whatever it is that's forcing the left alignment.

Placing the newcontent_textcontrol class in the HTML is what creates the button, but I can't find newcontent_textcontrol all by itself in any of the css templates.

Ideally, my end product would be something like,

<a class="my_custom_button" href="http://www.forumname.com/some-link">Click here</a>

but would of course output the same as the code above minus the left alignment.

[Lynne]

Do a Search in Templates for ".newcontent_textcontrol" and you will find that class defined. It is set to float: left. So, copy it, give it another class name and apply that class to your button.

[addamroy]

Lynne I did a search in templates for that, and after searching all the css templates that come up, when searching for .newcontent_textcontrol in them (via CTRL+F) I can only find instances of it where it's attached to another class.

Like this,

.above_threadlist .newcontent_textcontrol {

I can't find it by itself like this, to copy and rename,

.newcontent_textcontrol {

Which css template is it in?

[Lynne]

Look in vbulletin-chrome.css right under where it says "/* NEW CONTENT LINK */"

[addamroy]

It didn't work Lynne, lol, this is weird.

I went to vbulletin-chrome.css, and found the entry. Which is below

.newcontent_textcontrol {
	background: {vb:stylevar control_content_background};
	_background-image: none;
	-moz-border-radius: {vb:stylevar control_content_radius};
	-webkit-border-radius: {vb:stylevar control_content_radius};
	-moz-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
	-webkit-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
	font: {vb:stylevar control_content_font};
	color: {vb:stylevar control_content_color};
	padding: {vb:stylevar control_content_padding};
	border: {vb:stylevar control_content_border};
	display:block;
	float: {vb:stylevar left};
	clear: {vb:stylevar right};
}

I then copied that entry, and pasted it into additional.css and changed the name of the entry from .newcontent_textcontrol to .my_custom_button and saved it. Also I removed the 'float left' attribute from the class.

However if I use the same HTML as above but with the new class it doesn't work, doesn't even show a button at all actually just a clickable text link.

<a class="my_custom_button" href="http://www.somelink.com">Click here button</a>

Doesn't work after following all the above steps. If you simulate the above steps you should see the same thing happen too I would think (I hope).

[Lynne]

There could be other classes being applied to the button also based on the way everything cascades (thus, Cascading Style Sheets).

[addamroy]

So is there anyway I can just create a custom button or are you saying it's impossible now??

All I want for christmas is the ability to make a custom button like above.

Please... please... show me how