Content page HTML editor font size

AbleMods · Post by **AbleMods** » Sat Oct 13, 2007 4:47 pm

I'm not able to alter font size with the HTML editor.

Even created a brand new content page to test. Styles seem to be working if you highlight existing text and choose style.

However new text or highlight existing text and setting the font size doesn't change it. HTML code shows the proper tags.

Interesting note: setting the font size to X-Large will give you a really large cursor, as if it adjusted it correctly. But the moment you type something, it reverts to the standard size.

Post by **Shopping Cart Admin** » Sat Oct 13, 2007 6:27 pm

Hello Joe,

The HTML editor previews using the same style sheet which is attached to the object being edited. CSS trumps the font size tag.

If you want a larger font, then define it in the CSS (AppThemes/'themename'/style.css). I'm NOT a CSS expert but I believe DIV is now the accepted way to format text.

Then you would format your text in source mode:

Code: Select all

<div style="mystyle">My Text</div>

AbleMods · Post by **AbleMods** » Sun Oct 14, 2007 4:10 am

So I can't make any font size changes on content pages using the HTML editor without manually editing the HTML?

Post by **Shopping Cart Admin** » Sun Oct 14, 2007 10:03 am

Hello Joe,

The font element was deprecated in HTML 4.01. It's not really suppose to be used anymore. But no is the answer to the question. Unless you want to take out the body style out of our CSS sheet.

AbleMods · Post by **AbleMods** » Sun Oct 14, 2007 10:08 am

Hmmm ok. CSS is not something I'm strong at unfortunately.

It appears the style part works ok. Could I add a few more styles to the CSS that alter the font size and use that instead?

I'm not even sure I know what I'm describing, but it sure sounds cool

troutlet · Post by **troutlet** » Sun Oct 14, 2007 11:50 am

Hmmm ok. CSS is not something I'm strong at unfortunately.

Hey Joe, using Firefox and the free web developer add-on https://addons.mozilla.org/en-US/firefox/addon/60.

You can right click on any page in the browser, then go [web developer] [css][view style information] and be shown all of the style info for any element that you select. It's also helpful to use the option of editing css through this same add-on to get a live view of each change that you make.

Chris

Post by **Shopping Cart Admin** » Sun Oct 14, 2007 4:00 pm

Hello,

Here's a fancy div example:

This would be added to the bottom of style.css

Code: Select all

.box {
  background: #FFFFFF;
  color : #000099;
  font-family : Arial, Tahoma, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  padding : 2px;
  margin: 2px;
  border-color : #FF0000;
  border-style : groove;
  border-width : 2px;
  }

Added to your page:
<div class="box">content of box</div>

Simple font example:

Code: Select all

.list5 {
	font-size:11px;
	line-height:13px;
        }	

<font style="list5">My Text</font>

AbleMods · Post by **AbleMods** » Sun Oct 14, 2007 4:57 pm

Ok just so I understand this correctly...

AC7 uses an HTML editor to set up content pages. But the content pages can't use HTML because the CSS style sheets will override it.

Thus, all the scriptlet types like sidebar, content page etc cannot have any font formatting without manually modifying the raw HTML. If you don't manually format it, you'll be stuck with the font sizes dictated by the site CSS theme.

So, to effectively design a content page with variable text size, fonts etc I will need to build the page in a separate application, encode the style locally in the page itself and copy/paste the raw HTML into the AC7 page.

Did I get that right?

Post by **Shopping Cart Admin** » Sun Oct 14, 2007 5:04 pm

Hello Joe,

On the editor you'll find a source button. If you click it the html will show. find the text you want to wrap with a css style and have at it.

AbleMods · Post by **AbleMods** » Sun Oct 14, 2007 5:07 pm

Ok, then I am understanding it correctly.

Don't take this the wrong way but...

Why is there an HTML editor in the first place? Is it to give the user the ability to have a page preview?

I mean, all the functions of the HTML editor are pretty much unusable since CSS will override them.

