different colored menu items

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Sep 06, 2011 @ 19:45

Hi,

Hope someone can help me find a solution to this problem.

I use Umbraco version 4.5.2

I have a main menu where I want each menu item to have its own color.

I have created two fields in a document type, where you can specify two colors.

My structure looks like.

front Page
- Item 1
- Item 2
- Item 3
- Item 4

All these menu items are made of a special document type named Top Menu.

My problem is currently that if I put a color on the menu item 1 gets all menpunterne the same color is not different colors. Ert second problem is that the color does not come on the front page, because color is put on Top Menu document type.

I have a small starting point and hope that someone can guide me in the right direction.

<xsl:template match="/">

  <xsl:variable name="themeColor" select="$currentPage/themeColor" />
  <xsl:variable name="gradientColor" select="$currentPage/gradientColor" />

    a.mainMenu{
      border: 1px solid <xsl:value-of select='$themeColor' />;
      background-image: -webkit-gradient(linear, left top, left bottom, from(<xsl:value-of select='$gradientColor' />), to(<xsl:value-of select='$themeColor' />)); /* Saf4+, Chrome */
      background-image: -webkit-linear-gradient(top, <xsl:value-of select='$gradientColor' />, <xsl:value-of select='$themeColor' />); /* Chrome 10+, Saf5.1+ */
      background-image:    -moz-linear-gradient(top, <xsl:value-of select='$gradientColor' />, <xsl:value-of select='$themeColor' />); /* FF3.6 */
      background-image:     -ms-linear-gradient(top, <xsl:value-of select='$gradientColor' />, <xsl:value-of select='$themeColor' />); /* IE10 */
      background-image:      -o-linear-gradient(top, <xsl:value-of select='$gradientColor' />, <xsl:value-of select='$themeColor' />); /* Opera 11.10+ */
      background-image:         linear-gradient(top, <xsl:value-of select='$gradientColor' />, <xsl:value-of select='$themeColor' />);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='<xsl:value-of select='$gradientColor' />', EndColorStr='<xsl:value-of select='$themeColor' />'); /* IE6–IE9 */
      }

</xsl:template>

The macro is inserted on the main.master in a style tag inside the head tag

/Dennis

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Sep 06, 2011 @ 20:03

Could you try changing the a.mainMenu styling part to this:

<xsl:text disable-output-escaping="yes"><![CDATA[
     <style>          
            a.mainMenu{
                border: 1px solid ]]></xsl:text><xsl:value-of select='$themeColor' /><xsl:text disable-output-escaping="yes"><![CDATA[;
                background-image: -webkit-gradient(linear, left top, left bottom, from(]]></xsl:text><xsl:value-of select='$gradientColor' /><xsl:text disable-output-escaping="yes"><![CDATA[), to(]]></xsl:text><xsl:value-of select='$themeColor' /><xsl:text disable-output-escaping="yes"><![CDATA[)); /* Saf4+, Chrome */
                background-image: -webkit-linear-gradient(top, ]]></xsl:text><xsl:value-of select='$gradientColor' /><xsl:text disable-output-escaping="yes"><![CDATA[, ]]></xsl:text><xsl:value-of select='$themeColor' /><xsl:text disable-output-escaping="yes"><![CDATA[); /* Chrome 10+, Saf5.1+ */
                background-image:    -moz-linear-gradient(top, ]]></xsl:text><xsl:value-of select='$gradientColor' /><xsl:text disable-output-escaping="yes"><![CDATA[, ]]></xsl:text><xsl:value-of select='$themeColor' /><xsl:text disable-output-escaping="yes"><![CDATA[); /* FF3.6 */
                background-image:     -ms-linear-gradient(top, ]]></xsl:text><xsl:value-of select='$gradientColor' /><xsl:text disable-output-escaping="yes"><![CDATA[, ]]></xsl:text><xsl:value-of select='$themeColor' /><xsl:text disable-output-escaping="yes"><![CDATA[); /* IE10 */
                background-image:      -o-linear-gradient(top, ]]></xsl:text><xsl:value-of select='$gradientColor' /><xsl:text disable-output-escaping="yes"><![CDATA[, ]]></xsl:text><xsl:value-of select='$themeColor' /><xsl:text disable-output-escaping="yes"><![CDATA[); /* Opera 11.10+ */
                background-image:         linear-gradient(top, ]]></xsl:text><xsl:value-of select='$gradientColor' /><xsl:text disable-output-escaping="yes"><![CDATA[, ]]></xsl:text><xsl:value-of select='$themeColor' /><xsl:text disable-output-escaping="yes"><![CDATA[);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=']]></xsl:text><xsl:value-of select='$gradientColor' /><xsl:text disable-output-escaping="yes"><![CDATA[', EndColorStr=']]></xsl:text><xsl:value-of select='$themeColor' /><xsl:text disable-output-escaping="yes"><![CDATA['); /* IE6–IE9 */
            }
     </style>
]]></xsl:text>

