How Do You create CUSTOM FORUM BUTTONS without left alignment?

[Lynne]

It's not impossible at all, but you will need to use something like firebug to view all the CSS being applied to it and then create your own.

[addamroy]

Originally Posted by Lynne

It's not impossible at all, but you will need to use something like firebug to view all the CSS being applied to it and then create your own.

That's what I did, used firebug and I came up with the newcontent_textcontrol class...

Am I duplicating the wrong class?

If,

<a class="newcontent_textcontrol" "href="http://www.urlhere.com">button text here</a>

makes a custom button just as I need, except with the forced left alignment, if I copy the class and change it's name the following should work fine right?

<a class="new_custom_class" href="http://www.urlhere.com">button text here</a>

should show the same thing right? It's bizarre, although the name of the class in that css file is the exact same, it doesn't seem to work once I duplicate it and put it in additional.css

I'm honestly stumped on this I felt like I've gone through every single css file here and can't find the correct class to duplicate and edit... I will do 100 push-ups if you can figure this connundrum out for me (not all at once though I'm not in that good of shape)

[Lynne]

No, they shouldn't necessarily show the same thing. What if the CSS you are stealing it from is like this:

<div class="thisclass">
<a class="newcontent_textcontrol" "href="http://www.urlhere.com">button text here</a>
</div>

And you put yours in like this:

<div class="otherclass">
<a class="new_custom_class" href="http://www.urlhere.com">button text here</a>
</div>

There could be css that is for ".thisclass .newcontent_textcontrol" and unless you also write ".otherclass .new_custom_class" that is exactly the same, then you are going to have different results. These are *cascading* style sheets which means the little <a> that you are writing gets all the CSS from all the classes "above" it also.

[addamroy]

Interesting, so are you saying that I need to add MORE to the new entry I put in additional.css?

I posted above, the css class you pointed out in that template, do I need to have that AND the contents of another class somewhere as well? I'm kind of understanding the cascading stylesheets thing, I just don't know how to put it together and get this to work.

This is what I have so far (which isn't working),

.my_new_button {
	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;
	clear: {vb:stylevar right};
}

That includes everything from the newcontent_textcontrol class in the template you pointed out. It looks like it should make a button... but it doesn't make a button...

[Lynne]

Since you have not provided any link to be able to see exactly what CSS is being used on the custom button, and a link to see exactly what CSS is being used on the button you are trying to copy, it's impossible to see what is missing. I am pretty sure when you look at the button using firebug that you are no seeing just that one class - I'll bet there is a whole list of stuff on the right side. *All* of those items listed on the right side are adding to the style of the button you are looking at.

[addamroy]

Hmm, ok.

Well, for starters I haven't tested the button in any 'particular' place, however I've been testing it in the advertising spots. I want to create ads, with the custom buttons underneath. The ads will show pretty much anywhere, I'm talking in the header AND in first/last post of threads.

I've tested the HTML I provided in these ad spots, so if you were to put the code in for example, the global ad that shows above forums (large banner spot), you should be the same results as my own.

I was putting the button in center tags to test, in the top ad area and first/last post ad areas.

[Lynne]

I just added this to my additional.css template:

.my_custom_button {
	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};
}

And added this to my Advertising > global > Header 1 code:

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

and this is my result:


Isn't that what you want?

[addamroy]

Ok that does recreate the button, however it is still a forced left alignment.

If I remove the following from the css entry,

        float: {vb:stylevar left};
	clear: {vb:stylevar right};

the button becomes what seems like a 100% width, rather than the width of the text. If I put center tags around it, the text is centered within the button background but the button remains that 100% width, although I don't see that specified in the css entry.

So at least now I have a css class to mess with, any idea how I should modify this class so there's no forced left alignment, but keep the button the same size as the text as it is by default in vbulletin?

BTW thanks Lynne I appreciate your help this is driving me nuts. I apologize if I'm driving you nuts as well

[Lynne]

Well, in that particular spot, if you remove those two lines, and you leave it in that ad spot, then you would need to look at the CSS for "#ad_global_header1" because it is surrounded by <div>s with that id and it so happens that the CSS for that floats it left. So, you would need to write some custom CSS to not float the ad div left also.

[addamroy]

Oh boy. I didn't realize it was going to be this complicated to make a custom button that looks like my forum and doesn't have a forced left alignment. I give up.

I can center anything else I want to center, anywhere on the forum, except for this button I can't stand it.

Going to have to hire a coder or something.

Thanks Lynne.