Duplicate class from foundation to new.css

[kat]

My PG visual panels say that I can duplicate classes from foundation css to new.css. I’ve tried clicking duplicate on foundation .top-bar url but nothing happens. I tried other visual panel menus and get flyouts. Eventually I give up, open new.css, then type in the code.

[RobM]

@kat, you should be able to duplicate it. Once you select where to duplicate the rule (new.css) you need to click on the duplicate again. Tried uploading a vid, but something is hiccuping.

[kat]

Couldn’t get movie under 10mg. But I was able to dup foundation in new.css.

1. right click Foundation style, release right mouse click
2. Click right side of drop down and choose new.css
3. This seems to be the secret: Click directly on the word Duplicate
   Unfortunately this doesn’t affect the light grey background behind the nav bar.
   Possibly I have too many scripts in the wrong order? Or that this top element is a component. I watched your component tutorial this morning.

[RobM]

Sorry @kat , not sure I can figure this out without a little more information. I’m not sure what you are trying to accomplish and what is or is not working.
Right now the rule copies over, but isn’t applied?
You are loading both “new.css” and “foundation.min.css” it looks like, which is being loaded first?
The highlighted rule is the one you are copying? it looks to be in a media query - is that having impact?

[kat]

Wrong order?
CSS
<link rel="stylesheet" href="css/foundation.min.css"> <link href="../new.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Andika&display=swap"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"> </head>
JS
</footer> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.js"></script> <script> $(document).foundation(); </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script> <script type="text/javascript" src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script> </body>
Finally did it, but no idea how. I just kept clicking until something worked, then edited to red in new.css. I need a “where to click what, when” - onward ; )

[RobM]

Glad it worked for you. The only thing that I can see is thatyou are loading in the foundation.min.css twice. Once before your “new.cs” and once after.

[kat]

Foundation should be after new.cs, right?
Is there a way to access the script section of the page in PG? Prefer to stay in PG instead of editing it in DW CS6

[RobM]

Whichever sheet loads last is the one that “wins” if the rules have equivalent specificity. If you load your ‘new.css’ before the foundation framework, rules from Foundation might over rule yours.

Scripts can be rearranged in the Tree panel. Just drg them to the position you want. I guess this is what you mean by accessing the script section?

[kat]

Don’t need both foundation.min.js & foundation.js, correct?

@RobM

Scripts can be rearranged in the Tree panel.

Nice!
I’d also like to open the index.html page and access the scripts there. But I get “Can not edit HEAD and BODY elements. Please use Page → Edit code to edit the whole page.” Nothing under Page to allow editing code.

[RobM]

Correct, typically the non-minimized will be used in development to better track any conflicts/errors. The .min loads quicker for production.

If you click the Code icon above the Page View it will open the code editor for the whole page, including the header area.