Create topic New topics

Forum

Help me, please!  

How to change font size?

 
graceonline
Posts: 52
Message
on 09/28/2011

When I work on a site like Squidoo or Wizzley that does not permit image captions, I place image credits at the bottom of a module and use CSS to make the font a little smaller. Here is the code I have been using on Squidoo:

<p style="text-align:right; font-size:xx-small;">This is some text</p>

It has worked just fine there, but not on Wizzley. I searched and found no topics addressing this issue. Any suggestions?

chefkeem
Admin
Posts: 3394
Message
on 09/28/2011

In the image module are several fields for captions and source URLs.

If you'd like to apply your code in a text module, you must first open the HTML editor from the tool bar button in the module editor. Simply adding code in the visual editor won't work.

Here I've added this code in the visual editor:

<b style="font-size: x-small; font-weight: normal; color: #aaa;">text here</b> 

Here is what it looks like after placing it in the html editor:

text here


Achim "Chef Keem" Thiemermann is the co-founder of a pretty cool new platform called...um...er...oh, yeah - Wizzley.com.
graceonline
Posts: 52
Message
on 09/28/2011

Changing from <p style= ...> to <b style= ...> solves the problem. Thank  you so much!

FYI, I was using the html editor. Presumably it makes no difference whether we use the "Deactivate editor" or the "HTML" button to get there. Is that right?

Interesting note: After saving, I noticed that the HTML changed from <b style= ...> to <strong= style ...>, apparently an automatic default.

Would it be impolite to ask a related question here, or should I post a new thread?

The related question has to do with leading (the space between the lines) when I add <br /> to the image credits in the smaller font size. I need to know how to decrease the leading so the lines in the smaller font do not appear to be double spaced.

chefkeem
Admin
Posts: 3394
Message
on 09/28/2011

I'll let Anne answer this. I don't get it.  Embarassed


Achim "Chef Keem" Thiemermann is the co-founder of a pretty cool new platform called...um...er...oh, yeah - Wizzley.com.
nightowl
Admin
Posts: 519
Message
on 09/28/2011

Try this:

<p style="text-align:right; font-size:xx-small !important;">This is some text</p>


SEO Praxis: Specializing in WordPress Hosting and Small Business Web Design.
graceonline
Posts: 52
Message
on 09/28/2011

Interesting. That does let me use the <p style: ...> coding, but it does not alter the leading in any way. Should it have?

Curious about adding "!important;" to the style. I'll try to take some time later this week or weekend to learn what that does. Have not seen it prior to today.

nightowl
Admin
Posts: 519
Message
on 09/28/2011

Sorry, I overlooked your second query. Try defining this in your style:

line-height:10px;

You may have to play around with the actual number of pixels, depending on your font-size.

Since the styles are applied hierarchical (cascading, top to bottom) you may have to force an override of an already defined style by using "!important".


SEO Praxis: Specializing in WordPress Hosting and Small Business Web Design.
graceonline
Posts: 52
Message
on 09/28/2011

Yippee! Once the p style worked, the line height adjustment fell into place without additional code. Thank you so much!

Loading ...
Error!