Post by **Shopping Cart Admin** » Sun Oct 14, 2007 5:39 pm

Hello Joe,

The editor has features that really are not used any longer and have been 'depricated' by the WC3. Which means that you shouldn't use them anymore. Maybe we should just remove the buttons to avoid confusion.

Post by **Shopping Cart Admin** » Sun Oct 14, 2007 6:05 pm

Hello Joe,

What we can do I think is to add more selections under the style drop down box to handle these kinds of issues.

gjaros · Post by **gjaros** » Mon Oct 15, 2007 10:47 am

Don't take this the wrong way but...

Why is there an HTML editor in the first place? Is it to give the user the ability to have a page preview?

I mean, all the functions of the HTML editor are pretty much unusable since CSS will override them.

Actually there are quite a few tags that have been deprecated in HTML 4.01, including the <font> tag. This is because 1. CSS provides a more flexible and more powerful way to format a page and 2. new HTML tags have been introduced that replace some of the older tags.

However, many of these deprecated tags are still in common use (by old web pages, HTML editing software, and inexperienced developers), which is why they are still supported by most browsers. However, future support is not guaranteed so it is best practice to use the new supported tags and styles, especially for new content.

That said, there is a hierarchy of how tags are interpreted by browsers. Deprecated tags are the lowest on the ladder and will be ignored if there are newer tags or styles defined in the code, thus why your <font> tags are being overwritten by the defined styles.

Here are a few good links that talk about deprecated tags:
http://www.w3schools.com/tags/default.asp
http://www.w3schools.com/tags/tag_font.asp
http://htmlhelp.com/reference/html40/deprecated.html

I'm NOT a CSS expert but I believe DIV is now the accepted way to format text.

Then you would format your text in source mode:

Code:
<div style="mystyle">My Text</div>

Actually, in cases like this it is better to use the <span> tag. <div> creates a box similar to a table cell where the text is separated from the surrounding page. <span> will apply a style to text inline.

So you should use something like this:

Code: Select all

This is <span style="font-weight:bold;">my text</span>.

AbleMods · Post by **AbleMods** » Mon Oct 15, 2007 11:12 am

Ok, the deprecated tags thing seems covered pretty well - I appreciate the time spent helping me understand.

But how would anyone create product description pages given the constraints we've discussed using AC7? For most of my products, I've simply copy/pasted the marketing info from the manufacturers web page into the product description.

My product pages can't be just a few paragraphs of text. They have to be compelling with colors, font sizes etc.

if I copy/paste from a manufacturer product page, all the text formatting will paste and then be override by the default font size off the CSS style sheet.

I can't use the built-in HTML editor either. That'll get overridden.

Either way, I'm going to have hand-code the HTML styles and have no way to preview as I edit?

There's got to be a better way to lay out these product pages without having to manually edit the HTML code for each and every one of them, isn't there??

Incidently, it looks like the HTML editor engine was changed between beta 1 and beta 2. I have several product pages set up from my Beta 1 install that copy/pasted font changes, images etc. I didn't realize I would lose that capability.

Post by **Shopping Cart Admin** » Mon Oct 15, 2007 11:27 am

Hello Joe,

The editor didn't change, in beta 1 the editor was not previewing the page using the attached CSS. So even though you'd see the font changes in beta 1, they would not of shown in the final output of the store.

We'll add some more choices into the style area for final.

Post by **Logan Rhodehamel** » Mon Oct 15, 2007 1:12 pm

I never noticed that it is using FONT TAGS! That is a huge surprise. I would have thought it was applying inline styles like so:

Code: Select all

<span style="font-size:24px">BIGGER TEXT</span>

I went to do some research and I found that FCKEditor (that is the component we use) just released a beta of their 2.5 release a few days ago.

It brings opera and safari support, and removes font tags by default. I will definitely look at this ASAP. Depending on the stability of the beta and/or their release timeframe we might have our solution right there.

