We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 28495
    • 17 Posts
    Hi,

    Kind of a noob - that said, we are currently developing our first site in modx evo...

    One requirement that always sees to come up is the need to replace web safe fonts used in headers and in menus with images. We do this because we want to style the headers and menus with fonts that people don’t have on their systems like soho gothic or frutiger, and we want to do :hover :active :visited, etc. with different colors (different images)...

    I don’t bring this up to get into a discussion about font replacement technology such as SIFR and Cufon and hosted solutions like the upcoming typekit - let’s just say that we view these things as hackish and not mature enough to rely on, and each of them have problems with highlighting text, seo, foundry license issues, subscription fees that someone has to pay, etc.

    What is the "modx" way to:

    Assign a class to say H1 when creating a page that wayfinder will "menutize" so we can hide the heading text (still keeping it technically there for seo) so that we can replace it with an image...

    and...

    Assign unique classes to each wayfinder menu item so we can do that same?

    Thanks in advance for any insight - I understand this is a really general question but someone out there may have already come up with a best practice for this...

    Thanks for reading.

      ------------------------
      Stephen White
      Cofounder
      Zemelo Corporation
      [email protected]
      • 16183
      • 1,390 Posts
      Hi Stephen

      Welcome to MODx! (ok, kinda belated - you are on your fifth post wink)

      Tell you the truth, there is no "MODx way" of doing things (in most cases anyway). That’s the whole beauty of this product. It will take whatever you throw at it.

      I gather by now you know that MODx uses normal HTML templates (with a some special MODx tags thrown in).

      If that H1 is part of the page, you could have something like this

      <h1 class="heading">[*longtitle*]</h1>
      

      in your site template. For each page that uses that template, MODx will dynamically replace the [*longtitle*] with what you entered as that document’s long title when you created it. There’s ways to change the above so that you can use ids instead....

      I am just scratching the surface here...Have a look at the resources below to get a better grasp of MODx templates and how MODx works in general:

      1. http://wiki.modxcms.com/index.php/Beginner%27s_Guide_to_MODx
      2. http://bobsguides.com/MODx.html
      3. http://codingpad.maryspad.com/category/modx/
      4. http://net.tutsplus.com/tutorials/other/working-with-a-content-management-framework-modx/
      5. http://www.tipsfor.us/category/software/modx/ (videos)

      As for Wayfinder, it comes with about 10 class parameters and you can also have custom ones. You can even do ids instead of classes. I cannot explain it all in this "short" post. Please have a look at these resources:

      1. http://www.muddydogpaws.com/development/wayfinder/parameters.html
      2. The Wayfinder e-book in my sig.

      Wayfinder has been used to create all sorts of menus from jQuery powered ones, to circular ones, to mac-dock-like menus, to menus using CSS sprites, and so on and so forth. There’s a couple of examples here in the forum and in the e-book in my sig.

      Hope this helps grin

      cheers/k

        • 28495
        • 17 Posts
        Thanks!
          ------------------------
          Stephen White
          Cofounder
          Zemelo Corporation
          [email protected]