RESOLVED: Styling wrappers HELP

1,024 Posts

Frank Reply #11, 18 years, 4 months ago

[[ ]] is creating cached calls and [! !] uncached, Figured that that call came from a trial.
Actually your debug info shows that wayfinder does finds the wrappers or chunks.
So my guess is that it must be in your CSS/HTML somewhere.
Why not copy the call, just for a test, to your main content div?

Like so:
<div id="content-main">
[*#content*][!Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`wfParentRow` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow`!]
</div>

btw your debug shows just one page beeing included, the feature page.
Guess you cant send you css and your html sheets? Never know what one might find. There must be a mistake somewhere.

834 Posts

MarkG Reply #12, 18 years, 4 months ago

Frank,

tried all that and a few other things.

in the words of George Costanza

"I got Bupkiss,"

Just for my own peace of mind, where exactly is the call to the css style? IS there one? What should it look like?

Content Creator and Copywriter

1,024 Posts

Frank Reply #13, 18 years, 4 months ago

these are beeing defined in the head section of your HTML template in modx.

And are these line (but you have got them allready)

<link rel="stylesheet" media="all" type="text/css" href=" assets/snippets/wayfinder/examples/cssplay/dropline.css" />

should work for "all" browsers and IE7. Off course these files should also be uploaded or placed in the assets/snippets etc dir on your webserver, but you are running local no? Does not change the place they should be however.
Did you validate the page ;localy with FF and also check with firebug. Sometimes that can help.

834 Posts

MarkG Reply #14, 18 years, 4 months ago

Ok Frank,

I got some progress, of sorts.

I switched to a blank template (ie None)

and just pasted the snippet call and the css call in the content area of the actual page.

<link rel="stylesheet" media="all" type="text/css" href=" assets/snippets/wayfinder/examples/cssplay/dropline.css" />

[!Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`wfParentRow` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow` &cssTpl=`wfdropline` &debug=`1`  !]

That worked, to a point, see attached screenshot. What’s missing is the first three top level menu items.

Taking that a step further and switching back to the ACWA template, gives a similar result, but the 4th top level menu item disappears. See next screenshot.

So, a couple of things.

There is obviously some css conflict going on somewhere.

The css link I put in the content is exactly the same as I tried in the template to no avail.

It works in one place and not another.

It’s got me beat, still at least it’s working of a sort, time for some detective work.

Content Creator and Copywriter

1,024 Posts

Frank Reply #15, 18 years, 4 months ago

send your complete CSS sheet and template, so we can check together, mistake must be there somewhere!

btw your debug shows just one page beeing included, the feature page.

Good thing something is happening.

834 Posts

MarkG Reply #16, 18 years, 4 months ago

Frank,

well if you want.

But I should warn you I imported my css and template straight from an existing site (obviously) to see if I could get the hang of templates and layout principles in MODx. (Which obviously I did, that was the easy part.) The menu styling is where it got tricky.

Anyway, I haven’t been through it as a troubleshooting exercise as yet, so you may see some obvious mistakes.

Also, there’s some conflict going on in the head with all those stylesheets, but I haven’t looked at that thoroughly yet either.

Files attached.

It’s late down here, so I’ll sign off for now.

Content Creator and Copywriter

1,024 Posts

Frank Reply #17, 18 years, 4 months ago

Hi Mark,

well got it running locally, did not change very much, except for the div class menu, that I changed into div class navigation. (probably can be a div id as it serves as a container for the actual menu only). As the "dropline menu" allready has a ".menu" and your CSS as wel has a ".menu" I think those two classes were clashing.

Also changed in the call the

&parentClass=`hide`

to

&parentClass=`show`

so you dó see the top level folders.
The &level=`x` is where you need to define the depth that wayfinder will look into the tree for items.

Guess thats it, if you want the changed files just let me know.

I must say I dont like that menu very much, probably the second level boxes need some hacking because without any links they still spread 1/2 page wide. And there are a few CSS validation errors and real errors in its CSS.

834 Posts

MarkG Reply #18, 18 years, 4 months ago

Thanks Frank,

better send me the changed files, so I can understand exactly what’s going on.

PS When you said you didn’t like the menu, did you mean the dropline menu or my menu? (I won’t take offence.)

PPS I have a live version of it running here

http://breakthroughecommerce.com/dev/Abalone

Made a few cosmetic changes.

You can also see how the database list looks that we discussed in another thread.

http://breakthroughecommerce.com/dev/hatcheries

Content Creator and Copywriter

1,024 Posts

Frank Reply #19, 18 years, 4 months ago

dont very much like the dropline but then it was a quick test install so maybe things did not go very well.
Btw, all is up and running on your site, no?

here the fluid.css

body {background : #66C4EA url(../images/gradient_background.jpg) repeat-x; margin : 0; padding: 0; font-family : verdana, arial, helvetica, sans-serif; font-size : 70%; color : #000000; width : 100%; max-width: 100%}

div.header {width: 100%; height: 111px; max-height: 111px; margin: 0; padding: 0; background-color: #036bb2; overflow: hidden}

div.header a {color: #ffffff; margin-right: 3px}

div.header a:hover {color: #6bd4ff}

div.logo {position: absolute; background: url(../images/logo.gif) no-repeat; width: 177px; height: 111px; margin: 0; padding: 0}

div.topUtilities {position: absolute; top: 0px; right: 0px; background: url(../images/curve_montage_content_bar.gif) no-repeat; width: 359px; _width: 389px; height: 20px; padding-left: 30px}

div.statement {position: absolute; left: 177px; background : url(../images/for_people_profit_the_environment.jpg) top left no-repeat; width: 216px; height:111px}

div.hull {overflow: hidden; position: relative; left: 393px; background : url(../images/curve_montage_content.jpg) no-repeat top right; width: 389px; height:111px}

table.content {width: 100%; font-size: 100%; min-height: 100%}

td.rowgraphic {width: 71px; padding: 0; vertical-align: top; height: 100%}

div.rowgraphic {background : url(../images/break_out.jpg) top left repeat-y; width: 71px; min-height: 424px; height: 100%}



td.homeContent {_height: 208px; min-height: 208px; width: 50%; padding: 0; margin: 0; background: url(../images/home_breakout.gif) #0067b1 bottom right no-repeat; vertical-align: top}

div.homeContent {width: 100%; _height: 208px; min-height: 208px;p adding: 0; margin: 0;}

td.innerContent {vertical-align: top; height: 50%}

div.innerContent {width: auto; _width: 100%; padding: 15px}

div.homeContentHeader {height: 20px; background-color: #00508a; color: #ffffff; font-weight: bold; font-size: 110%; padding: 3px 0px 1px 3px}

div.homeContentBody {margin: 0; padding: 5px; color: #ffffff; width: 100%}

div.innerContentBody {height: 100%; margin: 0; padding: 15px; color: #000000; width: auto; _width: 100%; border: 1px solid #00508a; background-color: #ffffff}

div.innerContentBody h1 {color: #00508a; font-size: 130%; margin-bottom: 0; margin-top: 0}

div.innerContentBody h2 {color: #00508a; font-size: 120%; margin-bottom: 0; margin-top: 0}

div.innerContentBody h3 {color: #00508a; font-size: 110%; margin-bottom: 0; margin-top: 0}

div.innerContentBody table {font-size: 100%; width:100%;}

div.homeContent a, div.homeContentBody a, div.homeContentHeader a {color: #a9e6ff}

div.homeContent a:hover, div.homeContentBody a:hover, div.homeContentHeader a:hover {color: #ffffff}

div.homeContentBody ul {padding-left: 12px; list-style: square; margin: 0 5px 5px 5px; color: #ffffff;}

div.homeContentBody li {padding: 1px 0 1px 0}

td.members {width: 160px; padding: 0; margin: 0; vertical-align: top; background: url(/home_breakout.gif) #0067b1 bottom right no-repeat}

div.members {width: 160px; padding: 0; margin: 0}

div.footer {padding: 5px; background-color: #00508a; height: 15px}

div.footer a {color: #ffffff; margin-right: 3px}

div.footer a:hover {color: #6bd4ff}

div.footerLeft {float: left}

div.footerRight {float: right}

div.contact {padding: 5px; height: 25px; font-size: 90%}

div.contactLeft {float: left}

div.contactRight {float: right}

div.google {background-color: #ffffff; height: auto}

form {margin: 0 0 5px 0}

.members p {margin: 0 0 5px 0}

input, select, textarea {font-family: verdana, arial, sans-serif; font-size: 100%}

input.button {background-color : #A9E6FF; border : 1px solid #000 !important; width : auto !important; font-size : 1em !important; padding-right: 3px; padding-left: 3px; padding-top: 1px; padding-bottom : 1px; cursor: pointer}

.members input.button {display: block; clear: both; float: right}

.homeContentBody p {margin-right: 15px !important}

#ctl0_0 {border-color: #00375e !important;}

#ctl0_1 {border-color: #f78914 !important;}

#ctl0_2 {border-color: #8c79a8 !important;}

#ctl0_3 {border-color: #d44335 !important;}

#ctl0_4 {border-color: #14874a !important;}

#ctl0_5 {border-color: #ffd067 !important;}

#ctl0_6 {border-color: #b8d8b8 !important;}

#ctl0_7 {border-color: #d7604b !important;}

#ctl0_8 {border-color: #90a0d6 !important;}





.menu {min-height: 36px; background-color : #00508A; background-image: url(/main_navigation_curve.gif); background-repeat:  no-repeat; background-position: top right; }





div.submenu {display: table; width: 100%; background-color: #146fb0}

div.submenu div.smstaticmenu {display: inline; height: 100%; vertical-align: top}

div.submenu span.smstaticmenu {float: left; height: 100%; margin: 4px 7px 4px 14px}

div.submenu a {width: 1px; display: table-cell; color : #ffffff; text-decoration: underline; text-align: center}

div.submenu a:hover {color: #afe1f6}



.cart {background : url(/cart.gif) no-repeat 0px 3px; padding-left: 14px}

.email {padding-left : 13px; background : url(/email.gif) no-repeat 0px 3px;}

.print {padding-left : 13px; background : url(/print.gif) no-repeat 0px 3px;}



.innerContentBody a {color: #00508A}

.innerContentBody a:hover {color: #0F6AAB !important}

.innerContentBody a.visited {color: #0F6AAB}

.innerContentBody a.visited:hover {color: #0F6AAB}

Left .menu the way it was, just toke out some statements that might have been the cause of the wayfinder problems

stuff i deleted:

div.menu div.smstaticmenu {display: inline; position: relative}

div.menu span.smstaticmenu {clear: none; float: left; display: table; width: auto}


div.menu a {display: table-cell; text-decoration : none; color : #E0F6FF; font-weight : normal; padding: 2px 7px 2px 7px; text-align : center; border-right : 0px; border-bottom : 0px; border-top : 0px; border-left: 7px solid transparent; height: 36px; background-color : #00508A; vertical-align: middle;}

div.menu a:hover {background-color : #146FB0 !important}

The template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />

<head>


 <title>[(site_name)] | [*pagetitle*]</title>


<meta name="description" content="[*description*]" />
<meta name="keywords" content="[*keywords*]" />
<meta name="author" content="[*author*]" />

<script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script>
<script src="[(base_url)]manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="[(base_url)]manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/templates/aca/fluid.css" />
<link rel="stylesheet" media="screen" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/dropline.css" />

  <base href="[(site_url)]" />

</head><body>
<div class="header">
 <div class="logo"></div>
  <div class="statement"></div>
    <div class="hull"></div>
      <div class="topUtilities"></div>

      <!-- end topmenu -->
</div>

<div class="menu">
[!Wayfinder? &startId=`0` &level=`4` &parentClass=`show` &parentRowTpl=`wfParentRow` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow`!]</div>

<div class="innerContent"><div class="innerContentBody">
<div id="content-main">
        [*#content*]    
</div> <!-- end content-main --></div></div>

<div id="footer">
    {{footer}}
</div> <!-- end of site-info -->

Remember to edit <link rel="stylesheet" href="assets/templates/aca/fluid.css" /> to point to your css.

Have not got much time, have fun...

frank.

834 Posts

MarkG Reply #20, 18 years, 4 months ago

Frank

thanks enormously for all of your help.

Yes it is up and running on a live development site. Link in previous post.

I got it working without yet making your changes. (As I said at this stage it’s quick and dirty to see how everything in MODx works.)

I’ll come back to it later, to fine tune the css.

Now I’m onto installing phpMyedit as a module so I can get to grips with the databases, the fun never ends.

grin

Content Creator and Copywriter