0

I have created a visual webpart and I need to add custom css on it. Example I want to add the following css:

.google-visualization-orgchart-node {
text-align: center;
vertical-align: middle;
width: 139px !important;
font-family: arial,helvetica;
font-size: 12px !important;
cursor: default;
border: 0px solid #b5d9ea;
border-radius: 0px !important;
color: white;
background-color: #25a0da;
}

to my c# project. Any idea how can I do this?

  • I think it would be better to add the CSS to the site/page where the webpart will be used, easier to change it when you need to. – Christoffer Jun 22 '16 at 13:26
1

If you want to apply the CSS to your Google Organization Chart webpart than you can just apply it from the ASPX page like (Usual way) below.

<style type="text\css">
.google-visualization-orgchart-node {
text-align: center;
vertical-align: middle;
width: 139px !important;
font-family: arial,helvetica;
font-size: 12px !important;
cursor: default;
border: 0px solid #b5d9ea;
border-radius: 0px !important;
color: white;
background-color: #25a0da;
}
</style>

Check this fiddle.

http://jsfiddle.net/w8Ytq/2/

  • Check the proper Class Name OR IDs using the IE's Developer Tools. than apply same classes to your css. – Hardik Jun 22 '16 at 13:36
1

When you are working in visual webpart, you can add css & javascript in following ways.

Option 1:

  • Open your ascx file in the webpart.
  • Add <style type="text/css"> </style> tag
  • Add your css properties into this style tag.
  • Use the classes in you html block.

Option 2:

  • Create a text file. paste entire css code in it.
  • Do not add <style> tag in it.
  • Save it with .css extension.
  • Upload it to any library like Site Assets
  • Open your ascx file in the webpart.
  • Add reference to your .css file
  • Use the classes in you html block.

similar for js code as well. - Use tag - or save it in .js file and use its reference.

  • welcome. You can up vote and mark it as answer, It will help someone looking for same – Gaurravs Jun 22 '16 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.