css and formatting

Greetings.

I am working with JW Player and I need some css help on the way text displays in a non-attached playlist. For instance:

www.mrwebstuff.com LOOK AT THE PLAYER ON THE BOTTOM OF THE PAGE:

This is accomplished in Freeway pro with a MARKUP ITEM. Can text lists in the markup item be formatted? Here is the script for the side panels that trigger the videos and audio mp3 files to play:

The idea is to put everything in playlists on the side, trigger the playlists to move with Carousel action and panes triggered by the TAB button on the left, move with carousel action and trigger the player with the titles.

You can see the way the text displays in the side and this is what I need to change. I want to be able to vary font, color, size, alignment, etc., as well as allowing the boxes to be scrolling lists, so I can keep everything nice and compact.

Can this be accomplished in a MARKUP ITEM, and within a Carousel?

Thanks for the help.

Rich


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

FOR VIDEO PLAYLISTS…


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

CSS styling can be applied to anything on your page - it just has to be targeted correctly.

If you do a basic page and indicate how/what you want styled then one of us should be give you some styles to get you started.

David


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

David,

Thanks. Did you get a peek at the videos page

www.mrwebstuff.com

and check out the bottom of the page player?

Thanks,

Rich


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

Yes

and check out the bottom of the page player?

What am I looking for - I just see a bulleted list

D


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

Hi Rich,

Seeing as you are pasting the list code in a Markup Item, you actually have
a lot of CSS control. I don’t know what your skill levels are, so forgive
me if I describe this rather basically.

Assuming you want to style the lists similarly, let’s start by grouping
their styles into a class set. First, choose a name for the set then open
the Markup Items and apply it to all of the list tags (ul) like this:

  <ul class="myclassname">

Now, our CSS will target all these lists, and only these lists.

The next step is to choose between an EASY METHOD or an ADVANCED METHOD of
creating styles for the lists. First, the EASY method:

In your same Freeway Pro document create a New Page and title it Resources
or something like that. Draw a layered html box and type in one of your
lists. Using the List pane of the Inspector to indent your list, thus
actually creating a list structure. Choose ‘Round Bullets’ from the list
style (if you want no bullets, still choose round bullets for now and we’ll
fix it a little later). You will see in the Styles pane that Freeway Pro
has created a new temporary style for your list. Edit that style by opening
the Style Editor window and selecting it. Tick the box to make it
permanent, then change the Name to the same name that you chose for your
class name. Now set the Font, Color, Size attributes for your list in this
style – DO NOT try to set spacing or margin attributes like paragraph
attributes here, that will take a second style. If you want to remove the
bullets, open the Extended Style interface and create a new attribute -
list-style - with a value of - none. If you also want to remove the left
indent, then you can simply use the Left Indent setting in the Style Editor
under the Paragraph attributes (I know, I said NO paragraph attributes yet,
but this one is okay).