AbleMods · Post by **AbleMods** » Mon Oct 15, 2007 1:40 pm

I've been using RichTextBox for my present application. Very robust and very clean product, at least for my application.

Performance-wise, yours is snappier. My version of RTB is older so maybe their latest fixes that.

So, then you're saying the issue could just be that the editor itself isn't using inline style commands for the HTML-specific commands? And an editor that DID use inline styling would resolve the issue for both of us?

Let me know if I can be of any help with testing.

Post by **Logan Rhodehamel** » Mon Oct 15, 2007 2:54 pm

I have investigated. FCKEditor 2.5 beta seems to work, but I note that it sometimes makes less than optimal html:

Code: Select all

<p><span style="font-size: xx-large"><span style=""><span style="font-family: Courier New">TEST</span></span></span></p>

Notice the extra span tag. Not a big deal, but I imagine this is the kind of stuff they'll be looking to fix before their final release.

In testing this though, I came across what could the the real problem behind why the old font tags aren't recognized. Here is a snippet from the top of App_Themes/AbleCommerce/style.css:

Code: Select all

/* specify default font settings for all elements */
* {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px;}  

/* force a vertical scrollbar in firefox, prevents horizontal page shifting */
html { min-height: 100%; margin-bottom:1px; }

/* styling for the page body */
body
{
	padding: 0 10px 0 10px;
	margin: 0 0 0 0;
	background:#BDD8FE url(images/background_image.gif) repeat-x top left;
}

I'm not sure why we elected to assign a font size to all elements, but if you want to test something, try replacing the CSS that I listed above with this new code:

Code: Select all

/* force a vertical scrollbar in firefox, prevents horizontal page shifting */
html { min-height: 100%; margin-bottom:1px; }

/* styling for the page body */
body
{
	padding: 0 10px 0 10px;
	margin: 0 0 0 0;
	background:#BDD8FE url(images/background_image.gif) repeat-x top left;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
}

This removes the assignment to all elements, and moves the font specifications to the body element which I think is more standard. After that is in place, refresh your page to make sure you have a fresh copy of CSS in the browser. Then see if the FONT tags work in the editor.

afm · Post by **afm** » Mon Oct 15, 2007 4:10 pm

Yahoo! has some nice CSS base files that help create a consistent look across all browsers.

http://developer.yahoo.com/yui/base/

AbleMods · Post by **AbleMods** » Mon Oct 15, 2007 6:14 pm

Nope, no workie

I'll take the beta for the FCKEditor over what I have now though. I can't really do any content work until this issue is resolved.

Post by **Shopping Cart Admin** » Mon Oct 15, 2007 6:18 pm

Hello Joe,

Be sure you clear your browser cache. I'm guessing that's the issue.

AbleMods · Post by **AbleMods** » Mon Oct 15, 2007 6:50 pm

Nope, nada.

<shrug>

I blame global warming.

Seriously, just copy/replace the section of the style.css mentioned above and clear my browser cache, right?

I modified a content page to use a large font on the first line but the entire page still renders in the same size font.

All the page has is a few words with a font size="5" tag

Post by **Logan Rhodehamel** » Mon Oct 15, 2007 8:21 pm

We have updated the FCK editor to the 2.5 beta as well as our CSS pages, and this is being tested now.

AbleMods · Post by **AbleMods** » Tue Oct 16, 2007 4:10 am

I don't care what Mike said about you guys, you're alright!

Will · Post by **Will** » Tue Oct 16, 2007 8:34 am

Keep in mind any inline style settings will override those in a <style> declaration in the <head> of your page or in an external style sheet.

For example, if this is in the <head> of your document:

Code: Select all

<style>
* {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px;} 
</style>

it will be trumped by an inline style further down the page:

Code: Select all

<span style='font-family: Courier New; font-size: xx-large'>TEST</span>

So if you're generating inline styles using the HTML editor, global style settings may not have an effect. I doesn't matter if the inline stuff are font tags or span tags.

Hope this helps.