× Please quote us your Systemkonfiguration, discribe us as detailed as possible, what do not work.

Please do not tell us, something didn't work!

Increase font size

12 years 9 months ago #84 by SolvingIT
Increase font size was created by SolvingIT
Love the component, but how can i increase the font size used for the text in the form?? It shows up at 8 point, my template default is 10 point. Is there a way in the CSS to change it??

Thanks.

Please Log in or Create an account to join the conversation.

12 years 9 months ago #85 by Maike
Replied by Maike on topic Aw: Increase font size
Hello SolvingIT,

you can change the font size for eXtroForms in the CSS file. Depending on the view you use, you should add the font-size tag to the following classes to change the font size in the whole form:

Default view: .efmain
Static tooltips view: .efmain-static
Instant tooltips view: .efmain-instant
Sliding tooltips view: .efmain-sliding

If you want to change the font size only in the 2 top positions, you would add the font-size tag to:

.efmaint (default view)
.efmaint-static (static view)
.efmaint-instant (instant view)
.efmaint-sliding (sliding view)

for the center position, you can change the classes staring with .efmainc and for the bottom those starting with .efmainb

Of yourse it's also possible to change the font size just for the one positon, eg for the top left position (.efTop1). The position on the right is called .efTop2 , just add the name of the view you use. To do this, you should add your CSS tags to the classes:

.efTop1
.efTop1-static
.efTop1-instant
.efTop1-sliding

(depending on the view you use)


The same applies to the center (.efCenter) and Bottom positions (.efBottom1 for left, .efBottom2 for right).


Example :
You want to change the font size to 10px and the background color to yellow of the bottom right position. Then your .efBottom2 class would look like:

.efBottom2 {
/* -- bottom right container in mainb container -- */
float: right;
width: 49%;
height: auto;
position: relative;
overflow: hidden;

/* -- your modifications -- */
font-size: 10px;
background-color: yellow;
/* -- end of your modifications -- */

}



maike

If you like our extensions and think they are worth 5 stars, please write a review in the JED

Please Log in or Create an account to join the conversation.

Moderators: forumsupport
Powered by Kunena Forum