WYSIWYG editing HTML & CSS in SM?

Teetime · September 2, 2015

I would like to do some basic formatting of text for my bio page. Things like headers, lists in italics, etc. I don't think it would be too daunting. But anticipating I may have more sophisticated needs down the road, is there a preferred free WYSIWYG html/css editor that would work well for this? I'm a little surprised it isn't built into SM (or maybe it is and I've missed it?).

Thanks,

Jerry

AceCo55 · September 3, 2015

You could have a look at this one:
http://kompozer.net/

Teetime · September 3, 2015

AceCo55 wrote: »

You could have a look at this one:
http://kompozer.net/

Thanks, I looked at that and may use it in the future. For now, I found the SM HTML/CSS editor easier than I anticipated.

Jerry

ChancyRat · September 3, 2015

Not having HTML or CSS code training, I've not understood what rules SM has set up for what HTML is allowed and what/when CSS is required. Back when I was getting my New set up, many of the Old html galleries were broken in New. Lots and lots of CSS had to replace lots of HTML, but, I never understood the parameters. I do recall using Dreamweaver at first, but even though I was careful about pulling out just parts of the code inside body, the code broke in SM. I went back to using Notepad++ in conjunction with the SM HTML content block. Very painful.

I love this thread asking is there a WYSIWYG editor for SM. My question would be, based on my experience trying to use Dreamweaver (and I did try in multiple ways), does the editor work with SM's new code requirements for HTML and CSS. If someone has direct experience of "yes", oh, please share.

Allen · September 3, 2015

When editing a HTML widget you can see the effects as you type. Might have to scroll page to see
the part you're working on behind the widget.

ChancyRat · September 3, 2015

Allen wrote: »

When editing a HTML widget you can see the effects as you type. Might have to scroll page to see
the part you're working on behind the widget.

This is true and very useful. The limitation is the size of the working area, about 4 inches by 4 inches, and not re-sizable. Sometimes I can stay in the HTML block, but sometimes I need to see much larger sets of code.

If SM allowed resizing of the HTML/CSS content block - WOW.

Allen · September 3, 2015

ChancyRat wrote: »

This is true and very useful. The limitation is the size of the working area, about 4 inches by 4 inches, and not re-sizable. Sometimes I can stay in the HTML block, but sometimes I need to see much larger sets of code.

If SM allowed resizing of the HTML/CSS content block - WOW.

I had resized some of mine especially on Pages with big blocks.

I usually copy it out to a text file and do big editing there. Then paste back in.

On this big page I use this.

/* start edit box */

    /*css public index */
.sm-overlay-container .sm-page-widget-inspector-panel {
  width: 920px!important;
}

    /*css public index */
sm-page-widget-inspector-panel .sm-panel-content .sm-tabs-content {
  width: 920px;
}

ChancyRat · September 3, 2015

I'm not following this, Allen.
How did you resize "some of yours"? You resized the SM HTML block?
Yes, I copy to Notepad++, then paste back in.
You mentioned a "big page", but there is no link.
And I don't understand the code ["start edit box"], what it does or why it's useful for a "big page".

Allen wrote: »
I had resized some of mine especially on Pages with big blocks.

I usually copy it out to a text file and do big editing there. Then paste back in.

On this big page I use this.
/* start edit box */

    /*css public index */
.sm-overlay-container .sm-page-widget-inspector-panel {
  width: 920px!important;
}

    /*css public index */
sm-page-widget-inspector-panel .sm-panel-content .sm-tabs-content {
  width: 920px;
}

Allen · September 3, 2015

ChancyRat wrote: »

I'm not following this, Allen.
How did you resize "some of yours"? You resized the SM HTML block?
Yes, I copy to Notepad++, then paste back in.
You mentioned a "big page", but there is no link.
And I don't understand the code ["start edit box"], what it does or why it's useful for a "big page".

This Page. "Just This Page" CSS block is where the CSS goes.
You can see on the screen print how wide the box is, about 10" wide on my monitor.
http://www.photosbyat.com/Public-Site-Index-NS2/n-6dSMX

ChancyRat · September 3, 2015

:ivar

Where's OMG when one needs it!?

Can this code go in site-wide so I get a better window everywhere?

Allen · September 3, 2015

ChancyRat wrote: »

:ivar :ivar :ivar

Where's OMG when one needs it!?

Can this code go in site-wide so I get a better window everywhere?

I would be very careful with that. I think all the pages you need it on are Pages already set to "Just
This Page" which should have a CSS box at the bottom for "Just This Page". Be easiest to just paste
into each page where you need it.

Start with a small width, could be a problem if part of the box is off the page. I had to go into WebDev
and edit the CSS to fix it on the fly.

Allen · September 3, 2015

I'm wondering if a percent width would work so it'd adjust to the window?
hehe - does!

ChancyRat · September 3, 2015

Wow, this is an example of the code, comparing the default (top), to code + 75%. THANK YOU

ChancyRat · September 3, 2015

Allan? How about changing the height of the window?
This does nothing to the height of the box.
Nor did changing the percent to 110%.

/* start edit box */      /*css public index */ .sm-overlay-container .sm-page-widget-inspector-panel {   width: 75%!important;
  height: 75%!important;
 }      /*css public index */ sm-page-widget-inspector-panel .sm-panel-content .sm-tabs-content {   width: 75%;
  height: 75%;
 }

Allen · September 4, 2015

ChancyRat wrote: »
Allan? How about changing the height of the window?
This does nothing to the height of the box.
Nor did changing the percent to 110%.
/* start edit box */      /*css public index */ .sm-overlay-container .sm-page-widget-inspector-panel {   width: 75%!important;
  height: 75%!important;
 }      /*css public index */ sm-page-widget-inspector-panel .sm-panel-content .sm-tabs-content {   width: 75%;
  height: 75%;
 }

I originally had height in there but it was complicated because of the double scroll bars and the
two buttons at the bottom. I think this was before the box was movable and experimenting got the
bottom buttons hidden so could not get box closed. Had to use WebDev to tweak CSS for the height
to close box.
I'd rather see some space above and/or below so I can watch box as html changes are made.

WYSIWYG editing HTML & CSS in SM?

Comments