Hello,
I come back to you because the designer of the component shows that the problem of poster comes from the template.
If you like to try to see how to help me because I would not arrive with this template, by the way I tried M creative agency and I have the same concern for poster and with protostars it works.
Here is the response of the component designer, but I do not understand everything in his explanation.
Thank you for your understanding, I just want to use your template and it works well with the component.
Message: Hello,
Usually the style is generated from the template, as long as the template does provide proper definitions on this matter. If the component were to handle all styling, then various discrepancies would had occurred on probably any other template. As you've noticed using Protostar, this does work properly.
Although this exceeds the range of our support policy, I've taken a look at this for you, and noticed the followings:
- the following css rule is responsible for the input field shrinking:
.inputbox, .registration input, .login input, .contact-form input, #jform_contact_message, input, textarea, .validate, select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
...
font-size: 0.9em;
...
}
..located under this path:
/templates/forte/css/template.css
Change this rule by adding a different value for the font size into the custom.css file and you'll notice that it will be properly displayed.
- the following css rule is responsible for displaying the actual buttons shrinked:
.control-group button, .edit button {
padding: 4px !important;
}
..located under this path:
/templates/forte/css/bootstrap/bootstrap-default-min.css
- after changin this you will notice that there are no icons displayed due to this css rule:
[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
..located under this path:
/templates/forte/css/font-awesome/css/font-awesome.min.css
This is actually overriding the following:
[class*=" icon-"], [class^="icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url(../../images/bootstrap/glyphicons-halflings.png);
background-repeat: no-repeat;
margin-top: 1px;
}
As you can notice, this is not related to our component, please contact your template developers to provide proper assistance.
Best regard