WebYep styles don't work

Freeway
1

Hello

I’m using WebYep, rich text and TinyMCE rich text editor.

I’ve created the CSS styles I want to use in the text editor. They appear in the text editor in the “Styles” drop down menu. Why is there a second drop down menu called “Paragraph”?

And why do the styles lose the ‘space after’ attribute?

http://www.mylifestorybook.co.uk/trial/index.php

is suppose to look like this

Thanks for any help

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi Mark
From what I can see, the richtext version is using break returns

and the example you want to match is using paragraph returns

if you wanted them to be the same then you would need to use the same type of line returns.
all the best max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Max

Thanks for that.

Am I correct in saying that a paragraph return is achieved by hitting the ‘paragraph return’ key on the keyboard

and a break return is a “soft return” done by holding the shift and return key?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Hi Max

Why do my CSS styles appear in the TinyMCE ‘styles’ drop down menu and not the ‘paragraph’ drop down menu?

I don’t understand why there are two drop downs, appearing to do the same thing (I fear clients will use the wrong one).

I’m also not clear why my CSS styles can’t include styles called h1 or h2 or p. I’ve had to rename my styles with no ‘tag’ just a ‘name’, i.e. “.head1” and “.body”

Perhaps your manual could cover these issues?

Thank you for any help

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hi Mark
you are correct about the differences between break and paragraph returns.

As for the differences between the two drop downs…
One is for styles like H styles which effects the tag within the html. This usually effects the complete line right up-to the end h tag , and not just an individual character.
The style drop down is for styles that could effect an individual item.
For example a class style could be created and the only attribute is the colour red. If that style was applied to 1 character then that character would be wrapped in a span and the class .red added to it. Which would result in that charter displaying the colour red whilst all the other characters around it would be black.

to adjust the H styles attributes just ad h1 h2 etc to your tinymce specific style sheet and those new attributes should then be using within the tinymce text field.

all the best max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Hi Max

I’ve set up h1 and h2 styles etc and seen that these styles are used by TinyMCE.

How do I get bullet points? Do I create a ‘style’ or a ‘class style’? If it is a style what tag do I give it? In TinyMCE do I select the text, hit “unordered list” and then select the appropriate ‘style’? or can I simply select the text and then the appropriate “paragraph” style?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Even though Freeway conflates the text style with the structure in
lists, the two are completely separate concepts in HTML. TinyMCE is
hewing closely to the HTML side of things, and when you use the
Unordered List button, you are creating a list as a text container.
Here’s what the code looks like:

<ul>
	<li>Some text</li>
	<li>Some more text</li>
</ul>

Freeway actually creates this same code when you create a “list” style
and apply it to a paragraph or paragraphs of text. But in HTML, lists
are not just a way to style the text, they’re a different structure.
If you could imagine a set of paragraphs styled to look like a list,
that might look like this:

<p style="list-style-type:disc; display:list-item;">Some text</p>
<p style="list-style-type:disc; display:list-item;">Some more text</p>

While this would be visually identical to the first example, it would
not have the same semantic flavor as the first example – the two
paragraphs would not be related in any way to one another, while in
the first example, the two list items share a common parent – the ul
tag – and that means they are closely related at a structural level.

Once you’ve wrapped your head around this structural difference, the
way to create a style for your list items is pretty clear. You can
either select the text inside your list (after you’ve given it the
list structure using the unordered list button) and apply one or more
text styles to it, or you could create a tag-only style in Freeway
that applies to all <li> tags inside your WebYep element and gives
them a specific visual style.

Walter

On Aug 1, 2011, at 10:54 AM, Mark wrote:

Hi Max

I’ve set up h1 and h2 styles etc and seen that these styles are used
by TinyMCE.

How do I get bullet points? Do I create a ‘style’ or a ‘class
style’? If it is a style what tag do I give it? In TinyMCE do I
select the text, hit “unordered list” and then select the
appropriate ‘style’? or can I simply select the text and then the
appropriate “paragraph” style?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Hi Max

Thanks for your help.

I’ve written a CSS style for my bullet points and given it the tag “li”. In TinyMCE I’ve selected the text I want to be bullet points and hit the unordered list button. Then with the text still selected gone to the ‘paragraph’ styles drop down and expected to find my “li” style - but it isn’t there.

So, I’ve created a ‘text’ style. This appears within the ‘text’ styles drop down menu in TinyMCE.

Is this the correct way to do this?

See http://www.mylifestorybook.co.uk/how-it-works.php

Thank you

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Max

Another question you might be able to help me with.

I’ve created CSS styles for h1, h2 and h3. Is there any way I can remove the h4, h5 and h6 styles from the rich text editor paragraph styles, so that the client can not use them?

Can I also remove the “address” and “preformatted” styles from the paragraph styles? What are these styles?

Why do these styles exist when they are not included in my CSS styles?

Thank you

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Hi Mark as far as the h4 h5 and h6 plus the address then these are the default style that ships with tinymce what you do when you create your own style sheet is override these default styles with your own, as far as removing them then I am assuming there in tinymce code somewhere but I have never actually hunted them down to remove them.

what I would do is is create a special style purely for lists that get used automatically whenever you have a list within a tinymce panel. If you can wait till I get to work I can send you an example

Kind regards Max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Hi Max

Thanks for your reply.

I created a style within FW with the “li” tag for my bullet points. I obviously couldn’t apply it as a style in the rich text editor because I didn’t include this style within my web_yep_styles.css document. However the unordered list was automatically styled by my “li” style. This is great, but the list within my CSS Menu was also given bullet points.

So I’ve scrapped that idea and written a “.BulletText” (character) style for my web_yep_styles.css document. This style appears in the (character) styles drop down and works fine at styling the bullet points.

See http://www.mylifestorybook.co.uk/how-it-works.php

Is this the way you would do it?

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Hi Mark
1st off, if you have got it to work and your happy then thats fine.
I probably wouldn’t have done it like that, I would have added a class reference to the bullet style so it only effected lists within within a div that contained that class, but thats irrelevant as long as it works for you, then thats fine

All the best max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Hi

I’ve created a CSS style in my Web Yep CSS style sheet. It’s called “p.halflinespace” for body text that has a half line space after it. I expected this style to show up in the (paragraph) style menu but it doesn’t.

How can I create a (paragraph as oppose to a character) style that shows up in the paragraph style menu?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Hi mark just take the p off p.halflinespace and then it should show up in your styles.

all the best max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Sorry about all of this and thank you once again for all your help.

I’ve removed the “p”. The style shows up in the (character) style menu, not the paragraph style menu.

I’m surprised. The style has paragraph formating (line height etc) so I’d like it to show up in the paragraph style menu with my p tag style and heading styles. Am I missing something?

See http://www.mylifestorybook.co.uk/

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

Hi Mark I don’t know how you put those styles in as its embedded within tinyMCE somewhere you can have paragraph attributes within the these classes too
speak soon max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options