Hi Berdia

Since you're in control of the HTML that the XSLT macroes are outputting this should not be an issue. I asume that you're applying your styles from an external stylesheet? Then it's just a matter of using id's or classes in the HTML.

A subscription to umbraco.tv is definately worth it, but you won't find any HTML/CSS specific tutorials in there.

What is it specifically you're wondering about?

/Jan

Hi Berdia,

I suggest you watch the first few free videos on Umbraco TV they will help explain how to setup a basic page, how to include a stylesheet and how to use an XSLT macro.

Cheers,

Chris

All I want to do is apply CSS to XSLT menu. I know how to do it in VS 2010 but I am very new to Umbraco.

I very much like how Umbraco automatically generates menu with XSLT but don't know how to apply css to it and make menu look nice.

As simple as that.

As I understand it must be straight forward to create CSS in umbraco and then link it to XSLT menu.

Hi Berdia,

It is the same as you would do if you wrote the code in Visual Studio.

If you have your XSLT macro working, then I assume you have created a template, all you need to do is put a link in the head section of your template like this:

    <link rel="stylesheet" type="text/css" media="screen" href="/css/yourcss.css" />

And then create the CSS file in the stylesheet section by right clicking and calling it YOURCSS ( without the .css as Umbraco will add that for you )

Cheers,

Chris

Your stylesheets are under the "Settings" node, where you can create new ones, then just remember to include them in your master template.

Here's an old schema xslt menu, where you can see the element ids which you can then target by style.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
   version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library"
   exclude-result-prefixes="msxml umbraco.library">


<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>

<!-- Input the documenttype you want here -->
<xsl:variable name="level" select="1"/>

<xsl:template match="/">

<!-- The fun starts here -->
  <ul id="topMenu">
   <xsl:for-each select="$currentPage/ancestor-or-self::node [@level=$level]/node [string(data [@alias='umbracoNaviHide']) != '1']">
       <li>          
          <a href="{umbraco.library:NiceUrl(@id)}">
               <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">                 
                  <xsl:attribute name="class">current</xsl:attribute>
             </xsl:if>
               <xsl:value-of select="@nodeName"/>
          </a>          
      </li>
   </xsl:for-each>
 </ul>

</xsl:template>

</xsl:stylesheet>

Hi Berdia

You can create the stylesheet in Umbraco as Chris and Martin are saying. But since you are using visual studio for development I suggest that you just create your stylesheet in the CSS folder on the file-system as you would usually do.

And then just reference it as Chris has showed. If it needs to be modified through the Umbraco UI some day, Umbraco will list it under the stylesheets folder automatically since it looks in the "css" folder.

When you create XSLT files that fetch some data etc. the output is rendered as HTML and it's the rendered HTML that you need to apply the styling to, just in case you we're thinking you needed to do something special to combine CSS with XSLT. That is not the case. Just look at the HTML output by viewing the source with firebug for instance or simply just by choosing "view source" in the browser - then you should be able to get an idea on how to apply your styles to the different elements.

I hope that you're not to confused about this now :-)

/Jan

Thank you Jan,

It makes much more sense now!

Appreciate your help.

Hi Berdia

I'm happy to hear that - please don't hesitate to ask if you're in doubt of anything. As you probably have noticed by now we're a friendly bunch who likes to help each other out - happy umbracoing :-)

/Jan

You are indeed and I much appreciate that.

I tried several CMS systems before and could not really find the right one.

Umbraco is works well so far. I hope it will be the one I will go for at the end if nothing changes.

Berdia

Hi Berdia

I'm happy to hear that as well.

You should be aware that with the release of version 5 of Umbraco it's going to be based on MVC instead of web forms, which it is now.

But version 4.6 will still be bugfixed and keep to coexist with the release of v5. And I think that the backoffice of v5 will still look the same. But many interesting stuff is going to happen.

You can find more stuff on v5 by searching this forum and google in general :-)

/Jan

Jan,

I will have a look at v5. I really want to adopt Umbraco and use it for long time.

I have clients I will be developing for and I am also thinking to move my company's new corportate website on Umbraco as well so it is very important for me to have an easy to manage and develop CMS system.

Berdia

One small problem I just noticed.

I can't see my CSS files I created in Umbraco in VS 2010. I thought it would synchronize on the go.

Am I missing something?

is working on a reply...