[Pro] center elements in Responsive CSS Menu

Hello. Is this possible to have centered elements in the Responsive CSS Menu? I would like to have just the open icon, without the word, and the links to be align center, not at left or right like it is by default. I want the menu align center at the center of the page.

I have managed to put the button at center with left margin set 50%, but the links are right or left, so the lines broke… Going back to an example Richard vH gave in other post, it was maden like this, all centered… so its possible

Any idea? Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I have already put position:centered in all the ways I could… at extended in all the elements involved and at the styles palete, making tags with the div or class name (rcm-disclosure, menu2DTnoM,
rcm-page-name, responsive-menu) and at this extended button, position:centered as well, but nothing… I can feel there is a way… but hidden for me right now…

my testing link is http://www.i-tek.es/demoweb/cantemus/v2.php and Im on the menu at the right side, with the word “Proyectos”

Thanks in advanced


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Personally, I would just do it by adding some CSS before the page (I’m not like Ernie who uses the Edit Styles dialog for everything – I don’t have the patience).

  1. Go to Page > HTML Markup… > Before

  2. Paste this in:

     <style type="text/css">
         #navigation2DTnoM .rcm-page-name {
            display: none;
         }
    
         #navigation2DTnoM .rcm-disclosure {
           margin: auto;
           float: none;
         }
    
         #navigation2DTnoM .responsive-menu {
           text-align: center;
         }
     </style>
    
  3. Test!


freewaytalk mailing list
email@hidden
Update your subscriptions at:

works. Perfect. Thanks, thanks a lot.

A question, please (Im tryng to learn about CSS, but have not the foundations yet…):

If I wanted to do it throught the Edit Styles, should I make a style with this or make a Tag with nothing written at style)? Because I have maden a style called .responsive-menu (just with a name tag, not a name at style box) and in extended I have added text-align: center, and when I want to apply it to the menu it says that this can only be applied at text. I have tried other ways that didnt work as well, but the one I have just explained is the one that I thought was the most next to be correct…

Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Well… another thing. It works because I have in the Edit Styles a style called .navigation2DTnoM (name just in tag, with no extended nothing) because I have increased the code before /head to be applied to another menu, the navigation3noDTsiM, and it didnt work, until I have continued trying things and I added this other style/tag .navigation3noDTsiM and then, it works…

Thanks a lot again because it works… Now Im trying to understand why/how does it work…?


freewaytalk mailing list
email@hidden
Update your subscriptions at:

here again… Im trying to find the way, because I would like (in the other menu I told) to have different styles from the page name (that here its shown) and the links texts, but Im editing them averywhere, and doesnt work… I have a mess between the tag, the style, the one started with a . … I added this at the code, but didnt work…
#navigation2DTnoM .rcm-page-name {
font: arial;
size: 12px;
color: #ffffff;
}
and I added at the styles Edit under the .navigation2DTnoM and under the .rcm-page-name and dindt work…


freewaytalk mailing list
email@hidden
Update your subscriptions at:

The best tool for debugging this is your browser. Make certain that the Develop menu is enabled, then Control-click on the element that you want to inspect, and choose Inspect Element from the contextual submenu that appears under your cursor. What I suspect here is that the style you made is not specific enough to override the rest of the page’s style rules. You can see if this is the case by looking at the Styles portion of the Web Inspector, on the right column, where you will see a complete breakdown of all the rules that apply to the selected element. If you see values crossed out in this view, that means that another rule has overridden that portion of the rule. Look further up the stack to see what the new value is, and then look at the selector (the portion of the style rule that defines what it applies to – the portion outside of the {} braces) and see why the rule that applies is more specific. You can force an override by adding an !important keyword at the end of the attribute value, or you can make your own selector more specific so the rule applies at a higher level of importance.

<div id="foo" class="bar">
	<p class="baz">Lorem ipsum...</p>
</div>

Let’s say you wanted to make that Lorem ipsum blue… you could do any of the following:

.baz { color: blue }
#foo p { color: blue }
.bar * { color: blue }

In a vacuum, any of these would work. But if you had defined a very strong rule in another part of the stylesheet (or in another previous sheet):

div#foo.bar p.baz:first-of-type { color: red }

…then any other rule would have a hard time overriding that, unless it either managed to come up with a more specific selector (hard to imagine) or added the !important keyword:

p.baz { color: blue !important }

But !important should be a last resort, because it goes off like a bomb, and can make further modifications nearly impossible.

Walter

On Aug 29, 2015, at 7:09 AM, rakeljuice email@hidden wrote:

here again… Im trying to find the way, because I would like (in the other menu I told) to have different styles from the page name (that here its shown) and the links texts, but Im editing them averywhere, and doesnt work… I have a mess between the tag, the style, the one started with a . … I added this at the code, but didnt work…
#navigation2DTnoM .rcm-page-name {
font: arial;
size: 12px;
color: #ffffff;
}
and I added at the styles Edit under the .navigation2DTnoM and under the .rcm-page-name and dindt work…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hello. Thanks Walter. I have improved at v3… http://www.i-tek.es/demoweb/cantemus/v3.php

For example, I have the page-name non displayed, but insert an html word to make it later webyep editable, and cant set the style for that word… I dont know if this is because another strongest style… and as I cant look at the way you says (inpector at browser), there is no style applied to it… and dont no why…

Im still walking around… what should I understand a class? Because as in your example I see item with two class, but dont know what is each for? Your example:

Lorem ipsum...

item foo, two class: bar and baz… wich is the one I should give styles with the point before at the Edit Styles palette? or the item foo? My question i think is how you write this you say at the editor, or in a estended editor, or in the html markup…?

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On Aug 29, 2015, at 7:58 AM, rakeljuice email@hidden wrote:

Hello. Thanks Walter. I have improved at v3… http://www.i-tek.es/demoweb/cantemus/v3.php

For example, I have the page-name non displayed, but insert an html word to make it later webyep editable, and cant set the style for that word… I dont know if this is because another strongest style… and as I cant look at the way you says (inpector at browser), there is no style applied to it… and dont no why…

Im still walking around… what should I understand a class? Because as in your example I see item with two class, but dont know what is each for? Your example:

Lorem ipsum...

At the top level of my example, you have a div with the ID of foo and a class of bar. Inside it, you have a P with a class of baz. If you wanted to address that inner p, you have a number of different ways of naming it in your style’s selector (the part of the style rule outside of the curly-braces). When you use the Styles palette in Freeway to create a style, you use the Tag and Name fields to define the selector portion of the rule, and the various pickers and other fields within the right portion of the interface to define the attributes and their values.

selector {
  attribute: value;
  attribute: value;
} 

When you want to get more specific about a rule, you use the Tag field and leave the Name field empty. This lets you step around Freeway’s limited understanding of CSS and write incredibly precise rules that only apply in certain places, or override Action- or application-generated rules.

To help you understand how this example that I posted works, imagine you draw an HTML box on the page, and in the Inspector’s Name/ID field, enter foo. Then in your styles palette, create a new style with the Name set to bar, and another with the Name set to baz. Give those any attributes you want. Click on the #foo box you made, and then click the .bar (name-based style) in the Styles palette. You have just created #foo.bar (the box). Double-click inside that box, and type some text. Highlight all of it with a triple- or quadruple-click (to be sure you get the entire paragraph, not just a span within it) and click once on the .baz style. Now you have created the child paragraph with the class baz.

If you were to create a style using the Styles palette and the Tag field trick, you could override the styling applied in Freeway, simply by making a rule that had greater precedence than the simple combination of rules you’ve already applied in the design interface. In exactly the same manner, you could create a hand-written CSS rule in the Page / HTML Markup / Before section, wrapped in tags, and have the exact same effect. (The latter can be a lot easier, particularly if you are trying to apply some random advice you’ve found in a non-Freeway Web design forum somewhere.) There is no difference between these, as long as the hand-written style is valid and properly added to the page head.

