Convert header CSS TO inline CSS

I know this seems backward but from what I understand html
emails often do not correctly read CSS that is in the header, and
will only read inline CSS. As the html page I have already has the
CSS in the header, is there an extension or ANY OTHER WAY to easily
parse it out and insert that CSS inline??
thanks in advance!
-ML

You don't need to do this. Just move your stylesheet below
the <body> tag
before sending the email.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Mat Lebowitz" <[email protected]> wrote in
message
news:ebibid$9s8$[email protected]..
> still no responses? come on you pundits, i know there's
an extension or a
> technique to do this, isnt' there??

Similar Messages

Should I convert my inline css to external?

I was told my site would be cleaner and easier for google to find if I changed my css styles to external. All my pages are a little different, so I was also told I would have to do it for every page. What is the best way to do this? I knew very little about css when I created the site, sorry.
Do I select everything from <style to style> right click and select Convert inline CSS to rule. That option is greyed out. Do I select new rule?
The site is www.macrophotographer.net I am a not a professional web designer so go easy on me.

I have had a look at source code for your home page, your styles are embedded in two groups between your pages head tags, so it will be easy to externalise the css. In code view if you put your cursor in one of the styles you wish to move and then click on the 'Move or convert css' button or go to format > css styles > move css rules ... you can move the styles one by one into an external stylesheet.
The other and what I think will be the quicker way for you will be to open your webpage then go to File > New > Blank Page > CSS > Create, this will create a new empty stylesheet already with the encoding set. With this still open switch tabs back to your webpage and select all the code between the <style type="text/css"> and </style> cut it and then switch tabs back to the stylesheet and paste. Save the stylesheet, then switch tabs back to your webpage, in code view you need to enter the following line before the </head> tag
<link href="/nameofstylesheet.css" rel="stylesheet" type="text/css" />
Richard

When inserting image how do I force inline CSS not image tags?

When I insert an image to my page layout it always uses html width= and height= tags
e.g. <img src="images/wordpress.jpg" width="125" height="112">
This is driving me nuts
(I thought these tags were pretty old fashioned for current doctypes. Why does dreamweaver continue to use them?)
I want inserted images to be shown with inline CSS
e.g. <img src="images/wordpress.jpg" style="width:125px; height:112px;">
I can then more easily add more CSS like padding, floats etc as needed.
Any ideas how I set this up as a default or quickly convert?
(I dont really want to add lots of unique image classes to a style sheet)
many thanks!
Dreamweaver CS6

Image height & width values are not deprecated. Unless you're building a responsive web site, it is usually better to have these attributes stated in the HTML.
But when I don't want them, I do the following:
Insert > Image > browse to file...
On the properties panel, I delete the width and height values, hit Enter.
Nancy O.

Email campaign - inline css - a:link, a:hover

What do people do about setting the color of the a:link and a:hover when setting up a page for email distribution using inline css?
From what I've read you can't declare inline styles for the above mentioned styles?
Is it ok to put those in css <style></style> tags in the head section of the page and just let those email clients that can deal with it do so and forget those that can't, or is there a better alternative?
Cheers
Os

pziecina wrote:
Hi Os
Don't know if this is related to your post regarding xara, but if the other person was using xara for emails then yes it is easier doing emails in xara than dreamweaver, (for the none html/css literate).
Sort of, I'm just doing some experimenting before I commit myself. Don't won't to look like a dumb *** if I say I can and then I can't, lol.
As to your question most emails use the default but I can see no problem in placing the alternative in a css style sheet.
This article may be helpful, (check the external links at the end also) - http://groundwire.org/support/articles/css-and-email-newsletters.
Ok, that's what I thought. I'll use inline css styling for pretty much everything I can to be on the safe side and just put css that can't be inserted inline in an embedded style sheet. I guess its no big deal if a few email client don't like it.
I'll have a read of the link you provided. Thanks for your respnse

HTML Email - Inline CSS

Hello,
My inline CSS doesnt seem to be working in all eamil clients. Can you tell me what I have wrong with this:
<td height="50" style="font-family:Arial, Helvetica, sans-serif, 'Century Gothic'; font-size: 30px; color:#FFFFFF; line-height:80%; text-align:left; font-weight:bold; font-style:italic;">SAMPLE TEXT</td>

