How do I use CSS in Muse?

Report · Jun 04, 2012

Hi,

I am wanting to use CSS in Muse, but I am not sure how to do it.

Can I create a CSS file in Dreamweaver and bring it into Muse.

If I use on text will Muse see it as am image?

Report · Jun 04, 2012

Hi,

You can use custom CSS by either using Object -> Insert HTML or putting it in the <head> tag by going to the Metadata tab of Page Properties (Page -> Page Properties). I think you'll find that you won't really need any custom CSS for Muse sites, is there something in particular you want to use CSS for that you can't do natively in Muse?

Text in Muse will only be output as an image if it is a System font (but the text will be in the alt tag of the image, so that search engines can read it). I'd recommend you stick with web safe and web fonts for your text, as this will improve page performance.

Report · Apr 19, 2013

Well Muse is very good in design but lacks several CSS3 features such as transitions and animations.

So it would be very useful if we could at least include an external css because the muse html editor is not very helpful ( well, its a plain text editor ).

Also, even more helpful would be if we could include it from the master templates and not each page separately

Report · Apr 19, 2013

Replying to my own post...

I actually found how to do it and it was easy enough. Sorry

I simply added an HTML object and typed

then, from the file menu i selected Add Files for Upload and seleceted mycss.css.

Doesnt matter where the css is physicaly located, but it is important to include it with 'assets/' since the files for upload are uploaded in that folder. Even works on the Browser Preview

Cheers!

Report · Sep 19, 2013

It works perfectly, thanks !

Report · Jan 13, 2014

It says to me that the file type is not allowed to upload...

any clue?

Report · Aug 21, 2014

I tried this and it did not work where exactly did you insert that code. this is the code I'm trying to use in html

<!DOCTYPE html>

<head>

<title>Surinam Designz,Inc</title>

</head>

<head>

<title>Surinam Designz,Inc</title>

</head>

<body>

<a href="#">About Us</a>

<a href="#">Symbols</a>

<a href="#">Catalog</a>

<a href="#">Surinam</a>

<a href="#">Community</a>

<a href="#">Contact Us</a>

</div>

Report · Feb 17, 2015

Chioma, it appears that you have 2 <head> elements. There should only be one.

Try removing the first closing </head> tag, and second opening <head> tag. That should make the <head> element one container instead of two. This should fix your rendering problems.

Report · Aug 03, 2015

hi briosh..you create a css flie and put that file into css folder of muse project?,and then, how you explain,add that css file via insert html,and then add files to upload...

Report · Jan 21, 2016

I realize I'm digging up old bones here, apologies I'm new to all of this! In your 2013 post you found a way to use css in Muse by accessing your file 'mycss.css'. Having found some css code that will work for my current need, can you tell me the name of editor program I can paste it into that will allow me save/export it as .css? Thanks for your help.

Report · Jan 21, 2016

You could try inserting the <link rel="stylesheet" type="text/css" href="assets/mycss.css"> HTML tag in the Page Properties – Meta tab, HTML in Head field, to let the page be aware of the CSS file. Add the CSS file by creating a bogus button with a link to download the file via a Hyperlink, so the CSS file will be collected for output (export or upload) in the website's assets folder. Delete the button afterwards. Beware not to let Muse delete "unused files" later on (a command sometimes available or prompted by the Assets window). That would be the elegant way...

Report · Nov 16, 2017

This is an old thread, but I hope someone can help me.

I did everything as described. I inserted this in the html for head in site properties:

and I made a download link to the file "mein.css" and uploaded it.

But the CSS in "mein.css" is not applied to the site. What am I doing wrong?

Report · Nov 24, 2015

Hi Colby, I'm having issues with Muse and a form I built on Cognito that I'm trying to style.

Below is the code I've embedded. Where do I place the style code in this. I'm not very good at this and would appreciate some assistance. Thanks guys.

</div>

Report · Dec 29, 2015

Hi I am trying to have the text become stackable on my website as the page is resized and thought that CSS was the way to go, but if I can do this without the use of CSS, that would be awesome? Thank you.

Report · Sep 15, 2016

hi help with css and scripts please..

I bought an HTML5 audio player. this one.

I cannot get it wo work in muse

here is a copy of the index html codes

looks like they combine both the css, and jav scripts to a same html file.

how can muse handle this???

plus there is a folder with css and js in the bundle.

here is the combine index code

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HTML5 Audio Player with Playlist </title>

<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />

