I’m using the included Kiki theme with RW7, Stacks 3. I have a three-column stack on a Stacks page. Inside each of the three columns is an image, and below that a static-height stack (WDS) and inside that stack is a text stack. I can’t figure out how to change the appearance of the text. l edited it to remove a link, and can’t make it match. If I select the text in edit mode, and choose the center icon at the bottom of the screen, the text is centered … but as soon as I go to Preview, it’s left-justified. The two sentences run together, though I’ve twice selected the text, selected “clear formatting”, removed the line return and formatted as paragraphs.
Any ideas what I’m doing wrong? Here is a screen shot of the edit window:
This is just the most recent frustration. I find that sometimes when I select text, the formatting icons at the bottom of the screen are not present or don’t work, and sometimes the options under “Format” in the menu work when they don’t.
One problem is I can’t figure out what fonts/sizes are already in use. For example, selecting the text and going to Inspector simply shows styled text with default Master settings. Is there some way to determine exactly what font, size, etc. is being used in a text box?
Sorry, at the time I asked I didn’t have anything uploaded and was looking at the pages on the local MAMP server. The theme (Kiki) is a responsive theme and does a good job of arranging the content on different devices. What I’m having an issue with is within the edit pane of RapidWeaver. All text is plain text, formatting removed, and I try to do all the editing for appearance using HTML - paragraph, heading 3, etc. instead of formatting individual blocks of text. But there’s some disconnect with how things like “center” are applied. In the example above, I have text in a text stack. I highlight the text, center it using the icon or the menu, the text centers. But as soon as I move the focus off the text (deselect it) it goes back to left-justified. And it’s not all the time, some things work as I expect and some are just impossible.
I just published the site to a different server (need to update DNS) and it shows the problem. If you look here: http://www.ruraleclectic.com/ in the text under the picture of the young macaw (above the Secrets 101 button) you can see that it is left-justified and not centered in its column. Same with the “It’s an emergency” text near the bottom - I can’t get it centered in the column.
I wonder if there are just scraps of HTML left uncleared from multiple edits, and I just have to delete and re-create the column.
I’m not sure what is going on but the left paragraph has no styling like the middle one has. (see screenshot).
If you tried to apply styling and it isn’t working for some reason, I would:
I’m not quite sure what the source of the issue is, but the first screenshot shows the left column is left justified – both in Edit mode and Preview. And the right column as center justified – both in Edit mode and Preview. So… it’s behaving as one might expect it to.
And further, as @swilliam mentioned above, from the code shows the exact same thing is present on the published site: the left column seems to have no styling applied and so is left justified and the right column has center justification applied – given the screenshots above – this is exactly what I would expect to happen.
What is confusing is when you say, “choose the center icon at the bottom of the screen, the text is centered” – this is not really shown in your screenshots. My assumption is that it only appears this way temporarily while the text is selected. But as soon as you deselect the stack it jumps back to left justification – like the screenshot. Is that the case???
@swilliam always provides rock solid advice. And his advice here is no different: completely retype this text from scratch. In fact replacing the stack first with an empty one wouldn’t hurt either. This is, I would hope, completely overkill. But will certainly work. And get you moving forward again – probably much quicker than anything else.
However if you’d like to get to the bottom of the problem and understand why it is happening, please feel free to send a copy of the file (or even just the page – or even just this one stack) to YourHead support. I’ll take a look and I should be able to tell you with 100% certainty why things have gone sideways with this stack.
I suspect that the problem is some hidden character or embedded code, and that deleting and re-creating the stack will fix the problem. I’ve run into this on other pages, though, which makes me think it’s not just a one-off thing but some actual thing.
Here are more screenshots and details.
Below - I opened the project, the home page is displayed. The left-most column has a different (smaller) font. The bottom of the window shows the Alignment icon at “left”. No text is selected or highlighted anywhere in the window - I just opened the file and took a screenshot.
Second image, below: I double-clicked the text in the left column to select it. Hmm, looks like it’s centered to me, and a larger font to boot. The Alignment icon shows “centered”. This is how it came up, I didn’t do anything but double click the text.
Below: This looks identical to the screenshot above, but what I did was select the text (which turned the green highlight darker), click the Alignment icon to left-justify - the text left-justified … then I clicked the Alignment icon back to center - the text re-centered.
I clicked outside the stack - on the background between images. The text in the stack immediately reverted back to the smaller font, left-aligned, and the Alignment icon reflects that. I don’t know what I’m doing wrong. Before, I tried selecting all the text in the stack, removing the formatting, applying paragraph format, etc. and nothing made any difference at all. I finally gave up and published the site, because I really wanted to get it live before midnight. My next step will be to delete the whole three column stack and recreate it.
The static height stack I’m using is from White Duck Stacks and not from YourHead. I really wanted to fix the three columns at a uniform height and that’s the only way I could figure it out. Next year … no wait, this year … I’ll switch to the Foundation theme and stacks and rebuild from scratch. But I wanted to get something up quickly.
See how the text is highlighted in pale green. This is the indicator that RapidWeaver uses when there is an HTML Style applied to this text.
This is part of RapidWeaver as a whole – the same green will appear on a Blog page and a Styled Text page too. In fact, this entire post and all the recommendations I give here can be equally applied to any other page in RapidWeaver. Stacks just inherits this behavior from the main app.
What’s happening:
Whenever you apply an “HTML Style” the green highlight appears. It’s likely that you applied one of the HTML styles from the HTML popup button (or the Format > HTML menu) at some point and perhaps didn’t notice or didn’t realize that’s what was happening.
Why:
Why do other styles get ignored after this? I can’t say. I don’t have a developers insight on that question as I can’t see the code for this bit. In this stuff, I’m just a user like you… but I can say that mixing HTML styles and other types of Styled Text styles (like font size adjustments) usually doesn’t produce perfect results.
To get things back to normal:
Just select the text and choose None from the the HTML popup. I would probably recommend clearing other formatting as well, so choose Clear Formatting from the Format menu too. This should get you back to ground zero and I expect things will behave a bit more normally afterwards.
One more thing:
Look out for pink highlighting too. Pink means that you’ve selected the text and chosen the Format > Ignore Formatting menu option. This does just what it says on the tin: it ignores any formatting. You can clear that one by selecting the text and choosing the same menu. It will toggle the pink back off.
A bit more nerdy detail on HTML formatting:
Each HTML style adds the HTML tag with the corresponding name. So a Code style adds the <code> and </code> tags and a Paragraph style adds the <p> and </p> tags. However these tags come with baggage. Any CSS styles that your theme or the stacks on your page adds that target those tags will be applied directly to this text too. And some tags, like <code> come with additional implicit browser behaviors that ignore some styles within them.
What that means to you – is that whenever you see the green highlight many other styles are being applied to this text, so it’s best just to leave that bit of text to your theme or remove the green first if you want to control the style yourself.
I was trying to be good with my work, so instead of using paragraph returns and multiple spaces to separate text, I was highlighting it and selecting the paragraph tag from the HTML drop down in the menu. I assumed that this way, if I changed the theme later, I wouldn’t have to go back and reformat the text. What you say makes perfect sense …. I’ve also been scratching my head as to why sometimes text will display as bold in the edit window and not in the preview window, and then sometimes work perfectly. I bet good money that the times it worked, I applied the bolding and then the paragraph formatting.
I didn’t realize that RW handled text formatting the way it does. Now that I read your email, I find all sorts of information about this online. Sounds like I need to go back and redo the formatting in most if not all the text so it’s consistent, and use the RW tools instead of HTML.
I’m very old school, on account of I’m old, brought up on change-the-html-don’t-just-paste-in-formatting beliefs. I bought Joe Workman’s RW book and worked through it - granted, it’s written for version 5, but he didn’t have an updated one - and he also stressed the importance of formatting paragraphs using the html code and not by pasting them in.
Thanks again for taking time to respond to this. You’re helping parrots.
that advice from Joe’s book is solid. but you have to pay a lot of attention when mixing HTML styles and styled text styles – they don’t always place nicely together.
i think if you’re trying to keep yourself to strict theme styling a good plan is to use Markdown stacks instead of Text stacks. they generally work everywhere a text stack does and – while allowing you to apply styles like Bold, Italic, and emphasis with headers – they don’t ever allow RW’s styled text system to get mixed in.
personally i use markdown for just about everything. it’s pretty great.
Oh, it’s all totally my confusion, Joe’s book is excellent. I wish I’d bought it years ago. I’ll see about redoing the text with Markdown stacks, then I don’t have to remember not to screw it up.
But will certainly work. And get you moving forward again – probably much quicker than anything else.