Do as Murray says and remove that part of the style, you don't need it. Sometimes the extra ' will make it quirky. I hope the body of the email is a dark color since your using white text color (#FFFFFF). It should render in most if not all emails.
<td height="50" style="font-family:Arial, Helvetica, sans-serif; font-size: 30px; color:#FFFFFF; line-height:80%; text-align:left; font-weight:bold; font-style:italic;">SAMPLE TEXT</td>
You could try something like this:
<td height="50"><p style="font-family:Arial, Helvetica, sans-serif, 'Century Gothic'; font-size: 30px; color:#FFFFFF; line-height:80%; text-align:left; font-weight:bold; font-style:italic;">SAMPLE TEXT</p></td>
Jim

Why are my inline css styles for BC tags being ignored and just default to blue underlines?

I am familiar with inline css styling for email campaigns and have always customised links in emails with the code I sent:
however Im puzzled why this code doesn't work with BC tags {tag_viewinbrowser} and {tag_unsubscribe}, any help would
be great as I think the default blue links look ugly.
This is my code: <a href="" style="color:#78787c; text-decoration:underline;">{tag_viewinbrowser}</a>
All other links I have styled appear as they should, its just BC tags where the style seems to be ignored?

You can put <style>span#unsubscribe a{color:red;}</style> code in your newsletter html that can address the DOM that is specific to those links. BC is adding it's own anchor tags for those links so your style isn't touching it. Rewrite your tag to look like this. <span id="unsubscribe">{tag_unsubscribe}</span> . That with the style code will solve your problem.

Spry menu for my phone.css and tablet.css?

I finished learning how to set up my media queries and during the process I changed the properties of my spry menu for my phone.css. I now realize that all my menu bars are the size that I did for my phone.css.
How can I get my phone.css and tablet.css to recognize different spry menu bars? I was thinking to place certain spry menu css information inside of the appropriate phone.css or tablet.css (in my case) then within my #navigation ID.
Does anyone see what trap I have set for myself?
This has come about when I started to make a current site viewable in a tablet and phone device. As I change the spry menu bar it changes all of my navigation.
Thanks in advance for the help.

So in other words are you saying to paste in my spry menu bar css code into let's say my phone.css?
current phone.css code:
<><>
@charset "utf-8";
@import url("SpryAssets/SpryMenuBarHorizontal.css");
body {
    text-align: center;
    background-color: #be7042;
#wrapper {
    height: 750px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    background-color: #006400;
    position: static;
#bottombanner {
    text-align: center;
    height: 192px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 25px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 8px;
    line-height: 2px;
    color: #FFF;
    position: static;
#ckimage {
    text-align: center;
    height: 145px;
    width: 75px;
    margin-top: 50px;
    margin-left: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6px;
    color: #FFF;
    position: static;
#estriolimage {
    text-align: center;
    height: 75px;
    width: 56px;
    margin-top: 45px;
    margin-left: 26px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6px;
    color: #FFF;
    position: static;
#maincopy {
    font-family: Verdana, Geneva, sans-serif;
    text-align: left;
    height: 350px;
    width: 200px;
    margin-top: -265px;
    margin-left: 115px;
    color: #FFF;
    font-size: 8px;
    position: static;
#navigation {
    text-align: center;
    height: 49px;
    width: 320px;
    margin-top: 1px;
    position: static;
#topbanner {
    text-align: center;
    height: 48px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    position: static;
><><
Would I paste my spry menu bar css code into my #navigation portion of my phone.css (I bolded the part where I think I would paste in my spry menu css.)

Updating css in the CSS repository

Hi,
I have a problem with updating a css which is in the CSS repository. It seems that none of the updates has any effect on the page. Even if I delete the css from the CSS repository it seems to be still there. How can I update a css in the CSS repository??
Thanks, Maren

I am experiencing the same situation and dont understand what is happening.
I have my own css which has been working fine.
When I edit the css in HTML with the edit button and press APPLY CHANGES it save it somewhere because when I edit again the change is there but I dont see the change in my application since the classes I changed are still showing with the old values.
If I press the link on the cssname I Download the css and I get the old version.
It seems that html updates css in one place and the css file is in another.
Can someone please give me an idea of what is happening.
Thank you.
Carlos

How does FF determine what to block? Files under /css/apps/ blocked /css/applications/ not

On Firefox 31 specifically I've noticed that some desktops won't load a page that has resources linked to /css/apps/. Specifically I'll log into a website, see an intermediary waiting page, then the request for the home page is made and all of the content EXCEPT the css files under /css/apps/ is requested and returned. However, no message is ever rendered by FF 31 regarding any phishing or malware issue. It appears to invoke the goog safe-browsing/safe-search url and comes back with a malware response, but the tab spinner just spins and the status bar continues to say waiting and the page never loads.
What's worse is that there doesn't seem to be any set criteria where I can reproduce this except that it happens in Firefox 31 and Firefox 32 that has been upgraded on a FF31 that was already failing. Some machines work just fine, others do not. Some appear to self-heal one day and then later others spontaneously break.
It's only this single page using this single directory. So what's the criteria or is there something else I should be looking at?
I've been able to fix the problem by deleting goog-phish-shavar.pset on affected machines. But I feel like that might only temporarily fix things? What's the permanent solution for avoiding this problem.

Try to use the Live Http Headers extension to see if that captures requests that are missed by the Web Console.
*https://addons.mozilla.org/firefox/addon/live-http-headers/
Also, as always should be done with mysterious crashes is a clean reinstall (delete the Firefox program folder) and possibly a new profile and a check for malware and reset the router.
Try to disable IPv6 (check for other possible causes as well).
*http://kb.mozillazine.org/Error_loading_websites

Error Uploading phone/css/master_a-master.css HELP

I have created a site in all three modes. Desktop, Tablet, and Phone and the ony new one is the Tablet. I have had success with he desktop and phone versions and now that I have the Tablet version, its stopping the upload to the FTP and saying thee is a error Uploading phone/css/master_a-master.css ?? I need this to go live asap. anybody know why this is happening?

Hello,
What's the method that you're using to upload the site? If you're trying the "File -> Upload to FTP host" option and you get this error, you may also want to upload the site to the host by first exporting the contents of the site to a location of your choice using the "File -> Export As HTML" option and then uploading to the host via an FTP client like Filezilla, WinSCP etc. to check if that allows the upload.
Hope this helps.
Cheers
Parikshit

Why is a css 'display:inline;' command not working in one part of the page when it does in another?

I am trying to set my navigation links to be in a line rather than a column after setting them up as an Unordered List. I have already done it for the social network icons but the same css command just won't apply itself for the navigation. Any help would be appreciated.
Here is a copy of the page followed by the relevent protion of the css file, the problem occurs with the styles.css applying to the 'topnav' section:
<!DOCTYPE HTML>
<html>
<head>
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
    <link href="css/print.css" rel="stylesheet" type="text/css" media="print">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-type" content="cache" />
    <meta name="robots" content="INDEX, FOLLOW" />
    <meta name="keywords" content="Enter Keywords" />
    <meta name="description" content="Description Here" />
    <title>Hittite Education by Weirdbeardink</title>
</head>
<body>
<div id="outer">
    <div id="wrapper">
        <div id="logo">
            <ul>
                <li><img src="images/Logo-2.jpg" /></li>
           </ul>
        </div>
        <div id="social-media-icons">
            <ul>
                <li><a href="http:/www.facebook.com"><img src="images/icons/facebook-icon.png" /></a></li>
                <li><a href="http:/www.twitter.com"><img src="images/icons/twitter-icon.png" /></a></li>
                <li><a href="#"><img src="images/icons/rss-icon.png" /></a></li>
            </ul>
        </div>
        <div id="topnav">
            <ul>
                <li><p><a href="index.html">HOME</a></p></li>
                <li><p><a href="about.html">ABOUT</a></p></li>
                <li><p><a href="contact.html">CONTACT</a></p></li>
            </ul>
         </div>
        <div id="topstripe">
            <ul>
                <li><img src="images/stripe.jpg" /></li>
            </ul>
        <div id="picture">
            <ul>
                <li><img src="images/coverpic500px.jpg" /></li>
            </ul>
        </div>
        <div id="content">
            <ul>
                <li><h1>Introduction</h1></li>
                <li><p>This is a unique project undertaken to teach important social topics using sport as the vehicle. Sporting and comedy clips are interspersed with filmed interviews with people like Paul Collingwood, Gary Lineker, Ed Leigh, Faye White and many others. They home in on topics such as teamwork, respect, rules, & money, and they use the pupils' experiences of sport to teach really important lessons about life.</p></li>
             </ul>
        </div>
        <div id="bottomstripe">
            <ul>
                <li><img src="images/stripeflip.jpg" /></li>
            </ul>
        </div>
        <div id="footer">
            <ul>
                <li><p>Copyrite 2011 Hittite Education | All rites reserved</p></li>
            </ul>
        </div>
     </div>
</div>
</body>
</html>
Here is the portion of the styles.css that works (#social-media-icons) and the portion that doesn't (#topnav):
#social-media-icons         { float:right; }
#social-media-icons ul li   { display:inline; }
#social-media-icons ul      { margin-top:100px; }
#topnav                { clear:both; }
#topnav                { width:700px; margin: 0 auto; background-color:#FFF; }
#topnav ul             { padding:10px; }
#topnav ul li          { display:inline; }     
#topnav ul li a        { padding:0 15px;}
#topnav    a:link            {color:#000; }
#topnav    a:visited        {color:#000; }
#topnav    a:active        {color:#000; }
#topnav    a:focus            {color:#666; }
#topnav    a:hover            {color:#F38E00; }

No need to answer this one as I have had a relpy on another forum. I had <p> tags in the unordered list. Once I took them out it all worked fine

CSS to inline styles

I never thought I'd be asking this EVER. But, I need to
convert CSS styles to inline styles. Can this be done in DW or does
it need to be done by hand?

Here's what I do. I create the page using an embedded
stylesheet. When I'm
ready to publish, I copy the embedded stylesheet into the
body of the page
(immediately below the <body> tag). That has worked
pretty fine for me.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"MisterEggMan" <[email protected]> wrote in
message
news:g2m2q9$7ik$[email protected]..
>>> My team is creating emails and we can't use
stylesheets, external or
> >> internal.
> >
> > You can use inline styles, or even embedded styles
within the <body>
> > tag,
> > but OK.
>
> Exactly, we can only use inline styles and not
stylesheets. Dreamweaver
> will
> automatically create internal stylesheets rather than
inline styles unless
> the
> preferences are changed to the settings that you
mention.
>
> If you know of a way to use an internal stylesheet and
maintain formatting
> in
> any email client, I'd prefer to do it that way. But all
sources that I've
> seen
> say that only inline styles should be used.
>

Web inspector inline CSS edit

Supposedly in Safari 3.1 the web inspector is meant to allow inline editing of CSS attributes. I can't seem to make this work at all. Is this feature absent or have I missed how to initiate it? I figured I could just double-click on an attribute in the inspector panel and it would be editable (like in Firebug). Has anyone had this problem?

Safari 3.1 was released today.
Along with it came several updates and improvements, one of them being CSS editing in the Web Inspector.
At least, in theory. In practice, we're not sure how to get it working.

Change Header Font Color Using CSS doesn't effect

Hi guys,
I tried to set the header forecolor in "red" using CSS but no effect.
Any alternative solution?
Thanks.
Criz

Criz,
We cannot use the color names in CSS you have to use predefined names
For Red Header use OraErrorHeader, for more font styles check.
http://download.oracle.com/tech/blaf/specs/textstandards.html
Thanks,
With regards,
Kali.
OSSI.

Converting desktop css to mobile css using jquery

Here is what I have done so far:
I created a basic layout for a test page containing video using Dreamweaver.
I used Media Queries to set up CSS files for mobile, tablet and desktop viewing.
I made changes to the CSS formatting for the mobile view.
Here is what I want to do:
Include jquery script to collapse text on my page when viewed on a mobile device or tablet.
I watched this tutorial about setting it up, but the CSS files were premade, so I am not sure how to make some of the changes:
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/how-media-queries-can-make-desig ning-for-mobile-devices-and-different-screens-easier/
Do I place the jquery lines into the source code? and call them out in the CSS? Can jquery be used in the CSS file and where would I insert it and call it out?
The video shows the multiscreen view containing the collapsible text, but he never references where the changes were made. in the source code or in each CSS.
any help is greatly appreciated.

Hi
First I would suggest that you learn to use jQuery on a normal desktop page, (are you talking about using the jQuery mobile framework?) see - http://www.adobe.com/devnet/dreamweaver/articles/introduction-to-jquery.html.
However in the tutorial David shows the jQuery framework file as being inserted at the end of the page, (just before the closing body tag) but doing so means that the page loads before the jQuery code is applied to the page, which has its advantages and disadvantages, but if the jQuery is being used to apply styles/functionality to a page I would recommend placing it into the head content, and the plug-in code at the end of the page.
The above is a personal preference though, and will very much depend on what your jQuery code is doing.
PZ
Can jquery be used in the CSS file and where would I insert it and call it out?
jQuery is a javascript framework and cannot be placed in a css file, but can be used to manipulate the css.
Message was edited by: pziecina

Convert header CSS TO inline CSS

Similar Messages

Maybe you are looking for