And as far as the Safari Web Inspector goes, if you don’t see the style information related to your element, you’re probably not looking in the right place. On the top-right side of the Inspector, there are four buttons: Layers, Styles, Node, and Resource. Click on Style. Beneath that, you should see a set of rules that apply to the element you have selected on the page. They all coalesce from the bottom to the top. At the very bottom, there are the “user-agent” styles. These are baked into the browser itself, and only apply if nothing more specific is defined for the element. Above that, you will see rules from the attached stylesheets, then from the inline stylesheets, and finally from inline styles defined in the HTML element itself. Each one is more specific than the previous, by virtue of proximity alone. All other things being equal, the nearest rule to the element “wins”. They are additive and mask each other. A more specific rule with a color attribute will override a more distant rule with a color attribute. A distant rule with a display property will have effect if a more specific rule does not specify display at all. This is why you don’t have to specify display: block for a DIV, or font-weight:bold for an H1; because the browser already did that in its user-agent stylesheet.

Hope this helps you get started learning, there’s a lot to absorb, and the field keeps expanding as CSS grows and grows.

Walter

item foo, two class: bar and baz… wich is the one I should give styles with the point before at the Edit Styles palette? or the item foo? My question i think is how you write this you say at the editor, or in a estended editor, or in the html markup…?

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hello Walter. Thanks for your extense explanation. I’m following this and making the example.

I have not copied a code, only the one Caleb gave in this thread, and the reason I went on asking is to understand how it works, and how can I make something like this with others elements, instead of asking about…

About the browser, I was using firefox, but changed to safari to see what you indicate. Thanks a lot. I can see display: block at this element, and have no idea how it is there… I will review all the styles applied to this elements to try to fix them. And in some elements appear lots of strikethrough lines, that should be things I did and deleted, and they are still there in some way…

I understood the styled created with a Name (example bar), and applied directly to the element, in two ways:

  • have the element selected, and then make click on the style .bar at the styles pallete
  • or making a extended edition on the element, giving this: class: bar

But when you said that at the editor style you can use the Tag field trick, and knowing that is quite more especific, wich name do you write in the tag boz field? The element id? And preceded by . or #, like .foo or #foo?

Thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I m trying to make simple examples with boxes, Ive sawn how to add the class to the div element in the three ways (clicking on the style list and wiritng at extended in

or
but the code at the browser shows display: block; at the user sheet, so it doesnt be applied… but I have not blocked anything… I think this is the same error Im having at the other one.

On the other way, along the Tag trick way, I have done all the posibilities, and any of them write the class at the web code…

The style Im trying to applied is color and padding, just to have a simple exercise…


freewaytalk mailing list
email@hidden
Update your subscriptions at:

but the code at the browser shows display: block

This does not mean that the element is Blocked - have a look at http://www.w3schools.com/cssref/pr_class_display.asp for the explanation.

Essentially there are 2 main ones - display:inline and display:block when it comes to layout attributes.

There are many others including display:none (which hides an element) but dont confuse yourself with all the rest for just now.

Post a link to the page where you are experimenting and we can see where you are going wrong.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Im not at deskotp, but at mobile, for a short message. In a few hours, when come back, i will upload the site that yesterday went mad and I need to rebuild it. I have been all the night cheking tutorials, documentation and released notes about freeway and css, and at this point I can manage with handcode styles (easy one, im going on learning the available methods) but there is a question i cant answer yet, and if you could help it would be great, so I could better rebuilt my site, because i would like to do it with freway tools.

The thing is about the “tag field trick” and class. What is the best way to

  • give an element a class name (at the extended menu, the div or the div style section, or other?
  • Make style for a class (is this when you use the tag field trick?
  • Give an element the display:inline method (at the extended menu, or better at the class style?

Thanks a lot


freewaytalk mailing list
email@hidden
Update your subscriptions at:

In previous message Really I wrote 3 questions but on mobile they are on same line… Each one starts with -


freewaytalk mailing list
email@hidden
Update your subscriptions at:

When I started watching this thread, it was pretty interesting. Now there have been many questions and I am not sure what the thread is about anymore. I may still be thinking too much at the other end of it.

When you want to apply a Named style from the Style palette to some text, the difference between whether Freeway applies it as a Class style…

<p class="stylename">Lorum ipsum bibendum nulla sed.</p>

or as a Selection or Span style…

<p><span class="stylename">Lorum ipsum bibendum nulla sed.</span></p>

depends on whether the applied style has any paragraph style properties.

HINT: You can trick Freeway 7x into applying a style to text as a Class style without any paragraph values selected by choosing “Force graphic paragraph” from the Paragraph Styles toggle in the Style Editor then unchecking the box. Freeway will treat the style as a Class style, applied to whole paras and lines of type.

If you want to apply a Named style in the same click and select fashion to an item-- like a div or container-- it doesn’t matter if it has paragraph values selected because it will always be applied as a class style:

<div class="stylename">

Now, it is true that you can apply a style by creating a Class declaration on an item using that item’s Extended <div> dialog:

NAME: class
VALUE: stylename1 stylename2

This is particularly useful when you want to apply multiple styles to an item. You can even apply a style from the Styles palette AND add class names via the Extended <div>dialog this way and Freeway will add them all. BUT there is a catch to using this extended method… Freeway will not generate a Named style it doesn’t see as “applied” to anything in the workspace.

In other words, it doesn’t read your Extended class styles and see them as “applied”. If they are not click applied anywhere else in your workspace, then Freeway will apply the proper class tags to your HTML output, but won’t publish the corresponding CSS code to style it.

We can force Freeway to publish a style by naming it in the Tag field of the Edit Styles window, instead of the normal Name field… the drawback is, obviously, that now we cannot simply apply the style to items the normal way. To address this, I have been creating duplicate styles (only when necessary)… one a Named style for regular application and another Tag style for manual application:

NAME:  align-center

and then

TAG: .align-center /* m */

Freeway ALWAYS publishes the Tag style, so I can count on it when I’ve manually applied a style to an item but not to anything else. The obvious drawback is this redundancy-- besides its aesthetic atrociousness-- is that it also sets up a situation where you can have two conflicting styles with the same name and invite CSS Karma to smack you right upside the head.

So, you must combine your Freeway trickery with efficient planning, working out how to do the least amount of damage. Myself, I have worked out my own comfort level… though I wish Softpress would give me more overt control without forcing me to lead their app around by nose so much.

Now, I think that is a very comprehensive discussion of how to apply styles to things in Freeway-- at least the less exotic methods. What I really wanted to contribute was a discussion of CSS Inheritance and my favorite way of centering all text in a container. I started a tutorial file, but I only have so much energy and so you’ll have to download it and figure out how I used inheritance to style my paragraph text (check out the p style) and the list text style all at once. See how I apply a text style to a container, and how all the unsettled text within inherits that property.

http://cssway.thebigerns.com/workbench/css-inheritance/

If you are using your browser’s Inspect Element, you can see an item’s style inheritance-- as well as all the sources for the styles used. The User Agent stylesheet is actually your browser-- yes, your browser has a basic stylesheet. This is why unstyled HTML has a style and some people start with a Reset or Normalized stylesheet in their project so they have a “clean slate” as it were. I think you don’t need to worry about that yet.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

One thing to add to Ernie’s excellent treatise here: the reason why you choose a class vs. an ID vs a tag (lower-case t — I’ll explain in a moment). There are several, and I am sure there are more I am not thinking of at the moment:

  1. An ID may never be repeated in a single page. So any style you associate with an ID can only be used once in a page.
  2. A class may be applied to multiple items, and if you are using the Extended interface, you may apply multiple classes to a single item. Use this to set up partial styles that do part of the story, and then combine them to give the whole picture.
  3. A tag may be styled (and all of them are, by the browser’s user-agent sheet), and so you can rely on them all behaving a certain way (so you don’t have to re-specify their common characteristics). But as with anything else CSS, these assumptions can be overridden. Tag in this case means the name of the HTML element: div, p, input, table. Every thing in a page has some inherent style.

Now the Tag input in the Freeway Style Editor is a back-door into putting more elaborate CSS into your page. As others have noted here, Freeway only publishes the styles that it thinks are actually used on the page. But if you enter the entire selector (long-hand) into the Tag field, and then make sure that the Name field is empty, you have created what Freeway considers a manual style, one that it will always publish all the time. Combine that with adding classnames through the Extended interface on elements, or simply by adjusting the ID using the Inspector, and you can inject a lot of very special styles into your page, and trust Freeway to manage them for you.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thanks, guys. I am finally go on reading, and watching videos all the day… And my conclusion about class is that they should be better stylized in external sheets…isn’t it? About items, understood, and about tags I need to make some trials now, but think I catched.

All the information you are giving me at this thread is quite useful and valious for me. Have no words…

Thanks again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

… And my conclusion about class is that they should be better stylized in external sheets…isn’t it?

Not necessarily. There are in total three valid ways and it’s up to you which one comes up to your convenience.

  1. In the styles dialogue. This is the way I’m used to do if it comes to typography.

  2. The head area. I dropped this cause I want to have my head-area as clean as possible.

  3. External Stylesheets. This is the one I prefer cause it ensures kind of “reusability” and “advanced” use. Furthermore you have better control of what you’re doing.

The last option (and that IS a kind of critique) is mainly cause of the “difficult and long-winded way” creating class styles in the styles-dialogue (Name → Value).

And if it’s kept up the way it is, I’d like to see a possibility of sorting my stuff - even after typing them in (up and down arrow).

I’m as well as Ernie not aware what this topic is really about, but I highly recommend to do those testings in a clean and save space. You’re entirely “project related” - this is not always the best surrounding for learning new things.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hello again.

Well, what is the thread about? I asked for a way to make something, and Caleb gave me an answer, so I asked to made the same but using freeway tools. You have answered me with somethings about styling, and i have been learning about, and asking severeal questions about css styling, to try to get the answer for my second question. Concluision: I have learnt a lot in these days… Thanks a lot. I have not the answer for how to make the Caleb’s code without external sheet or code before /head…

Ive been learning about styles, reading this thread again and again, as long as I was knewing new thing to trying to catch as much is posible from this…

I dont know why, but I think there is a big lack of information about styling a class. I couldnt find it. or I didnt look well, but in the 250 pages reference manual its not said, for example… or at the knowledge base of softpress, …

And I have some more questions about the way freeway manage the styles. I have been summing them up in my exercise, because they came on the way I have been making test… And what I have tried with this is not to have to edit the

at extende, for example, for having all the styles together, that for me is more comfortable.

If you could have a look to see if some of them could be answered… I think that at the exercecise is more clear than copying them here.

http://www.i-tek.es/demoweb/fw_css_test/index.html
file at: http://www.i-tek.es/demoweb/fw_css_test/fw_css_test.zip

Thanks again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Ah, I forgot to say (its on the exercise not to be forgotten, and I forgot…)

Its just a thought, not a question. Im not yet prepared… :wink:

<<What I have no word is about the fm-s, f-fp, f-lp… that I have read in threads you are discussing. I read these thread to see if I catch something, and to try to improve my english as well… :wink: but for the moment I cant imagine about what are them for…


freewaytalk mailing list
email@hidden
Update your subscriptions at: