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

[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]

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:
https://vborg.vbsupport.ru/attachment.php?attachmentid=138106&stc=1&d=1335802121

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.

[addamroy]

I did it Lynne I did it! Here's the answer for anyone who might have the same question...

The original CSS that makes the buttons work is the newcontent_textcontrol class as we already know. It has the following:

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

Actual HTML for the button is, <a class="newcontent_textcontrol" href="http://www.buttonurl.com">Button Text</a>

Notice the float and clear attributes, those are forcing the left alignment. If you remove the alignment however, the button container stretches the full length of whatever div it's inside.

So I solved the problem by creating a new class in additional CSS with all the attributes shown above EXCEPT I removed the bottom float and clear attributes, as well as changed the display: attribute to inline-block instead of block. My final result is the following:

.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:inline-block;
}

The new HTML code for this button is, <a class="my_custom_button" href="http://www.buttonurl.com">Button Text</a>. The only difference is it's not a forced alignment and the button block will be the same size as the text always, so you can do whatever you want with it and put custom buttons anywhere in your forum.

Works like a charm!

[Lynne]

Glad you got it working. :)