[marcel wParticipant]

Hey guys,

Thank you very much for the X theme it is a pleasure to work with.

I have a question about the CSS, i’d like to change the CSS of a button in a plugin, all of the buttons look the same except for one button on my page. How can I take care of this issue. I’d asked the guy of the plugin but they are not much of a help. They said this:

The submit button is different because it’s type=”button” while the other one is type=”submit”. So in your CSS you just need to make sure type=”submit” includes also type=”button”.

this is the link: http://www.atplexamen.nl/mijn-examens/010-aviation-law/01-international-law-conventions-agreements-organizations/

Thenk you in advance!!!!!

[SupportMember]

Hey Marcel,

Thanks for writing in
Can you post your CSS Code here?
Also, the link you gave is not available.

Please advise

[marcel wParticipant]

I do not have any custom CSS yet. The class for the buttons are according to the plugins website: “table class=”watupro_buttons” holds the buttons under the quiz, each one in its own cell”. The buttons are now showing up as standard, but I want them to be as in the rest of the website. How can I manage this?

I’m sorry for the broken link, this one actually works: http://www.atplexamen.nl/mijn-examens/010-aviation-law-examen/01-international-law-conventions-agreements-organizations/

[ChristianModerator]

Hey Marcel,

If you control over the HTML of your plugin, you can add the class “x-btn” to your button. If not, please add the code below in the Customizer > Custom > CSS.

[type="button"]
{
	display:inline-block;
	position:relative;
	border:1px solid #ac1100;
	padding:0.563em 1.125em 0.813em;
	cursor:pointer;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.3;
	text-align:center;
	vertical-align:middle;
	color:#fff;
	background-color:#ff2a13;
	-webkit-transition:all 0.15s linear;
	transition:all 0.15s linear
}
[type="button"]:hover
{
	text-decoration:none;
	color:#fff;
	border-color:#600900;
	background-color:#df1600
}
[type="button"]:focus
{
	outline:thin dotted #333;
	outline:5px auto #16a085;
	outline-offset:-1px
}

Hope that helps. 🙂

[marcel wParticipant]

Unfortunately I have no acces to the HTML of the plugin. I have put in the CSS in the custom CSS field, If you follow the link in my previous reply you can see that the button is still the same, only the color of the button turned red.

The total CSS looks like this now:

#watupro_quiz {
font-size:16px;
}
.question-content {
font-weight:600;
}

.x-btn-navbar.collapsed {
margin-right: 20px;
}

[type=”button”]
{
display:inline-block;
position:relative;
border:1px solid #ac1100;
padding:0.563em 1.125em 0.813em;
cursor:pointer;
font-size:16px;
font-size:1.6rem;
line-height:1.3;
text-align:center;
vertical-align:middle;
color:#fff;
background-color:#ff2a13;
-webkit-transition:all 0.15s linear;
transition:all 0.15s linear
}
[type=”button”]:hover
{
text-decoration:none;
color:#fff;
border-color:#600900;
background-color:#df1600
}
[type=”button”]:focus
{
outline:thin dotted #333;
outline:5px auto #16a085;
outline-offset:-1px
}

CAn you please tell me how to solve this problem?

Thanks in advance!!

[ChristianModerator]

Hey Marcel,

Please try the CSS

input[type="button"] {
	color: #1e1e1e;
	border-color: #cccccc;
	border-width: 3px;
	text-transform: uppercase;
	background-color: transparent;
	border-radius: 0.25em;
}

input[type="button"]:hover {
	border-color: orange;
}

Hope that helps. 🙂

[marcel wParticipant]

Thank you very much, it almost looks the same now.

You guys are the best!!

[RadModerator]

You’re welcome Marcel!

[Author]

Posts