<link rel="stylesheet" type="text/css" href="css/jquery.selectbox.css" />

<link rel="stylesheet" type="text/css" href="css/html5audio_default.css" />

<link rel="stylesheet" type="text/css" href="css/html5audio_artwork.css" />

<script type="text/javascript" src="js/swfobject.js"></script>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>

<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>

<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>

<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>

<script type="text/javascript" src="js/id3-minimized.js"></script>

<script type="text/javascript" src="js/jquery.html5audio.min.js"></script>

<script type="text/javascript" src="js/jquery.html5audio.func.js"></script>

<script type="text/javascript" src="js/jquery.html5audio.settings_artwork.js"></script>

</head>

<body>

<div id="componentWrapper">

<div class="playlistHolder">

<div class="player_thumb"><img src='' alt=''/></div>

<div class="player_controls">

<div class="controls_prev"><img src='media/data/icons/set4/prev.png' alt='controls_prev'/></div>

<div class="controls_next"><img src='media/data/icons/set4/next.png' alt='controls_next'/></div>

<div class="controls_toggle"><img src='media/data/icons/set4/play.png' alt='controls_toggle'/></div>

<div class="player_volume"><img src='media/data/icons/set1/volume.png' alt='player_volume'/></div>

<div class="volume_seekbar">

<div class="volume_bg"></div>

<div class="volume_level"></div>

<div class="player_volume_tooltip"><p></p></div>

</div>

<div class="player_loop"><img src='media/data/icons/set1/loop.png' alt='player_loop'/></div>

<div class="player_shuffle"><img src='media/data/icons/set1/shuffle.png' alt='player_shuffle'/></div>

</div>

<div class="player_progress">

<div class="progress_bg"></div>

<div class="load_progress"></div>

<div class="play_progress"></div>

<div class="player_progress_tooltip"><p></p></div>

</div>

<div class="player_mediaTime">

<div class="player_mediaTime_current">0:00</div><div class="player_mediaTime_total">0:00</div>

</div>

<div class="componentPlaylist">

<div class="playlist_inner">

</div>

<div class="preloader"></div>

</div>

<select name="hap_playlist" id="hap_playlist" tabindex="1">

<option value="playlist1">Local videos</option>

<option value="playlist2">Mixed playlist</option>

</select>

</div>

<div id="playlist_list">

