How can I apply additional CSS styles to specific elements using Adobe Muse?

Question

I am quite new to Muse but not web development in general. I have inherited a Muse-developed solution that has required the files it exports be manually updated before uploading to an ftp site.

Specifically some elements getting extra css styling to them to produce an animation effect.

My question is can this be done within Muse itself so I don't have to keep repeating these steps every time a change is made?

I can see how to add the required css file to the main page header through the Properties page but there doesn't seem to be any "advanced user" option that lets me just enter the extra styles to the appropriate elements. I have searched here and other places for any documentation or hints with no luck.

Any help is greatly appreciated. Thanks!

Answer 1

Use Graphic Styles panel to define a graphic style. The name of it will be your class.

This approach has certain limitations:

1. Only one class per object
2. the graphic appearance of the object will be overwritten if the graphic style is applied. So it's advised to apply graphic style first and than change the appearance
3. The class can't be applied directly to a widget itself, but to it's contents.

P.S. Afterwards you can use jQuery with jQuery injector widget to add additional styles if you need it.

Example Character Style: customclass JQuery code to add classes "class1" and "class2" to elements with this class:

$(".customclass").addClass("class1 class2")

$(".customclass").addClass("class1 class2")

.customclass{
background-color: red;
width: 100%
}

.class1{
color: white;
}

.class2{
padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class = "customclass">This will be custumclass, class1 and class2</p>
  <p class = "somemuseclass customclass"> This also custumclass, class1 and class2</p>
  <p class = "u-l34 ">This is not affected</p>
</div>