How to connect custom data type dropdown list with styles
Hello,
I'm trying to create a control that allows the user to select a background style in the back office (Content Section). If the user selects Orange, the background on a banner displays the Orange css styles, and if they select Blue, the Blue css styles.
I created a Data Type Dropdown list with the values Blue and Orange and connected it to a Property on the master page, but I have no idea how to make the styles render based on what they use chooses.
I'm usinging Umbraco 7 and developing in Visual Studio.
I'm not a developer so if possible please explain like i'm 5 ;)
I'll try and see if I can explain this in a very simple way :)
Ok...In Umbraco there is a developer section. Go to "Developer". In this section there is a folder called "Data types", right click this folder and choose "Create".
Go to the developer section in Umbraco
Right click the "Data types" folder
Provide a name for your datatype in the dialogue that appears
Now you will see a dropdown list of possible data types / property editors that you can choose from. Choose then one called "Dropdown list" and hit the blue "save" icon.
Now there is a field called "Add prevalue". Here you can write "Orange" and hit enter
The value of "Orange" is entered and you have a new input field where you can add a new value. Repeat and hit save when all the values you need are entered.
Congrats! You have created the data type - Now let's add it to a document type
Go to the "Settings" section
Go to your document type of choise (The one where you need this property)
Go to the tab called "Generic properties"
Click on the label where it says "Click here to add new property" - A form drops down
Enter the name of the field
Correct the alias, if you want a specific name for it, otherwise just leave it
Now choose the type - Here you can choose your datatype, which you created above. Click the dropdown list and find the name of your datatype
Go to the description field and add a description/helptext
Click on the blue save icon
Congrats! You have now added your datatype to the document type
Now you can go to the "Content" section and view the document type / Page type where you just added the datatype and see that you can now choose a theme color.
I hope this helps! :) But otherwise don't worry, we will get here together.
What you explained above I have done, but how do I connect the values in the dropdown to the styles? Now it just renders the text "Orange" or "Blue" when published.
Ok, now there are a couple of ways you can achieve your goal. But I assume you're having your styles in one stylesheet and simply want to change the background color on the HTML element dependent on a class name. The code in the following steps can be a bit ugly...but it works...:)
Let's start by creating the XSLT macro - Seems you know how to do it already but I'm taking it from the top anyway.
- Go to the developer section
- Right click the "XSLT" folder and choose "create" - Give a proper name for you xslt file (and macro) make sure the "create macro" checkbox is checked (should be by default).
- Now the xslt file and macro is created
- In the xslt file you can write the following code
The above code will output class="orange" for instance. But be aware that I'm asuming you have placed the option of choosing a background color on your "Homepage" document type - If your "Homepage" document type has another alias, then replace "Homepage" with your alias - The same goes for the alias for your dropdown datatype, which I assume is named "themeDropdown". It's probably also a good idea to add a check to figure out if there is a value or not...but let's just focus on writing out the selected stuff first.
Now you should be done creating the macro and the XSLT file. Next we'll add the macro to your template on the <html> element.
- Go to the "Settings" section
- Go to your master template or the template where your <html> opening tag is placed
- Add the macro to your template in the <html> tag like this `<html <umbraco:Macro alias="NameOfYourMacro" runat="server" />>`
As you have probably already fifured out you should replace the macro alias "NameOfYourMacro" with the alias of your macro :)
Now you should see a class added to the <html> element if you view your source and it should have a value of either empty or orange, blue or whatever you have chosen to save on your page.
I followed the above steps, but my master page did not like having the macro placed in the <html> tag - i got an error that the master page could not be found :(
Would it be easier with scripting?
Also, I don't see how the above will know which style to render? Mine looks like this:
I'm placing the title of the page inside the graphic banner, the HTML looks like this:
<div id="graphicBanner">
<div class="gb-arches">
<div class="container">
<div class="bg-page-title">
<h1>@Umbraco.Field("pageHeader")</h1>
What I need the drop down for is to swap out the class "gb-arches" with another class "gb-esch" (one is blue, one is orange as I mentioned), I'm still unsure how the code above will know which style to apply.
If you set a theme-class on the element then you can use the theme class to decide how your banner etc. should look like since you can use it to specify what a h1 should look like and what background-color or image should be used on a div etc.
But could you post a screendump of your master-page and what it looks like when you're trying to insert the macro?
How to connect custom data type dropdown list with styles
Hello,
I'm trying to create a control that allows the user to select a background style in the back office (Content Section). If the user selects Orange, the background on a banner displays the Orange css styles, and if they select Blue, the Blue css styles.
I created a Data Type Dropdown list with the values Blue and Orange and connected it to a Property on the master page, but I have no idea how to make the styles render based on what they use chooses.
I'm usinging Umbraco 7 and developing in Visual Studio.
I'm not a developer so if possible please explain like i'm 5 ;)
Hi Christine
I'll try and see if I can explain this in a very simple way :)
Ok...In Umbraco there is a developer section. Go to "Developer". In this section there is a folder called "Data types", right click this folder and choose "Create".
Congrats! You have created the data type - Now let's add it to a document type
Go to the "Settings" section
Now you can go to the "Content" section and view the document type / Page type where you just added the datatype and see that you can now choose a theme color.
I hope this helps! :) But otherwise don't worry, we will get here together.
/Jan
Also make sure to checkout the documentation here http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/ where the different concepts of datatype, document type etc. are explained.
/Jan
Thanks so much for your reply.
What you explained above I have done, but how do I connect the values in the dropdown to the styles? Now it just renders the text "Orange" or "Blue" when published.
Hi Christine
Well that's a big step and now it's time to render the selected value in your HTML.
Have you made any macroes before? If so are you using Razor or XSLT?
When I know what you're comfortable with we can move on and get our hands dirty :)
/Jan
Hi Jan,
I have created Macros and XSLT files so I'm ready for the big step :)
Christine
Hi Christine
Ok, now there are a couple of ways you can achieve your goal. But I assume you're having your styles in one stylesheet and simply want to change the background color on the HTML element dependent on a class name. The code in the following steps can be a bit ugly...but it works...:)
Let's start by creating the XSLT macro - Seems you know how to do it already but I'm taking it from the top anyway.
- Go to the developer section
- Right click the "XSLT" folder and choose "create" - Give a proper name for you xslt file (and macro) make sure the "create macro" checkbox is checked (should be by default).
- Now the xslt file and macro is created
- In the xslt file you can write the following code
<xsl:text>class="</xsl:text>
<xsl:value-of select="$currentPage/ancestor-or-self::Homepage/themeDropdown" />
<xsl:text>"</xsl:text>
The above code will output class="orange" for instance. But be aware that I'm asuming you have placed the option of choosing a background color on your "Homepage" document type - If your "Homepage" document type has another alias, then replace "Homepage" with your alias - The same goes for the alias for your dropdown datatype, which I assume is named "themeDropdown". It's probably also a good idea to add a check to figure out if there is a value or not...but let's just focus on writing out the selected stuff first.
Now you should be done creating the macro and the XSLT file. Next we'll add the macro to your template on the <html> element.
- Go to the "Settings" section
- Go to your master template or the template where your <html> opening tag is placed
- Add the macro to your template in the <html> tag like this `<html <umbraco:Macro alias="NameOfYourMacro" runat="server" />>`
As you have probably already fifured out you should replace the macro alias "NameOfYourMacro" with the alias of your macro :)
Now you should see a class added to the <html> element if you view your source and it should have a value of either empty or orange, blue or whatever you have chosen to save on your page.
I hope the above makes sense - Happy coding :)
/Jan
Thanks for your reply.
I followed the above steps, but my master page did not like having the macro placed in the <html> tag - i got an error that the master page could not be found :(
Would it be easier with scripting?
Also, I don't see how the above will know which style to render? Mine looks like this:
<xsl:text>class="</xsl:text>
<xsl:value-of select="$currentPage/ancestor-or-self::Master/titleBanner" />
<xsl:text>"</xsl:text>
I'm placing the title of the page inside the graphic banner, the HTML looks like this:
<div id="graphicBanner">
<div class="gb-arches">
<div class="container">
<div class="bg-page-title">
<h1>@Umbraco.Field("pageHeader")</h1>
What I need the drop down for is to swap out the class "gb-arches" with another class "gb-esch" (one is blue, one is orange as I mentioned), I'm still unsure how the code above will know which style to apply.
Thanks for your help!
Hi Christine
If you set a theme-class on the element then you can use the theme class to decide how your banner etc. should look like since you can use it to specify what a h1 should look like and what background-color or image should be used on a div etc.
But could you post a screendump of your master-page and what it looks like when you're trying to insert the macro?
/Jan
is working on a reply...