Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Sep 06, 2011 @ 19:45
    Dennis Aaen
    0

    Different colored menu items

    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

  • Kim Andersen 1447 posts 2196 karma points MVP
    Sep 06, 2011 @ 20:03
    Kim Andersen
    0

    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

  • Richard 146 posts 168 karma points
    Sep 07, 2011 @ 12:05
    Richard
    0

    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.

  • Kim Andersen 1447 posts 2196 karma points MVP
    Sep 07, 2011 @ 21:47
    Kim Andersen
    0

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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Sep 11, 2011 @ 20:43
    Dennis Aaen
    0

    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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Sep 12, 2011 @ 15:24
    Dennis Aaen
    0

    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

  • micagordon 5 posts 54 karma points
    Feb 13, 2015 @ 07:52
    micagordon
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft