Widget display

When I enter the enclosed code in my left side page widget, none of my changes appear, and my font color only appears in one group. Also, How do I edit the font size of my "Title Pages" when I view a page?

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Crimsom+Text">
    <style>
      body {
        font-family: 'Crimsom+Text', serif;
        font-size: 19px;
      }
    </style>
  </head>
  <body>
    <div><p><font color="#000066"> Clinic Locations</p>
<p>South Suburban Cardiology Associates, Ltd
3800 West 203rd Street Suite 201
Olympia Fields, IL 60461
708-748-9952</p>
<p>South Suburban Cardiology Associates, Ltd
3649 183rd Street  Suite 104
Hazel Crest, IL 60429
708-960-2294</p><p>South Suburban Cardiology Associates, Ltd
20303 S. Crawford Ave.
 Suite 120
Olympia Fields, Illinois 60461
708-481-5500</p><p>
South Suburban Cardiology
Silver Cross Hospital
Pavilion A  1890 Silver Cross Blvd.
New Lenox, IL 60451
 Phone: 815/ 320-3520
Fax: 815/ 320-3332</font color></div>
  </body>
</html>
DrEddieSAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ResQTek NancyPresident @ ResQTekCommented:
Your browser may display the font color differently, but if you want all the text to be the same color, specify the color in the body style with the other font properties. Ideally, these styles are stored in the CSS for your theme.

Example:
    <style>
      body {
        font-family: 'Crimsom+Text', serif;
        font-size: 19px;
        color: #000066; /* add this to your style properties */
      }
    </style>

Open in new window


I'm not certain what changes are not appearing...

As for the title pages, your theme should have CSS properties you can modify to adjust the font size.
DrEddieSAuthor Commented:
Where should I look for the title pages in for the Theme?
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hello DrEddieS,
Are you putting all of this code below in a widget? Because you shouldn't. The html, head and body tags are already on the page. They are coming in from other template files that make up the entire page. You only need to add the content in the div to your widget. And <font color="#000066"> is outdated. You should be using <p style="color: #000066;">. For each paragraph you'd like to change color add the style.

As ResQTek Nancy has pointed out, you can also edit this in the styles. It's the style.css file.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Crimsom+Text">
    <style>
      body {
        font-family: 'Crimsom+Text', serif;
        font-size: 19px;
      }
    </style>
  </head>
  <body>
    <div><p><font color="#000066"> Clinic Locations</p>
<p>South Suburban Cardiology Associates, Ltd
3800 West 203rd Street Suite 201
Olympia Fields, IL 60461
708-748-9952</p>
<p>South Suburban Cardiology Associates, Ltd
3649 183rd Street  Suite 104
Hazel Crest, IL 60429
708-960-2294</p><p>South Suburban Cardiology Associates, Ltd
20303 S. Crawford Ave. 
 Suite 120
Olympia Fields, Illinois 60461
708-481-5500</p><p>
South Suburban Cardiology
Silver Cross Hospital 
Pavilion A  1890 Silver Cross Blvd.
New Lenox, IL 60451
 Phone: 815/ 320-3520
Fax: 815/ 320-3332</font color></div>
  </body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

Alicia St RoseOwner & Principle Developer/DesignerCommented:
Can you provide a link to your site?
DrEddieSAuthor Commented:
ResQTek NancyPresident @ ResQTekCommented:
Yes, laughhearty, the <html> and <body> may already be processed, but the <style> information can still be added to the widget. Just clarifying that because it falls withing DrEddieS's <head>.

Based on the page just posted above, the style for <p> is overriding the font color declaration.

p {
    color: #383838; /* this is why the font is not changing color */
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
}

We need to specify the font color for the element like this:

aside#left-column p {
    color: #000066;
}

You can add this property to your <style> information in that widget like this:

 <style>
      body {
        font-family: 'Crimsom+Text', serif;
        font-size: 19px;
        }

aside#left-column p {
    color: #000066 !important;  /* use !important if it still does not render */
}
    </style>

Hope this helps...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.