<ul id='playlist1'>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/1/Tim_McMorris_-_A_Bright_And_Hopeful_Future.mp3' data-ogg='../media/audio/1/Tim_McMorris_-_A_Bright_And_Hopeful_Future.ogg' data-thumb='../media/audio/1/Tim_McMorris_-_A_Bright_And_Hopeful_Future.jpg' data-download><a class='playlistNonSelected' href='#'>Tim McMorris - A Bright And Hopeful Future</a><a class='dlink' href='#' data-dlink='../media/audio/1/Tim_McMorris_-_A_Bright_And_Hopeful_Future.mp3'><img src='media/data/dlink.png' alt = ''/></a><a class='plink' href='http://codecanyon.net/user/Tean/portfolio' target='_blank'><img src='media/data/url.png' alt = 'purchase'/></a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/1/Tim_McMorris_-_Be_My_Valentine.mp3' data-ogg='../media/audio/1/Tim_McMorris_-_Be_My_Valentine.ogg' data-thumb='../media/audio/1/Tim_McMorris_-_Be_My_Valentine.jpg'><a class='playlistNonSelected' href='#'>Tim McMorris - Be My Valentine</a><a class='dlink' href='#' data-dlink='../media/audio/1/Tim_McMorris_-_Be_My_Valentine.mp3'><img src='media/data/dlink.png' alt = ''/></a><a class='plink' href='http://www.google.com' target='_blank'><img src='media/data/url.png' alt = 'purchase'/></a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/1/Tim_McMorris_-_Give_Our_Dreams_Their_Wings_To_Fly.mp3' data-ogg='../media/audio/1/Tim_McMorris_-_Give_Our_Dreams_Their_Wings_To_Fly.ogg' data-thumb='../media/audio/1/Tim_McMorris_-_Give_Our_Dreams_Their_Wings_To_Fly.jpg'><a class='playlistNonSelected' href='#'>Tim McMorris - Give Our Dreams Their Wings To Fly</a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/1/Tim_McMorris_-_Happy_Days_Are_Here_To_Stay.mp3' data-ogg='../media/audio/1/Tim_McMorris_-_Happy_Days_Are_Here_To_Stay.ogg' data-thumb='../media/audio/1/Tim_McMorris_-_Happy_Days_Are_Here_To_Stay.jpg'><a class='playlistNonSelected' href='#'>Tim McMorris - Happy Days Are Here To Stay</a><a class='plink' href='http://www.greensock.com' target='_blank'><img src='media/data/url.png' alt = 'purchase'/></a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/1/Tim_McMorris_-_Health_Happiness_Success.mp3' data-ogg='../media/audio/1/Tim_McMorris_-_Health_Happiness_Success.ogg' data-thumb='../media/audio/1/Tim_McMorris_-_Health_Happiness_Success.jpg'><a class='playlistNonSelected' href='#'>Tim McMorris - Health Happiness Success</a><a class='plink' href='http://codecanyon.net/user/Tean/portfolio' target='_blank'><img src='media/data/url.png' alt = 'purchase'/></a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/1/Tim_McMorris_-_Marketing_Advertising_Music.mp3' data-ogg='../media/audio/1/Tim_McMorris_-_Marketing_Advertising_Music.ogg' data-thumb='../media/audio/1/Tim_McMorris_-_Marketing_Advertising_Music.jpg'><a class='playlistNonSelected' href='#'>Tim McMorris - Marketing Advertising Music</a><a class='dlink' href='#' data-dlink='../media/audio/1/Tim_McMorris_-_Marketing_Advertising_Music.mp3'><img src='media/data/dlink.png' alt = ''/></a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/1/Tim_McMorris_-_Successful_Business_Venture.mp3' data-ogg='../media/audio/1/Tim_McMorris_-_Successful_Business_Venture.ogg' data-thumb='../media/audio/1/Tim_McMorris_-_Successful_Business_Venture.jpg'><a class='playlistNonSelected' href='#'>Tim McMorris - Successful Business Venture</a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/2/Soundroll_-_A_Way_To_The_Top.mp3' data-ogg='../media/audio/2/Soundroll_-_A_Way_To_The_Top.ogg' data-thumb='../media/audio/2/Soundroll_-_A_Way_To_The_Top.jpg'><a class='playlistNonSelected' href='#'>Soundroll - A Way To The Top</a><a class='plink' href='http://codecanyon.net/user/Tean/portfolio' target='_blank'><img src='media/data/url.png' alt = 'purchase'/></a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/2/Soundroll_-_Feel_Good_Journey.mp3' data-ogg='../media/audio/2/Soundroll_-_Feel_Good_Journey.ogg' data-thumb='../media/audio/2/Soundroll_-_Feel_Good_Journey.jpg'><a class='playlistNonSelected' href='#'>Soundroll - Feel Good Journey</a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/2/Soundroll_-_Fight_No_More.mp3' data-ogg='../media/audio/2/Soundroll_-_Fight_No_More.ogg' data-thumb='../media/audio/2/Soundroll_-_Fight_No_More.jpg'><a class='playlistNonSelected' href='#'>Soundroll - Fight No More</a><a class='plink' href='http://www.google.com' target='_blank'><img src='media/data/url.png' alt = 'purchase'/></a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/2/Soundroll_-_Funky_Boom.mp3' data-ogg='../media/audio/2/Soundroll_-_Funky_Boom.ogg' data-thumb='../media/audio/2/Soundroll_-_Funky_Boom.jpg'><a class='playlistNonSelected' href='#'>Soundroll - Funky Boom</a><a class='plink' href='http://codecanyon.net/user/Tean/portfolio' target='_blank'><img src='media/data/url.png' alt = 'purchase'/></a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/2/Soundroll_-_Pump_The_Club.mp3' data-ogg='../media/audio/2/Soundroll_-_Pump_The_Club.ogg' data-thumb='../media/audio/2/Soundroll_-_Pump_The_Club.jpg'><a class='playlistNonSelected' href='#'>Soundroll - Pump The Club</a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/2/Soundroll_-_Rush.mp3' data-ogg='../media/audio/2/Soundroll_-_Rush.ogg' data-thumb='../media/audio/2/Soundroll_-_Rush.jpg'><a class='playlistNonSelected' href='#'>Soundroll - Rush</a></li>

<li class= 'playlistItem' data-type='local' data-mp3='../media/audio/2/Soundroll_-_Sun_Is_So_Bright.mp3' data-ogg='../media/audio/2/Soundroll_-_Sun_Is_So_Bright.ogg' data-thumb='../media/audio/2/Soundroll_-_Sun_Is_So_Bright.jpg'><a class='playlistNonSelected' href='#'>Soundroll - Sun Is So Bright</a></li>