Now, the last step of the EASY method is the hardest, and only applies if
you want to set specific paragraph attributes like spacing after the list
items (li are the html tags for ‘list items’). You must create a new Tag
style… do this by creating a new style then let’s name it in a way that
targets the specific list item tag. In the Tag field of this new style,
first type the name of our list class group PRECEDED BY A PERIOD (or STOP
if you are not yet American) then follow with a space and finish with the
letters li (lowercase LI for “list item”, like this,

  .myclassname li

and make sure to backspace out the auto-generated name in the Name field so
it is empty. Now feel free to set the Space After attribute to open up the
space after each line. Close and preview. Adjust as necessary.

With this method you must leave this new page intact, or Freeway will not
apply the style. There are ways around that, but this lesson is long enough
already. :slight_smile:

With the ADVANCED method you do not create a new page or list, you simply
create the styles in the Style Editor just like the last step of the EASY
method. The biggest difference is making BOTH styles as Tag styles (DON’T
forget the leading period or ‘stop’ and backspacing the Name field clean).

Try this out and let’s see if we can fix your problem.


Ernie Simpson

On Sat, Jan 12, 2013 at 9:48 AM, sampolfonz email@hidden wrote:

FOR VIDEO PLAYLISTS…


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

Ernie,

Thanks much. I will be back at my computer tomorrow to get to try some of what you have suggested. And you are right, I need to start with the simple stuff.

I will post more when I have it up and rolling.

Thanks again,

Rich


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

Ernie,

Okay, I’m stuck at step one.

let’s start by grouping their styles into a class set. First, choose a name for the set then open the Markup Items and apply it to all of the list tags (ul) like this:

    When you say “open the markup item” what do you mean? and apply it to all of the list tags (ul). Where do you do this? Do I highlight all of the text and apply some kind of styling?

    Let’s start here.

    Thanks,

    Rich


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

Hey Rich,

You previously indicated the player code was added through a Markup Item,
so we can edit that markup item. Open it and change the first line

  <ul>

to

    Try that then let’s work out the rest.


    Ernie Simpson

    On Tue, Jan 15, 2013 at 6:49 PM, sampolfonz email@hidden wrote:

    Ernie,

    Okay, I’m stuck at step one.

    let’s start by grouping their styles into a class set. First, choose a
    name for the set then open the Markup Items and apply it to all of the list
    tags (ul) like this:

      When you say “open the markup item” what do you mean? and apply it to all
      of the list tags (ul). Where do you do this? Do I highlight all of the
      text and apply some kind of styling?

      Let’s start here.

      Thanks,

      Rich


      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

Okay, Ernie. Thanks for clarifying.

I made the change and followed the instructions from the EASY method. It did make some changes, however it didn’t take the bullets away, it only made them red, it did change the font, and it didn’t change the font color, only the color of the bullets.

And, it only changed the bottom playlist, not the top one, even though I changed the name in both cases.

Thanks for the help.

www.mrwebstuff.com

Thanks

Rich


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

Ernie,

Upon messing with it some more, I can get the font and font size to change by working with the font size in the style editor. And, I was able to remove the bullets, so that is good.

Still can’t get the color to change, or get rid of the underlines.


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

You have those items as links, hence the color and underlines. All links in
html are controlled by anchor tags.

Create a new style the same way you created .myclassname li and call it

  .myclassname a

Set the color using the Style Editor controls, then use the Extended style
editor to create a new attribute named

  text-decoration

with a value of

  none

That should fix those other issues for you.


Ernie Simpson

On Tue, Jan 15, 2013 at 10:37 PM, sampolfonz email@hidden wrote:

Ernie,

Upon messing with it some more, I can get the font and font size to change
by working with the font size in the style editor. And, I was able to
remove the bullets, so that is good.

Still can’t get the color to change, or get rid of the underlines.


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

Ernie,

A side note before I go back into my styling issues. How do you guys get the re-copying of the posts with the little green border on the right side? And how do the special noted items go in little mint green boxes? Is that a trick some where?

Okay, I think I’m getting this. The three styles
.myclassname …gets rid of the bullets

.myclassname a …gets rid of the underlines and changes font size and color

.myclassname li … sets the amount of space after each of the links

Why do there have to be different styles for each segment? Just curious…

And, this is the easy way? What is the purpose of creating the resources page and putting a list there?

Just trying to understand and grasp…

Thanks so much,

R


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

sampolfonz wrote:
A side note before I go back into my styling issues. How do you guys get the re-copying of the posts with the little green border on the right side? And how do the special noted items go in little mint green boxes? Is that a trick some where?

According to legend, all or most of FreewayTalk was built by a much younger Walter Davis, using only the psychic power of his mind - and a few specific software tools. One of these tools was Markdown, a tool for text formatting on the web.

To learn more about Markdown, you must seek the Dingus


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

Okay, I looked at the Dingus… It still doesn’t tell me how to put my quote behind the green line. Another time, I guess.

What is the purpose of creating the resources page? What references that list that shows the place where the classes are going to follow the specific styles?

If I choose to do them all as tags, where do I attach the tags to the specific items in the markup item?

Thanks for the help.

Rich


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

If you interact with the list via mail, you get this for free. When you reply to a mail message, the original message (or just the part you quote in your reply) will be set off from the rest of the part you write in reply by a right caret > and a space (or more). These can be nested pretty far, too. Markdown’s Blockquote syntax (or the Quote button below each message in the Web view) will give you this same effect.

There are other tricks hidden there, too. The code syntax highlighting, headers, links, etc. All of this is through the Markdown language, which is a deliberately restricted “plain text” syntax for writing HTML without tags, based on the “pidgin” styling tricks common in plain-text e-mail. Wrapping something in asterisks to make it bold or italic, using asterisks or numbers as counters in a list, underlining a header with a second row of hyphens or equals-signs – all of these were used for years to provide some visual spice to what used to commonly be (and still is, in my house) an ASCII-only zone.

Walter

On Jan 15, 2013, at 11:47 PM, sampolfonz wrote:

A side note before I go back into my styling issues. How do you guys get the re-copying of the posts with the little green border on the right side? And how do the special noted items go in little mint green boxes? Is that a trick some where?


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

on your styling issues…

CSS syntax - the words and their order - determines how the browser will
understand what we want to happen style-wise. For example, myclassname
is a made-up name we used to identify the group or “class” of objects that
we want styled – in our case, a bunch of unordered lists or <ul which we
targeted by adding class="myclassname" to the markup html. That’s the css
equivalent of saying “treat all these items in the same way”.

When we wrote the style attributes for myclassname we added a leading
period (stop) to the name. This is the css way of saying “this is a class
style, and it applies to any item with this class name”.

Because we wanted to set the margin-bottom attribute (space after) of
each item in the list - and not of the list as a whole - we needed a
special extension of our class style to include those list item elements.
Of course, you guessed it - .myclassname li is the css way to say “apply
these attributes to list items that belong to anything with this class
name”. Because <li> or list items belong to <ul>s that we
identified with this class name, they are affected by this style.

Lastly, the color and underlining of the list item text was affected by the
anchor <a> tags that had been applied to them when they were hyperlinked.
This would over-ride any other styling, so we needed a specific way to
address this. The easiest answer was to use `.myclassname a’ which of
course is the css way of saying “apply THESE attributes to any hyperlink or
‘anchor’ tags that belong to an element with this class name”.

It seems to me Rich that you are somewhat of a CSS newbie, but you did
great, and figured out how to follow my convoluted directions. I hope these
breakdowns help, but from now on every time you look at page code you’ll
begin to see more and more of how it works and makes sense.

Best wishes,


Ernie Simpson

sampolfonz email@hidden wrote:

Okay, I think I’m getting this. The three styles
.myclassname …gets rid of the bullets

.myclassname a …gets rid of the underlines and changes font size and
color

.myclassname li … sets the amount of space after each of the links

Why do there have to be different styles for each segment? Just curious…

And, this is the easy way? What is the purpose of creating the resources
page and putting a list there?

Just trying to understand and grasp…

Thanks so much,


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

Yes, Mr. Ernie. I am beginning to see, and I am a newbie at CSS for sure. I’m an old newspaper guy that did ad layout on Mac in the late 80s-90s, trying to move into the web world. Had a been a newspaper guy in the 70s and early 80s I would have known some of the coding, as I remember seeing the old Compugraphic machines from back then that relied on code and tags, but alas, I came in during the days of programs like DMS, Ready, Set, Go and Quark.

I am seeing these tags that you explained. Thanks so much. What does the RESOURCES page that you had me put the list on have to do with the tags created in styles?

Also, I’m experimenting with this test site

www.mrwebstuff.com

with video and audio for our church.

I’m still wanting to tighten up the spacing some in the text and I would also like to be able to have the scrolling boxes for longer text that what can be shown. Is that possible here?

Is there a way of putting my playable links side by side, instead of one after the other? If not, how would I tighten them up so there is not as much space between those items?

Lots of questions and I thank you for your help to me.

R


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

So, Mr Ernie,

How does the resources page with the list on it connect to the tags I have created on the main page?

Thanks,

R


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