Follow

Font size in my RM4 website is too small

RootsMagic can create a website in six different arrangements – Family group sheets, Pedigree charts, Pedigree charts with group sheets, Ancestor book (narrative), Descendant book (narrative), and Alphabetical book (narrative) – to let you choose the one you prefer. The finished website uses a separate cascading style sheet (CSS) file to control the document presentation, fonts, colors, styles, etc.


To increase text size, edit the styles.css file in the website folder that was created and change the number in “font-size: 9pt;” to a larger number such as 11pt or 12pt. 

You would edit the CSS file that is generated and named 'styles.css'. It looks like this unformatted in the file:

<!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->body {font-family: Tahoma, helvetica, sans-serif; font-size: 9pt; margin: 3, 3, 3, 3; color: #000000; background-color: #FFFFFF; } table {font-family: Tahoma, helvetica, sans-serif; font-size: 9pt; margin: 3, 3, 3, 3; color: #000000; background-color: #FFFFFF; } a.lnk:link {color: #0000FF; text-decoration: none; } a.lnk:visited {color: #0000FF; text-decoration: none; } a.lnk:active {color: #0000FF; text-decoration: none; } a.lnk:hover {color: #FF0000; text-decoration: underline; } a.navlnk:link {color: #FFFFFF; text-decoration: none; font-weight: bold; } a.navlnk:visited {color: #FFFFFF; text-decoration: none; font-weight: bold; } a.navlnk:active {color: #FFFFFF; text-decoration: none; font-weight: bold; } a.navlnk:hover {color: #FFFFFF; text-decoration: underline; font-weight: bold; } .navbar {color:#FFFFFF; background-color:#008080}<!--c2--></div><!--ec2-->

But this is a clearer representation:
<!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->body
{
background-color: #FFFFFF;
color: #000000;
font-family: Tahoma, helvetica, sans-serif;
font-size: 9pt;
margin: 3, 3, 3, 3;
}
table
{
background-color: #FFFFFF;
color: #000000;
font-family: Tahoma, helvetica, sans-serif;
font-size: 9pt;
margin: 3, 3, 3, 3;
}
a.lnk:link
{
color: #0000FF;
text-decoration: none;
}
a.lnk:visited
{
color: #0000FF;
text-decoration: none;
}
a.lnk:active
{
color: #0000FF;
text-decoration: none;
}
a.lnk:hover
{
color: #FF0000;
text-decoration: underline;
}
a.navlnk:link
{
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a.navlnk:visited
{
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a.navlnk:active
{
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a.navlnk:hover
{
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
.navbar
{
background-color: #008080;
color: #FFFFFF;
}<!--c2--></div><!--ec2--> 

Editing the CSS file and viewing the result in your browser should be the final thing you do before uploading your website to a web hosting service. 

0 Comments

Article is closed for comments.