FreewayTalk
27 replies to this thread. Most Recent
question about styles in (dynamic) MarkUp element
Hi
I cannot find anywhere in manual nor in any CSS tutorial the solution for this minor problem. It’s just too complex for me.
I develop this website, basics made in the demoFW5. The pages are dynamic, made possible by certain code-elements that pull info from the database. One of these code-elements generates a list with linksand has to be placed inside an inline MarkUp element in order to function in the page.
My problem:
I cannot style the links that get generated. They are now blue underlined, which I do not want. I tried the several methods which usual work , creating new styles with specific names, wrap the markup inside a HTML box with the linkstyle action, etc etc)
Please have a look here: http://www.atelier.box.nl/haal_op/Afbeelding_1.png the HTML code to be found here: http://www.atelier.box.nl/haal_op/
I know it’s possible to format these links, an exempel can be seen here: http://www.exaprotect.com/resources/newsletters (look to the right, where one can choose one’s language) They even put a nice flag there, not that i would want that, but still…
Can someone please explain to me what I need to do with Freeway to be able to control the looks of these links?
Thank you all very much
Hans
Hi Atelier,
Here’s an example using the code you posted http://anoptic.com/demo/atelier/index.html. Recreate the styles shown in my example in FW (edit as needed) and they’ll target the code in your markup item. Note that I’m assuming the naming scheme of the styles in the example you posted is in fact the same. If the style names are different then edit my styles as needed to match the markup.
If you’re unsure how to create these in FW and want the example FW Pro file let me know and I’ll send it off-list.
Todd
On Feb 27, 2008, at 4:36 PM, atelier wrote:
the HTML code to be found here: http://www.atelier.box.nl/haal_op/
Hi
Thanks for replying
Sorry to say that this does not work, or I do not get it.
When I create a new style with the name of ul.simpletranslator Freeway just takes away the dot, and the style-name becomes ulsimpletranslator just like that.
I tried this before myself with a style named simple-translator (like on the working page I showed in my post, they have there: <ul class=”simple-translator”) but FW just takes away the underscore in the name. I’m really stuck here!
Sometime around 28/2/08 (at 02:05 -0500) atelier said:
When I create a new style with the name of ul.simpletranslator Freeway just takes away the dot, and the style-name becomes ulsimpletranslator just like that.
Try putting “ul” into the tag field and “simpletranslator” into the name field. That should do the trick.
k
Did that, no result.
I figured something out:
Two things:
1) Freeway can only generate a ul class like this:<ul class=”simpletranslator f-fp f-lp”> but the element in my page needs a class like this: <ul class=”simple-translator”>
2) The page (=the HTML that has been made by by Freeway) gets, because of the way this dynamic system works, modified on the server. The software there creates quite a lot of code from just one piece of code in my Freewaypage.
That piece of code is {exp:translator:simple} and it becomes:
<ul class="simple-translator"><li class="selected first"><a href="http://www.monumentmaker.nl/tempindex.php/mm/menu/lang/default/" title="Nederlands">Nederlands</a></li><li><a href="http://www.monumentmaker.nl/tempindex.php/mm/menu/lang/_se/" title="Svenska">Svenska</a></li><li class="last"><a href="http://www.monumentmaker.nl/tempindex.php/mm/menu/lang/_en/" title="English">English</a></li></ul>
Very ennoying that Freeway does not allow me to have a “-” in the word. FW alters in the style-menu simple-translator —-> simpletranslator….!!
Just thinking, maybe the only solution to place the CSS manually in the page? Where should I do that? And how should it look like?
thanks….
(what is the reason of this green field in the preview in this message?
Will removing the ” - ” from the markup break anything? If not then just remove it and the FW style will match the markup style which is what I did.
BTW, I just sent you my example FW file.
Todd
On Feb 28, 2008, at 9:25 AM, atelier wrote:
1) Freeway can only generate a ul class like this:<ul> class=”simpletranslator f-fp f-lp”> but the element in my page needs a class like this: <ul class=”simple-translator”>
removing the ” - ” will break the code. Unless I hack the backside. But then if I download an update, I must go to that file again. And I must update other installations as well.
(thanks for sending me the file, very kind of you)
OK, then what about either adding the styles manually (with ” - “) into the Head tag or putting just those mark-up styles into a separate stylesheet and linking to it from FW?
Todd
On Feb 28, 2008, at 9:42 AM, atelier wrote:
removing the ” - ” will break the code. Unless I hack the backside. But then if I download an update, I must go to that file again. And I must update other installations as well.
(thanks for sending me the file, very kind of you)
I would modify your server code to use an underscore or some other divider, like InterCaps, because Freeway is being cautious for a reason.
Walter
On Feb 28, 2008, at 10:25 AM, atelier wrote:
Very ennoying that Freeway does not allow me to have a “-” in the word. FW alters in the style-menu simple-translator —-> simpletranslator….!!
Just thinking, maybe the only solution to place the CSS manually in the page? Where should I do that? And how should it look like?
thanks….
(what is the reason of this green field in the preview in this message?
There is quite a lot of trickery going on server-side to deduce when you are trying to enter code. The formatter tries very hard to make a nice-looking code block for you when you do that. If you want to be explicit about it, make sure you enter at least four spaces before each line of code you want to display. This will cause the following to happen:
Your text will be broken into lines exactly how you type it
Indenting will just work
<special characters> will appear correctly, instead of being
stripped out as if they were a clumsy hacking attack
You get a nice box around the code example, which shows it off nicely.
If you have a really really really long line with no returns,
the text will scroll horizontally without breaking the page layout.
Walter
Freeway user since 1997
This is something else I’ve wondered about. Why doesn’t FW allow dividers in styles?
Todd
On Feb 28, 2008, at 9:54 AM, Walter Lee Davis wrote:
I would modify your server code to use an underscore or some other divider, like InterCaps, because Freeway is being cautious for a reason.
You could do either of those. Make your external stylesheet in CSSEdit or similar, and then open the Page : HTML Markup dialog, switch it to the Before /HEAD section and add the following:
<link rel="stylesheet" href="path/to/your/style.css" type="text/css" />
If you are using a non-strict DOCTYPE, then remove the trailing slash before the closing bracket above.
Use an FTP app to upload the new sheet into your server. Make sure that you get the path correct, because links like this fail silently. I would take a look at the code that Freeway publishes when it is set to use external stylesheets. If you switch that on in the Document Setup : Output tab, you’ll get a nice example of what you need. Then just tuck your extra stylesheet into the same /css folder that Freeway creates at the root of your site.
If you want to add the CSS inline, then follow the same instructions above, but put:
<style type="text/css">
//your styles here
</style>
in the Markup dialog.
Walter
On Feb 28, 2008, at 10:51 AM, Todd wrote:
OK, then what about either adding the styles manually (with ” - “) into the Head tag or putting just those mark-up styles into a separate stylesheet and linking to it from FW?
Todd
On Feb 28, 2008, at 9:42 AM, atelier wrote:
removing the ” - ” will break the code. Unless I hack the backside. But then if I download an update, I must go to that file again. And I must update other installations as well.
(thanks for sending me the file, very kind of you)
Freeway user since 1997
Because it might want to fool with them later using JavaScript, which interprets the hyphen as a minus operator. That’s just a guess, I’ll rely on other more connected heads to tell me if I’m guessing correctly.
Walter
On Feb 28, 2008, at 10:58 AM, Todd wrote:
This is something else I’ve wondered about. Why doesn’t FW allow dividers in styles?
Todd
On Feb 28, 2008, at 9:54 AM, Walter Lee Davis wrote:
I would modify your server code to use an underscore or some other divider, like InterCaps, because Freeway is being cautious for a reason.
Freeway user since 1997
OK, I got it.
I’ll use the inline CSS, to make it easier to keep changing my pages. (Another option would be asking the creator of this simple -translator to remover the ” - ” in the code. :~)
Thanks a lot, all of you for your reactions, a lot of questions were answered!
best regards
Hans
Now that’s the best idea yet.
Todd
On Feb 28, 2008, at 11:05 AM, atelier wrote:
(Another option would be asking the creator of this simple - translator to remover the ” - ” in the code. :~)
Sorry to have come to that thought so late….;~)
And I wanted to tell that I managed to get it working……
And thank you again for sending me the FW file, because I could see there what can be done with that Style menu.
Hans
I’m glad you got it working; it usually helps to look at the problem in the proper context (FW file) though it would have been simple if FW allowed dividers ( - ) in styles. It’s funny how little things like this can really screw with something so simple like creating a style.
Todd
On Feb 28, 2008, at 11:30 AM, atelier wrote:
Sorry to have come to that thought so late….;~)
And I wanted to tell that I managed to get it working……
And thank you again for sending me the FW file, because I could see there what can be done with that Style menu.
It would be useful if there was SOME kind of safe character that could be used as Separator - though I UseCapsLikeThis as next best thing. regards Brian
Walter Lee Davis said recently:
Because it might want to fool with them later using JavaScript, which interprets the hyphen as a minus operator. That’s just a guess, I’ll rely on other more connected heads to tell me if I’m guessing correctly.
Walter
On Feb 28, 2008, at 10:58 AM, Todd wrote:
This is something else I’ve wondered about. Why doesn’t FW allow dividers in styles?
Todd
On Feb 28, 2008, at 9:54 AM, Walter Lee Davis wrote:
I would modify your server code to use an underscore or some other divider, like InterCaps, because Freeway is being cautious for a reason.
I do hope some code-expert can help me out with this one too.
I tried to validate the page, and it seems that the output is not correct.
This is the error:
Line 142, Column 34: document type does not allow element “ul” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag.
<p><ul class=”simple-translator”><li class=”selected first”><a href=”http://ww ✉ The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.
On this page:
http://www.monumentmaker.nl/tempindex.php/mm/testmm/
(and please be gentle with me, this is just a testpage… :-)
As I explained above, I must accept the output of the element, because it gets generated by the server. Is there a way in FW to avoid this error? Must I add something in the CSS in the page-markup?
(I tried of course to embed the code-element in the page itself but that gives other problems. Cannot do that.)
Sorry to bother you with something that might be totally irrelevant for most of the FW users…..
Hans
Somehow, you have an unordered list (bulleted list) inside a paragraph. Did you do this directly in Freeway, or did you use a markup item or another hand-coding trick?
Walter
On Mar 1, 2008, at 4:56 AM, atelier wrote:
I do hope some code-expert can help me out with this one too.
I tried to validate the page, and it seems that the output is not correct.
This is the error:
Line 142, Column 34: document type does not allow element “ul” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag.
<p><ul class=”simple-translator”><li class=”selected first”> href=”http://ww ✉
Freeway user since 1997
I did not do the list myself in Freeway, the list gets generated after I publish and put things on the server.
It’s not easy for my to explain what happens here, because I do not “speak the code language” I can only explain it like I understand it myself….;~(
In short:
I have in my FW page an inline MarkUp element. This Element is just one word, it’s a piece of code. That piece of code calls from the server the list that you see in the HTML. I had an issue with styles, I got a lot of help here, so I use this extra piece of CSS information in the Page MarkUp and my style problem is gone. That was great. But now I see that the page does not get validated (one error), and I think that it’s is important to have things right.
I noticed that another page -using the same code- http://www.exaprotect.com/resources/newsletters also does not get validated, and for the same reason (as you see there are some more errors…..) So I wrote the author of the plugin about this. Maybe he’ll fix this in an update? You can see my post here: http://expressionengine.com/forums/viewthread/51959/P108/#361514
But in the meanwhile I asked my question here as well, hoping for a FW solution.
What about using the Remove Paragraph Tag action on the element? That action is very useful (essential, even) when integrating some, if not all, CMS into FW.
Todd
On Mar 1, 2008, at 7:16 AM, Walter Lee Davis wrote:
Somehow, you have an unordered list (bulleted list) inside a paragraph.
What about using the Remove Paragraph Tag action on the element? That action is very useful (essential, even) when integrating some, if not all, CMS into FW.
Todd
On Mar 1, 2008, at 7:16 AM, Walter Lee Davis wrote:
Somehow, you have an unordered list (bulleted list) inside a paragraph.
That would be perfect, as long as there isn’t any additional text in the same box that needs to have a paragraph wrapped around it.
I have worked around this particular problem using an Action called CrowBar. If you want to give it a try, it’s in my repository. Apply it to an HTML box, select beginning or end, and then enter your code in the Code dialog. If there is any content within the box, your code will be shifted in either before or after it, outside of any tags that might already be in there.
Walter
http://freewaypro.com/actions/downloads/
On Mar 1, 2008, at 10:19 AM, Todd wrote:
What about using the Remove Paragraph Tag action on the element? That action is very useful (essential, even) when integrating some, if not all, CMS into FW.
Todd
On Mar 1, 2008, at 7:16 AM, Walter Lee Davis wrote:
Somehow, you have an unordered list (bulleted list) inside a paragraph.
Freeway user since 1997
Hey Walter, that’s pretty slick. Is it new?
You know, rolling Weaver’s Remove P Tag action and yours together would be wickedly useful for CMS integration. Make CrowBar a sub- function of RPT which could be enabled as needed.
Todd
On Mar 1, 2008, at 12:13 PM, Walter Lee Davis wrote:
Apply it to an HTML box, select beginning or end, and then enter your code in the Code dialog. If there is any content within the box, your code will be shifted in either before or after it, outside of any tags that might already be in there.
It’s been around since 2005. I just started working today on a version that could be put inline, so you could put your markup in the middle of a block of text and still get the code outside of any P tags.
What I’m imagining is that you could have a paragraph, then a lump of code that makes a UL, then another paragraph, and not end up with your UL wrapped in a P tag.
Walter
On Mar 1, 2008, at 3:42 PM, Todd wrote:
Hey Walter, that’s pretty slick. Is it new?
You know, rolling Weaver’s Remove P Tag action and yours together would be wickedly useful for CMS integration. Make CrowBar a sub- function of RPT which could be enabled as needed.
Todd
On Mar 1, 2008, at 12:13 PM, Walter Lee Davis wrote:
Apply it to an HTML box, select beginning or end, and then enter your code in the Code dialog. If there is any content within the box, your code will be shifted in either before or after it, outside of any tags that might already be in there.
Freeway user since 1997
Walter, thank you really very much for this action. I tried it out, and the result is good, that is to say, my page passes through the validator. But now I find myself in the same spot as before, my page is not readable by MSIE 6 nor 7.
And very strange that the text does not grow when I enlarge text in the page (Safari 3.0.4, under 10.4.11). I did not have that when the code was in the embedded MarkUp element.
Settings for the HTML box are: overflow visible, but I see in the source
<div id=”translatorsimple” style=”position:relative; width:145px; height:70px; padding:10px; overflow:hidden; font-size:1px”> <ul class=”simple-translator”><li class=”selected first”>Nederlands</li><li>Svenska</li><li class=”last”>English</li></ul></div>
Hope to hear from you
Hans
@Todd
I created an inline MarkUp element with the code in it, and attached TimPlumb’s remove paragraph action to it. No good validation, but the text becomes larger in the browser when enlarging text.
Then I also attached also Crowbar to this element. No good validation.
Then I took away the code in the MarkUp element, and did put the code into Crowbar. No good valitation.
This was my testresult. Page with the latest change can be seen here: http://www.monumentmaker.nl/tempindex.php/mm/testmm/
Thank you for looking at it.
In the meanwhile (back at the ranch) a lot has happened.
Todd was so kind to help me out with some valuable tips. I did some experiments, and found the following methode a workable solution:
I used the extension for EE called Simple Translator, to create a multi-lingual dynamic site http://expressionengine.com/forums/viewthread/51959/ and in order to make it work in the FW file that I use as EE template I have made:
1) inline HTML element, with values for height and width, overflow visible 2) the EE code element as text in this element, no style attached 3) Remove-P-tag action to this HTML element.
Result, after processing by Expression Engine the validation was OK, the text grows (as expected), the language code element works fine, and MSIE 7 shows page correctly. (only MSIE 6 makes soup of the FW CSS menu ;~)
Note: If the HTML box is set to: no width, no height, then MSIE shows nothing, Safari 2.0 shows nothing. Safari 3 shows correct, so does Opera (Windows) etc etc. Quite a lot of difference there.
I do hope this helps others that want to combine FW with Expression Engine. BTW I find the action written by Joe Muscara extremely useful for this purpose. http://t2studios.com/freeway/more.php?id=76_0_1_0_M
Thank you all for the advise
best regards, Hans