I know it's not pretty, but it should give your the right output in your code I think. At least if the colors are set on the current page.

Does this help you creating the right output?

/Kim A

Copy Link

Richard 146 posts 168 karma points

Sep 07, 2011 @ 12:05

Dennis,

Using the currentPage to get the colour, I would expect to create all of the links with the same colour, as specified on the current page. If you want the menu items to be different colours, then you will need to get the colour of the individual page. I would also recommend putting the styling into a style sheet (css), so just add a class to the a tag in the menu.

Try to get all of the nodes with:

<xsl:variable name="startNode" select="$currentPage/ancestor-or-self::root/* [@isDoc]"/>

then loop through the item, and get the colour:

<xsl:for-each select="$startNode/*">
   <xsl:value-of select="@nodeName"/>, <xsl:value-of select="themeColor"/>
  <a href="{umbraco.library:NiceUrl(@id)}" class="{themeColor}"><xsl:value-of select="@nodeName"/></a>
</xsl:for-each>

You will want to only list items at the top level, whereas this will list all pages on the site.

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Sep 07, 2011 @ 21:47

Ohh I was a bit to fast in my answer there Dennis. My Bad :)

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Sep 11, 2011 @ 20:43

Hi Richard and Kim,

Apologize for the late reply but just got home from vacation.

I will try to find a solution tomorrow on the job, and then I write how I choose to solve it.

But many thanks for inputs.

/Dennis

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Sep 12, 2011 @ 15:24

Hi again,

I got solved my problem today on the job.

I ended up with this solution. This is a simplified version

<xsl:template match="TopMenu[@isDoc]">
        <xsl:param name="Level"/>
      <li>
        <xsl:attribute name="style">
          border: 1px solid <xsl:value-of select="themeColor"/>;
          background-image: -webkit-gradient(linear, left top, left bottom, from(<xsl:value-of select="gradientColor" />), to(<xsl:value-of select="themeColor" />));
          background-image: -webkit-linear-gradient(top, <xsl:value-of select="gradientColor" />, <xsl:value-of select="themeColor" />);
          background-image:    -moz-linear-gradient(top, <xsl:value-of select="gradientColor" />, <xsl:value-of select="themeColor" />);
          background-image:     -ms-linear-gradient(top, <xsl:value-of select="gradientColor" />, <xsl:value-of select="themeColor" />);
          background-image:      -o-linear-gradient(top, <xsl:value-of select="gradientColor" />, <xsl:value-of select="themeColor" />);
          background-image:         linear-gradient(top, <xsl:value-of select="gradientColor" />, <xsl:value-of select="themeColor" />);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='<xsl:value-of select="gradientColor" />', EndColorStr='<xsl:value-of select="themeColor" />');
        </xsl:attribute>
    </li>
</xsl:template>

/Dennis

Copy Link

micagordon 5 posts 54 karma points

Feb 13, 2015 @ 07:52

Hi, Dennis

You just asked what I want to know, the last code also give me a reference on my work.

Thank you so much.

linear bar code generation in asp.net

Best regards.

Mica Gordon

linear bar code reader in asp.net

Copy Link

is working on a reply...

Flag this post as spam?

Different colored menu items