Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


How do I use CSS in Muse?

Community Beginner ,
Jun 04, 2012 Jun 04, 2012

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?

Views

66.4K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , Jan 18, 2014 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...

Likes

Translate

Translate
Adobe Employee ,
Jun 04, 2012 Jun 04, 2012

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2013 Apr 19, 2013

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2013 Apr 19, 2013

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 19, 2013 Sep 19, 2013

Copy link to clipboard

Copied

It works perfectly, thanks !

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 13, 2014 Jan 13, 2014

Copy link to clipboard

Copied

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

any clue?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 21, 2014 Aug 21, 2014

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 17, 2015 Feb 17, 2015

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 03, 2015 Aug 03, 2015

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...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 21, 2016 Jan 21, 2016

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Jan 21, 2016 Jan 21, 2016

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...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 16, 2017 Nov 16, 2017

Copy link to clipboard

Copied

LATEST

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 24, 2015 Nov 24, 2015

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>

Screen Shot 2015-11-24 at 9.27.01 PM.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 29, 2015 Dec 29, 2015

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 15, 2016 Sep 15, 2016

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 14, 2016 Nov 14, 2016

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 16, 2014 Jan 16, 2014

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 17, 2014 Jan 17, 2014

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 17, 2014 Jan 17, 2014

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 18, 2014 Jan 18, 2014

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 20, 2014 Jan 20, 2014

Copy link to clipboard

Copied

Thanks! I ´ll try with that

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 06, 2014 May 06, 2014

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{

  1.      -webkit-transition: all 0.5s ease-in-out;
  2. -mo  z-transition: all 0.5s ease-in-out;
  3. -o-t transition: all 0.5s ease-in-out;

}

</style>

Hope that helps

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 25, 2015 Feb 25, 2015

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 25, 2015 Feb 25, 2015

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 31, 2015 Oct 31, 2015

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
    • 1
    • 2