Centering Submission Form

There should be some ID and class attributes on the form and surrounding markup that you could use to add custom CSS with.

So I have this: [badgeos_submission achievement_id=”144″]

I don’t understand how to get that on the front end to be centered. None of the available parameters are alignment and badgeos.com doesn’t mention it either. How could I use surrounding markup? I’m not quiet sure what you mean by that. I tried, [badgeos_submission achievement_id=”144″ alignment=”center”].

Sorry Michael I didn’t realize one additional thing. I want all of the submission forms across my site to be centered on their respective pages. So the example above is a specific submission form (the only stand alone submission form I have), and I have a number of different achievement types with lists of achievements, which I use the list shortcode for. For specificity here is an example, [badgeos_achievements_list type=”a-mans-life” limit=”10″ show_filter=”true” show_search=”false” orderby=”menu_order” order=”ASC” wpms=”false”]. Let me know if this all makes sense. Simply put, if there is a badgeos submission form on a page I would like it centered.

You’re going to have to view the output on the frontend and use view-source to see the IDs and classes as part of the generated markup. It’s not something you can fetch from the placement of the shortcode itself.

Same answer, it’s going to be all CSS based, and you need to check the generated HTML output to get the selectors needed.

I think I correctly located all of the classes. Here is what I have:

.badgeos-file-submission //upload button and text
.badgeos-submission-comment //text box
.badgeos-submission-submit //submit button

.badgeos-submission-form //this encompasses all of the elements above

I wasn’t sure about the “Create a New Submission” text. It doesn’t have a class it is just an h4 between <legend><h4>Create a New Submission</h4></legend>. So not sure how to point at that.

Now I need a little help with the proper CSS rules. I know it should look something like the following:

.badgeos-file-submission, .badgeos-submission-comment,
.badgeos-submission-submit {

What goes here?

}

If you know how to incorporate the Create New Submission to be centered as well with the info I have given you please tell me how to do that too. I’m in the process of learning, this was a good little learning experience.

Worst case, in the place you’re adding the shortcode, you could wrap the actual shortcode in your own div and it would get wrapped around the shortcode output. Then the following would apply to everything inside that div, the heading as well:

text-align: center;

I’m using visual composer and I’ve tried doing a custom class and css, but that hasn’t worked. This is from the worpdress text editor:

[vc_column width=”1/1″][vc_column_text][badgeos_submission][/vc_column_text][/vc_column][/vc_row]

Is this where I would use the div tags? I don’t quite understand how to do what your proposing. I think using visual composer is conflicting with your solution perhaps b/c the text editor has vc shortcodes rather than html tags? I’m preparing to present this website soon and centering all of these submission forms is pretty much my final step. If I send you some login credentials could you center a couple for me, and I can do the rest if I just see how its done?

My original idea was inputting something like the following:

<div class="myclass">[badgeos_submission]</div>

But I’m not sure how easily or how well visual composer handles that type of things, as I have no experience with it.

Otherwise, just use the previous comments regarding your CSS selector and the text-align: center part.

I prefer using CSS in my custom.css, but it simply isn’t working. I’ve tried the classes with:

text-align: center;

margin: 0 auto;

margin-left: auto; margin-right: auto;

nothings seems to work. I don’t think the elements can be centered.

I was able to center the submit button with

p.badgeos_submission_submit {
text-align: center;
}

but have not been able to center the “Create a New Submission” text, the “Attatchment:” and upload button, and the text area.

At least from my test, using BadgeOS and twentyfifteen, I was able to center everything with this:

.badgeos-submission-form {
	text-align: center;
}

It takes care of everything within the form, including the heading.

Something else from the theme you are using may be overriding it, I can’t be sure, but you may need to get more specific selectors for your CSS rules.

Any changes with this one?

I used the following to center all of the items of the submission forms.

/*centers p elements of badgeos
 * badgeos submission forms*/
.badgeos-submission-form p {
	text-align: center;
	}

/*center "Create a New Submission*/
.badgeos-submission-form legend {
	text-align: center;
	width: 100%;
	}

/*adjusts badgeos submission form label*/
.badgeos-submission-form label {
	margin-left: 60px;
	}

All worked out. Thanks for checking in.

Awesome