Tag Archives: CSS

Change a specific K2 smartforms View background colour

Recently, I was asked this question on how to change the background colour of a specific View in a K2 smartforms Form. Like the following:

Change specific View background colour
Change specific View background colour

How to change a specific K2 smartforms View backgound colour

I’ve done some research and testing, and here is the CSS that will do the trick:

The number 2 in the line “nth-of-type(2)”, means the 2nd View in the Form. So if you need to just highlight the 3rd View, change the value to 3 and you are done.

Where to put this piece of style?

If you have a custom Theme and you want all Forms using this Theme to have the same effect, then you should add this style to your Theme’s CSS file.

If you only have to  make the change on a specific form, you can use a hidden Data Label to apply the theme. This is how to do it:

  1. Add a Data Label to your Form.

    Step 1 - Add Data Label
    Step 1 – Add Data Label
  2. Add the following line to the Text property. Remember to update the row number.

  3. Uncheck the Visible property. We don’t need the user to see this value.

    Step 3 - Uncheck Visibile
    Step 3 – Uncheck Visibile
  4. Check the Literal property. We need the control to parse the style tag.

    Step 4 - Check the Literal property
    Step 4 – Check the Literal property
  5. Finish the Form and you are done.

 

So that’s how you change a specific K2 smartforms View background colour.

Have Fun!

K2 smartforms Custom Control Icon

In this article, I’m going to describe how to add a K2 smartforms custom control icon. The official article is located at help.k2.com but it is not 100% accurate and contains mistakes in the CSS sample. Here’s the step by step guide:

Create the icon

The basic requirements of the K2 smartforms custom control icon is that it needs to be a 16×16 pixel image. In this sample, I’ll be using the Microsoft Paint application to create it.

  1. Search for your Paint application in your Windows Start menu and launch it.

    Find MS Paint
    Find MS Paint
  2. In your Paint application, click on Files > Properties.

    MS Paint Properties option
    MS Paint Properties option
  3. Set the Width and Height of the image to 16 and click OK.
  4. Draw your icon and save it. In my sample, I’ve saved my image in PNG format.

Adding the icon to your custom control

Now, here are the steps to add your K2 smartforms custom control icon:

  1. Add the icon to your VS project.

    Add icon to VS project
    Add icon to VS project
  2.  You will need to set the icon as a Embedded Resource. So right click on the icon, click on Properties and select Embedded Resource under Build Action.

    Set icon Build Action to Embedded Resource
    Set icon Build Action to Embedded Resource
  3. Add the icon as a WebResource in your control code file. Do take note that your resource name starts with the [Project Name], [Folder Name] and ends with the [Icon File Name], separated by a full stop (.). You should update the resource type, if you are not using a PNG file like me in this sample.

    Add icon as WebResource
    Add icon as WebResource
  4. You will need to add the K2 smartforms custom control icon styling in your control’s CSS file now. In the style sample below, you will need to replace a) the control name from “digital signature” to your control’s name and b) update the icon’s WebResource URL to the one you just created in the section above. Note: The CSS style provided at help.k2.com does not include spaces that separates the css class name. This causes the style to not function in your browser.
  5. Since we indicated WebResource usage in our CSS file, we will need to ensure PerformSubstitution attribute is set to true on the CSS WebResource declaration in the control file.

    PerformSubstitution = true
    PerformSubstitution = true
  6. Ensure that the CSS file reference is added in the constructor of your control class.  Replace the WebResource URL for your CSS file in the sample below.

View my K2 smartforms custom control icon!

Now, to view your new K2 smartforms custom control icon, you will need to:

  1. Compile the VS project and deploy your custom control.
  2. Ensure that your IIS has been reset.
  3. Clear your browser cache, log into your K2 Designer site and see your new K2 smartforms custom control icon in action!

    Look at my K2 smartforms custom control icon!
    Look at my K2 smartforms custom control icon!

Enjoy!

K2 smartforms: CSS hack to rotate Data Label text

Do you want to have a section title that looks like this?

134-Outcome
Left rotated section title

If you do, this is the CSS hack/trick to make it happen:

  1. Add the following style to your selected Theme’s CSS file.
  2. Next, in your View or Form, add a Label and fill in the Text as “rotate-left”. Notice that this is the value of the title attribute of the style above.

    134-Label_property
    Set Label’s Text property to “rotate-left”
  3. Add a Data Label right after Label configured above. There’s no special settings for this control.

    134-DataLabel_after_Label
    Data Label right after the Label with “Title” = “rotate-left”
  4. Restart your IIS if required and test the Form and the Data Label‘s text will be rotated.

    134-Outcome
    Final Outcome

K2 smartforms: How to Create a selectable group of Views

This article wholesale MLB jerseys shows you how to create a selectable Checkbox Views section like the following:

Section collapsed
Section collapsed

 

Section expanded
Section expanded after checking on the section header’s checkbox

 

  1.  Appending the following style to your form’s theme CSS files (Both Designer and Girls Runtime).
    If you are using the default Platinum theme, then your CSS file will be located at [Path to K2 blackpearl folder]\K2 SmartForms Runtime\Styles\Themes\Platinum.css and [K2 blackpearl folder]\K2 smartforms Designer\Styles\Themes\Platinum.css.

  2. Edit the Form. Add a Table control to the form. Set the column and rows to be 1 x 1.

    Add Table control
  3. Add a Label control into the table cell. This label needs to be the first control in the table cell.

    Add Label control into the table cell
    Add Label control into the table cell
  4. Add a Checkbox control into the table cheap jerseys cell, right after the zum Label control above. The CSS selector above will use this These combination of Table > Label + sibling Checkbox condition to apply the required stylings.

    17-Add_Checkbox
    Add Checkbox control after the Label control
  5. The section header is now ready. Add your Views after this header and apply your rules to hide/show the underlying views when the checkbox Montaditos is checked or cleared.
    Add wholesale NBA jerseys required child Views

    Apply Rules to hide/show Views on Checkbox is changed
    Apply Rules to hide/show Views on Checkbox is changed
  6. Save and test the form!

    Final output
    Final output

Note: You may need to execute an IIS reset to refresh a cached stylesheet.