Copy link to clipboard
Copied
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?
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
...Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
<link rel="stylesheet" type="text/css" href="assets/mycss.css">
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!
Copy link to clipboard
Copied
It works perfectly, thanks !
Copy link to clipboard
Copied
It says to me that the file type is not allowed to upload...
any clue?
Copy link to clipboard
Copied
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>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="key, words" />
<meta name="description" content="description" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="alternate" title="Website Feed" href="rss.php" type="application/rss+xml" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>Surinam Designz,Inc</title>
</head>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Surinam Designz,Inc</title>
</head>
<body>
<div id="navigation">
<a href="#">Home</a>
<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>
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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...
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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...
Copy link to clipboard
Copied
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:
<link rel="stylesheet" type="text/css" href="assets/mein.css">
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?
Copy link to clipboard
Copied
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 class="cognito">
<script src="https://services.cognitoforms.com/s/Cbx7WTE14E25_TCRIO8ugA"></script>
<script>Cognito.load("forms", { id: "1" });</script>
</div>
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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" /><!-- scroll in playlist -->
<link rel="stylesheet" type="text/css" href="css/jquery.selectbox.css" /><!-- playlist selector dropdown -->
<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><!-- flash backup -->
<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><!-- jquery ui sortable/draggable -->
<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script><!-- mobile drag/sort -->
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script><!-- scroll in playlist -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script><!-- scroll in playlist -->
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script><!-- playlist selector dropdown -->
<script type="text/javascript" src="js/id3-minimized.js"></script><!-- id3 tags -->
<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>
<!-- player code -->
<div id="componentWrapper">
<div class="playlistHolder">
<div class="player_thumb"><img src='' alt=''/></div>
<div class="player_controls">
<!-- previous -->
<div class="controls_prev"><img src='media/data/icons/set4/prev.png' alt='controls_prev'/></div>
<!-- next -->
<div class="controls_next"><img src='media/data/icons/set4/next.png' alt='controls_next'/></div>
<!-- pause/play -->
<div class="controls_toggle"><img src='media/data/icons/set4/play.png' alt='controls_toggle'/></div>
<!-- volume -->
<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>
<!-- volume tooltip -->
<div class="player_volume_tooltip"><p></p></div>
</div>
<!-- loop -->
<div class="player_loop"><img src='media/data/icons/set1/loop.png' alt='player_loop'/></div>
<!-- shuffle -->
<div class="player_shuffle"><img src='media/data/icons/set1/shuffle.png' alt='player_shuffle'/></div>
</div>
<!-- progress -->
<div class="player_progress">
<div class="progress_bg"></div>
<div class="load_progress"></div>
<div class="play_progress"></div>
<!-- progress tooltip -->
<div class="player_progress_tooltip"><p></p></div>
</div>
<!-- song time -->
<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">
<!-- playlist items are appended here! -->
</div>
</div>
<!-- preloader -->
<div class="preloader"></div>
</div>
<!-- playlist selector: http://www.bulgaria-web-developers.com/projects/javascript/selectbox/ -->
<select name="hap_playlist" id="hap_playlist" tabindex="1">
<option value="playlist1">Local videos</option>
<option value="playlist2">Mixed playlist</option>
</select>
</div>
<!-- PLAYLIST LIST -->
<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='podcast' data-path='http://robertkelly.libsyn.com/rss' data-dlink data-thumb='media/default_artwork/podcast/01.jpg' ><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='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='ofm_single' data-path='D4lw' data-dlink data-thumb='media/default_artwork/ofm_single/01.jpg'><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='ofm_project' data-path='edB6' data-dlink><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='youtube_single' data-path='opL4oe62XL8' data-dlink data-thumb='media/default_artwork/yt_single/01.jpg'></li>
<li class= 'playlistItem' data-type='youtube_playlist' data-path='PLDcnymzs18LVXfO_x0Ei0R24qDbVtyy66' data-dlink data-plink="http://www.google.com" data-thumb='media/default_artwork/yt_playlist/01.jpg'></li>
</ul>
</div>
</body>
</html>
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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:
<link rel="stylesheet" type="text/css" href="assets/contact.css">
<link rel="javascript" type="text/javascript" href="assets/script.js">
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!
Copy link to clipboard
Copied
Thanks! I ´ll try with that
Copy link to clipboard
Copied
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{
}
</style>
Hope that helps
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Never mind , I just realized that after you export your final site it provides the css in the export folders destination.
Copy link to clipboard
Copied
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.