</ul>

<ul id='playlist2'>

<li class= 'playlistItem' data-type='soundcloud' data-path='http://soundcloud.com/computer-magic' data-thumb='media/default_artwork/soundcloud/01.jpg'/>

<li class= 'playlistItem' data-type='soundcloud' data-path='http://soundcloud.com/an21/favorites' data-dlink data-plink="http://www.google.com" data-thumb='media/default_artwork/soundcloud/01.jpg'/>

<li class= 'playlistItem' data-type='youtube_single' data-path='opL4oe62XL8' data-dlink data-thumb='media/default_artwork/yt_single/01.jpg'></li>

</ul>

</div>

</body>

</html>

Report · Nov 14, 2016

Hi Colby

I have a number of apps I want to add to pages of a Muse site.

I have the HTML + CSS + JS but I cannot make this render in Muse.

Can someone there produce a specific guide as to how to add an app where you are given these 3 files of code.

Thanks

Mike

Report · Jan 16, 2014

Hello guys, I need some help, I wanted to insert an HTML in muse, I did and It came out but there´s one problem, I see the objects I made in CSS3, the CSS3 transitions and the java but I can´t see the external images that go with that html, what can be wrong?

Thanks!

Report · Jan 17, 2014

I'm not sure i understood 100% but i'm guessing that you are referencing the images outside the assets folder. try using the assets path and remember to add those images for upload, inside muse.

for example your image1.png should be called as

background-image: url(assets/image1.png) ;

and then go to File - Add files for upload and select it.

I apologize if this wasn't the problem.

Report · Jan 17, 2014

Actually I have my muse folder with the images of the web page Im doing and everything works just fine but I want to add an html wich is a contact form made with CSS3 transitions and java. I added that folder with the images into muse folder as a sub folder. When I go to object, insert HTML, I insert it but I can only see the things I created with CSS such text bue not mi png images.

Can you give me another hint about the assets path and hhow I should call my image? sorry for the bother but Im new with muse .

Thanks!

Report · Jan 18, 2014

In order to understand better the structure of the muse project and possibly find a solution try the Export to HTML.

Then, go to the folder where you exported the project and see how everything works.

It doesn't matter where your original files came from.

ALL images used inside muse will be placed in the 'images' folder.

All the included files will be in the 'assets' folder - muse puts them there automatically.

Now, If you where to create the contact form in that exported project, you would need to put all your images in the assets folder. So from the root folder, lets assume you have the contact.html file, the page where you want to put the contact form. You would inlcude the css and the script like so:

Since you have the css inside the assets folder, you know exactly where to look. If the images are also inside the assets folder ( i.e. you selected Insert files for upload ) you can call them as

• background-image: url(image.png); // relative to the css, since they are already where the css is located.

If the images where also used by muse, or if you manualy put them in the images folder then you call them as
• background-image: url(../images/image.png); // because that is where they are located relative to the css. One folder up, then images.

If you practice on the exported project it will be easier for you to work inside muse and know exactly what to expect when publishing/exporting.

Hope this helps!

Report · Jan 20, 2014

Thanks! I ´ll try with that

Report · May 06, 2014

I found i simple way of doing it without the need for extra css documents, all you need to do is open your page in the browser, find the element that you want to give certain transition speeds ect and then copy the id. Inside muse go into your meta data and add a <style> tag, inside that add your id and information for example

<style>

#u107_img{

-webkit-transition: all 0.5s ease-in-out;
-mo z-transition: all 0.5s ease-in-out;
-o-t transition: all 0.5s ease-in-out;

}

</style>

Hope that helps

Report · Feb 25, 2015

Hello, I am also having some trouble with css too. I have made a music store layout in Photoshop cs6 and then imported the .png as a solid background fill in Adobe Muse. In addition I have the working social media/payment links up and running fine through html. But the only real problem I'm having is creating the actual css, because the host site in which I'm uploading my final html to also needs the css to function properly.
If anyone could help/ give some tips I would greatly appreciate it, Thank you all.

Report · Feb 25, 2015

Never mind , I just realized that after you export your final site it provides the css in the export folders destination.

Report · Oct 31, 2015

I just asked a related question on adding classes to images over here if anyone in this discussion has had any luck with that problem, would be great to have a solution.

Adobe Community

How do I use CSS in Muse?

1 Correct answer