Applying exiting CSS rules to new HTML item

It is not possible to apply an existing CSS rule to a new HTML item in DW 2014. For example, I created a new H1 element but I can't apply that to an existing CSS rule so I have to duplicate an existing CSS rule, rename it and then apply the H1 element to that new CSS element. A real hassle! This should be a simple process that I was easliy able to achieve in previous versions of Dreamweaver. Does anybody know if the next version of DW will let you to link new HTML elements to existing CSS rules? Or is this a design bug that will be fixed soon?

You don't understand the power of re-usable CSS classes yet.
As an example, let's say I want my heading to be red and centered. By using the multiple classes feature in DW's properties panel (See screenshot below), I can select both classes from the drop-list in my properties panel and use as often as desired in my documents. IDs however are unique and limited to one time usage per page.
CSS
.red {color:red}
.center {text-align:center}
HTML
<h1 class="red center">This is red and centered</h1>
Nancy O.

Similar Messages

Copying CSS rules to new page

Is it possible to copy all my CSS modifications from a preset, two column liquid header and footer layout, to a preset, two column static header and footer layout so I don't have to redo all the rules on the new page?
Thanks,
scriptmemory

Salut,
it's a bit hard to say what changes you need without seeing the page. But if the CSS is in the head of the page, then you should save the old page as the new page, then only change the CSS that makes the columns liquid to fixed px sizes.
Cristian Dorobantescu
Flexi CSS Layouts - Create CSS layouts in Dreamweaver without coding
www.extenstudio.com

Applying css rule to column in a html table?

Im trying to get variable images to be resized with in a table, in one column, to have a standard size on display. Ive googe'd just about every thing i can think of to try find an answer. Being newb to dreamweaver i might not know the correct wording, relating to what im trying to achive.
So if someone could help, would be great .
Also, would a spry data set display the images acording to the css rule?
edit: from what ivé gathered, do I just give the column a col id and the apply the css rule? If so where would the id fit into the column code?
<tr>
<th width="100" scope="col">example</th
</tr>

Im trying to get variable images to be resized with in a table, in one column, to have a standard size on display.
You should crop, resize and save images for the web in your graphics editor first. If you have many images, use batch commands or actions to apply resizing to all images in a folder. Then insert images into table cells.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How can I view/edit the CSS rules that apply to an Order Registration Layout ?

*Note: I am new to web design and I did not create the site that I am working on. I am also very VERY clumsy with CSS at the moment *
I have just begun using Dreamweaver to work on a Business Catalyst site. I am attempting to edit the CSS of the layout for the Order Registration Form. The CSS is applied from the site-wide template that is assigned to the Order Registration Layout. When viewing the layout in Dreamweaver, it does not display any CSS info for the page. However, when viewing the live page for the Order Registration, it is clear that CSS is adversely affecting the layout.
Is there a way to link the css rules from the site-wide template to the Order Registration Layout? Or should I just add a new CSS rule directly to the Order Registration Layout (possibly overriding the site-wide template's CSS)?
Thanks!
Nate

I've used Firebug as well as the Webkit developer tools in Chrome and Safari which have surpassed Firebug in my opinion. But they all suffer from the fact that the changes you make in them have to later be applied to your code which means you have to take the extra steps of trying to remember what all changes you made in Firebug and copying and pasting them back into your files. Whereas in Dreamweaver you can Inspect, make changes directly to the code in your file, and you're done. Not happy with the last few changes? Undo. Want to start completely over? File > Revert.
Dreamweaver has excellent tools for determining what css is being applied to an element and by what means. And it's a more streamlined and direct workflow where you work directly in your code. I still use Firebug and the others from time to time though. But only for very basic "spur of the moment" testing. And usually only when I don't have immediate access to the raw files.

Developer: web inspector how do I add new css rules

I have been using web inspector for quite some time. It was a regular part of my development workflow, however, I was surprised when the safari team totally re-vamped the tool in safari 6.
You use to be able to click on the menu in the styling section of the tool bar and click "Add new rule". Now it appears you can no longer add css rules in this way. Which is a bummer because I used this feature all the time.
You also, use to be able to double click for a new rule when in the actual stylesheet under the Resources tab. I can no longer do this either. For the life of me, I can't figure out why the safari team would get rid of these valuable options.
Someone please help.
These options must still exist, as they are invaluable when working with css in the browser. Does anyone know how to add a new style rule. I read the documentation and I don't see anything about removing this functionality.
The only way I can find to add a new rule, is through the snippet bar, which is kind of a pain as you have to add the <style> tags every time you add a new rule.
Also, I can't figure out how to view and elements pseudo classes (i.e. :hover , :checked, etc).
I have to say, it is a little frustrating as I don't clearly see the benefits of their redesign and it just seems harder to use. It kind of feels like they reskinned and rearranged things just to make it look new and didn't really think through how developers use this tool.
Does anyone else feel this way with the new safari?
Maybe I will see the light after a couple of days. I hope so because I am partial to using safari.

Build your FGLayout prototype page so it works well in all screen sizes (mobile first, then tablet, finally desktop). To create your home page, SaveAs index.html. Then SaveAs page2.html, replace content. Repeat for other site pages.
Nancy O.

Can I apply one .css stylesheet to all of my linked word documents inside my RoboHelp8 HTML project?

Hello all,
I am on my fourthRoboHelp8 HTML project, after the other three crashed. I am a technical writer constructing my companies Policy and Procedures Guide. I am only 142 (word documents) and 9 (RoboHelp topics) into my project and there will be plenty more to come. I recently took Kevin Siegel's RoboHelp8 class where I determined that it would be best if I link all of my word documents inside of the Project Manager becuase I will be constantly updating these documents. I've searched around the Adobe Forums, talked to Kevin, and talked to my IT Department, but I cannot seem to find an answer for my problem.
I have linked all of 142 word documents inside of the Project Manager, and all 142 word documents have their own .css stylesheet. I have assigned the default.css stylesheet (which I have assigned all of the proper formatting to headings 1-4 to match headings 1-4 inside of my Microsoft Word 2007 documents) under Project Settings under the Import tab. I also assigned this default.css stylesheet under WebHelp Pro. My understanding with applying the default.css stylesheet to these two places is that all of my word documents and topics should have this stylesheet applied to them.
However, when I look at each individual linked word document the default stylesheet has not been assigned and the word document is still being dictated by its own stylesheet i.e. Credit.css. On my third project, before it crashed, I manually went through all 142 word documents in the Project Manager and assigned the default.css stylesheet to them. I did this by right clicking on the topic, under Appearance, I changed the stylesheet i.e. Credit.css to default.css and clicked apply. I was immediately prompted with the two options: "Preserve modifications to this file" or "Don't show me this message again." I tried both options. The first applied the default.css stylesheet and removed the Credit.css stylesheet, but when I made a change inside of my word document and updated it inside of the Project Manager none of my changes appeared. The second did not apply the default.css stylesheet and kept my Credit.css stylesheet applied to my word document. When I made a change inside of my word document and updated it inside of the Project Manager the change appeared.
I talked about this to Kevin and he said that the individual stylesheet applied to each linked word document did not mean anything, essentially that by making the default.css stylesheet the dominant stylesheet under Project Settings under Import that the stylesheet would be applied to all of my linked word documents/topics. He also suggested that I make a change to the stylesheet like change the color of Heading 1 and link a new word document to see if it applied the changes. I tried doing this inside of my third project, but nothing changed.
I would like to know if I can assign one stylesheet to all of my linked word documents before I get too far into the fourth project and have that project crash on me too. One of RoboHelp's appealing features is to apply one stylesheet to multiple topics, or in my case 142 word documents and 9 topics. I hope that I can apply one stylesheet to all of these linked word documents because having 142 individual stylesheets is unmanageable.
Any help or suggestions would be greatly appreciated.
Thank you,
Roxxanne

When a word document is imported into RoboHelp project, RoboHelp generates a separate stylesheet for each word document as each word document may have its own formatting styles. In a generic scenario, word documents may be brought from different sources and may have different styling. Hence, RoboHelp allows users to preserve different styling through sepearate stylesheets.
However, for a different scenario like yours, RoboHelp allows users to override all the CSS and apply a single CSS to all the topics at the generation of output. As you have already mentioned that you have applied default.css in the WebHelp Pro SSL dialog, that should suffice and should meet your requirement of applying a single CSS to all the topics. You can verify the same at your end by linking few word files and generating the output with a single CSS applied in the SSL settings.
Mayank

New selection disappears from sectionlist when I add rules (was: New section in CSS)

When I try to make a nex CSS for a section it disapeasr from the sectionlist before I start to add rules. Why?
And why does my (succeded) CSS rules not show up in the codesection?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ATL Webside</title>
<link href="ATL WEBside.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Wrap">
<header id="Topp">Content for id "Topp" Goes Here</header>
<nav id="Nav">Content for id "Nav" Goes Here</nav>
<aside id="Side">Content for id "Side" Goes Here</aside>
<section id="foto">Content for id "foto" Goes Here</section>
<section id="sek 1">Content for id "sek 1" Goes Here</section>
<section id="sek 2">Content for id "sek 2" Goes Here</section>
<section id="sek 3">Content for id "sek 3" Goes Here</section>
<section id="sek 4">Content for id "sek 4" Goes Here</section>
<section id="sek 5">Content for id "sek 5" Goes Here</section>
<section id="sek 6">Content for id "sek 6" Goes Here</section>
<section id="sek 7">Content for id "sek 7" Goes Here</section>
<section id="sek 8">Content for id "sek 8" Goes Here</section>
<section id="sek 9">Content for id "sek 9" Goes Here</section>
</div>
</body>
</html>
BR Nille

I ment new "Selection" :-)

User exit - VA01 - Adding new line items while Sales Order Creation

Hi All ,
I have a requirement where : in VA01 , i have to add new line items using USER EXIT or BADI.
The scenario is : we maintain Characteristics for Material. When we select a particular characteristics, Factor and length will be displayed in a Popup. we can specify the Factor and lenght.
Here , if i specify Factor as 10 and lenght as 1000. the Material has to be cut / split into 10 items of 1000 mts each. and the ITEMs table control should get 10 ITEMS .
How to add new items using User exit or Badi in VA01 while creating a sales order.
i have identified the user exit . What code should be used to add new line items.
kindly help me in solvng this.
Waiting for your replies.
Thanks in advance.
Suki.

hi
wich user exit do you take for that ???

User Exit during Sales Order Creation - New Line Item needed

I have a situation during the process of sales order creation. If a Material in a line item has say 27 EA and the Base Unit is EA. But the Sales Unit is CSE. Then whenever the user enters 27 EA and presses enter he should get two line items.
The first line item needs to convert to maximum number of CSE posible and the rest will be the second line item with the remaining EA. The order isn't important but that is what is needed. Question is how do I approach this problem and code my user exit accordingly and where do I code it.
I was looking at SAPMV45A and saw the program MV45AIZZ which is meant as a user exit for any PAI event handling. If anybody has encountered this kind of requirement can you please share your view on this.
I will definitely reward points for useful answers.
Clark

Hello Mahendra
The requirement is as follows :
PART 1:
Sales Order Enter:
1.     When a line item is entered on a sales order (VA01 or VA02), at enter, check the sales unit of measure (VBAP-VRKME).
     Do not check line items where item category (VBAP-PSTYV) = TANN, TAPS or ZTAP. TANN are free goods that should not be considered for consolidation. TAPS & ZTAP are lower level materials as a result of product selection. They will be attached to a higher-level material with an item category of TAX, which is relevant for consolidation.
     Do not check items where VRKME <> EA
2.     If VRKME = EA, go to MARM for MATNR.
3.     Go to record where alternate unit of measure (MEINH) = CSE, get the value from the numerator field (UMREZ).
4.     Divide the order quantity (VBEP-WMENG) by UMREZ.
5.     If the result is greater than 1.0, the customer has ordered more than one case and a new line item needs to be added to the sales order for the case quantity.
6.     Add a new line to VBAP for the same material with the case quantity. If not a whole value, the remainder of eaches (bottles) should update the qty on the first item on VBAP.
     Part 1 is relevant for order types ZCA, ZOR, ZSO, RE, ZSM
PART 2:
Batch Job to run prior to the Delivery Due List:
1.     Read VBUK for Delivery Status (LFSTK) = A (delivery not processed). Get all of the document numbers (VBELN).
2.     Go to VBEP for those document numbers to get the goods issue date for the order. There will be many records in VBEP for the same sales order. Look at all orders with a goods issue date (WADAT) of next day.
3.     Go to VBAK for those document numbers to see if there are multiple sales orders for the same Sold To party (KUNNR).
4.     For customers who have more than one order in VBAK, search all line items (for all orders). If there are no duplicate materials across sales orders, do nothing.
     Do not check line items where item category (VBAP-PSTYV) = TANN, TAPS or ZTAP. TANN are free goods that should not be considered for consolidation. TAPS & ZTAP are lower level materials as a result of product selection. They will be attached to a higher-level material with an item category of TAX, which is relevant for consolidation.
     Do not check line items where reason for rejection (VBAP-ABGRU) is not blank
5.     If there are duplicate materials, go through the same logic as in part 1. If the quantity across the sales orders adds up to greater than one case, add the appropriate quantity to a new line item on the first sales order.   If there is a remainder qty, update the line item on the first sales order with this qty. In this case, the quantities on the second sales order needs to be closed out with a reason for rejection code of 50, Line Item Consolidation. If there is no remainder, update the qty on this item directly.
     Part 2 is relevant for order types ZOR, ZCA, ZSM
     This batch job will have to be run manually for Day Pick orders. The end of this program should automatically kick off the delivery due list for Day Pick orders, shipping condition 02.
Business Justification:
The business requires that like order line items be consolidated to one line item prior to the order going to the warehouse for picking. This will aid in picking at the warehouse as well as result in the customer invoice not reflecting more than one line item for the same material. In the case where the customer has truly ordered more than a case, i.e;, 1 case, 2 bottles, the documents in SAP will still reflect 2 lines.

User Exit / BADI Update new line item in BSEG in MIGO/MB1B Transaction

Hi All,
I Require a BADI or user exit in MIGO transaction from which i can add or change the BSEG line item before Posting the FI document.
Regards,
Madhukar Shetty

Hi Asik,
Thanks for the the reply, but can tell any other badi or exit from where i can add/append a new line item in the accounting document getting posted from MIGO or MB1B.
Regards,
Madhukar Shetty

Is there a way to find out which CSS rules are being used by the different html files?

Is there a way in Dreamweaver CS3 to find out which CSS rules are being used by the different html files, sitewide?
Thanks - Dave

Firefox add-on "Web Developer Toolbar" is a must have. Information > Display Div & Class details.
https://addons.mozilla.org/en-US/firefox/addon/60
Another handy Firefox Add-on to add to your tool chest is called "Dust-Me Selectors."
http://www.sitepoint.com/dustmeselectors/
"It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.
You can test pages individually, or spider an entire site, and you'll end up with a profile of which selectors are not used anywhere."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How to stop "Create New CSS Rule" dialog box

Made the mistake of allowing an Apple tech talk me into an OS X "Install in place". He assured me that all application settings would remain the same as before.
Now, when holding down the "shift" key and typing a word in all caps (in Design View), the "Create new CSS Rule" dialog box pops up and writes:
<span style="font-size: 14px; margin-center: 1px; text-align: left; font-weight: bold; margin-bottom: 6px; padding-bottom: 0px; line-height: 1.3em; margin-top: 3px; font-family: Arial, Helvetica, sans-serif;"><font color="#006666">TEXT</font>
I am trying to find the setting in preferences to disable this, and since the behavior started after OS X "install in place", something must have changed. I just want to type in design view and not have to deal with Dreamweaver overriding what I'm doing.

I am attempting to type some text in "design", not "code" view. I want the text to be caps. I hold down the shift key, type the first letter, and immediately the "New CSS Rule" dialog box pops up. I cancel, but the code...
<span style="font-size: 14px; margin-center: 1px; text-align: left; font-weight: bold; margin-bottom: 6px; padding-bottom: 0px; line-height: 1.3em; margin-top: 3px; font-family: Arial, Helvetica, sans-serif;"><font color="#006666">TEXT</font>
...is created anyway.I just want to type a word into an existing div with no changes or dialog boxes or any input from Dreamweaver. I was able to do that before, and cannot do it now. There must be some setting that I am missing in preferences.

Create a new css rule

Hi
If I place my curser over a div tag in the code window why in the New Css rule
window, in the option "choose where this rule will be defined" do I sometimes only
have the option of this document only and others the choice of any attached css file?
thanks
Ian

Hi
perhaps I wasn't clear apologies.
If I go to a web page and place my curser in the middle of <div id="masthead>
and then in the css styles panel select "new css rule" when the window opens by default
it normaly says:-
Rule definition...
Choose where your rule will be defined
and then it shows my current cssfile name with a drop downbox for any other
attatched sheets. As in the tabs at the top of the window
However some times when I do this the box listing my css files only lists in "this document only"
and selecting the drop down box shows no other css files. But the css files are shown on the tabs
at the top opf the screen
I wondered if anyone had any idea as to why?
thanks
Ian

New SpryWidget .CSS for a New Page

I have the whole spry arsenal of files on a website in a separate folder. I am already using several widgets and functions from that and among others also a "spry collapsible panel" widget on one of the pages.
Now, I would like to use it once again on a new page (on the same site), but when I insert the widget it gives me the same SpryCollapsiblePanel.css as the one already used for the previous widget. But I want to give the panel a different look and feel as it has some other purpose on the new page.
What is the correct procedure to get a fresh untampered "SpryCollapsiblePanel.css" for the new widget on a new page?
Thank you!

I notice (finally got the page!) that the lowest element in the 'drop up' menu overlays the main menu title...a byproduct of needing perhaps one more item's height in margin-top negative pixels!
I suppose it is a small consolation, but IE 8 seems to be rendering the menus accurately, with the sub-submenus flying out relative to their own submenus.
The only workaround that comes to mind (for all the other browsers out there) is to set up new classes to apply to subsubmenus:
ul.MenuBarHorizontal ul    /*this is the usual markup; you can leave this in */
    margin-top:-177px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 160px;
    position: absolute;
    left: -1000em;
/*add the following, to offset the top margin by multiples of the height of a single item */
ul.MenuBarHorizontal ul ul.three {margin-top: 90px;}
ul.MenuBarHorizontal ul ul.two {margin-top: 60px;}
ul.MenuBarHorizontal ul ul.one {margin-top: 30px;}
For instance, the Ladakh Treks subitems want to offset from the top 30px to align with their parent, Ladakh Treks, so I use the <ul class="one"> to drop that sublist 30px down from the top of the container.
<li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/treks.html" target="_blank" class="MenuBarItemSubmenu">Ladakh Treks</a>
      <ul class="one">
             <li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/stok_kangri_exp.html" target="_blank">Stok Kangri Expedition</a></li>
             <li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/markha1.html" target="_blank">Markha Valley</a></li>
        </ul>
</li>
This solution does not work in IE8, which had already worked the way you intended without monkeying around with the top margin. I don't know how it works in IE7.
I have not used conditional markup (I know there are people out there who have, and you could research it!), but one could attempt to put a conditional markup around those class definitions in the stylesheet that would not call on them when your site encounters IE8.
Beth

How do I turn-off the CSS rule dialog?

I would like to know how to turn-off the CSS rule dialog.
I support a user who has been using DreamWeaver for years and was recently forced to upgrade to the new version. None of the hundreds of files in the site he maintains use CSS. While I recognize it is a "better" and "more efficient" way to do things --- IF you're a sofware engineer -- it is not even close to being worth the cost to revise the entire site and retrain this user.
So, how can i turn off, not just the pop-up, but how I can tell DW to just go ahead and do it the old-fashioned, embedded in the HTML way of doing things?
All the user wants to do is change the color of some keywords, css is overkill when that's all he's doing.
We'd go back to the previous version except the office was forced onto Vista and the older version won't run.

ADDING FONT TAGS:
By David Powers from the help doc:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7ce ba.html
You won't see anywhere to enter such information in the HTML Property inspector. Dreamweaver CS4 does not support <font> tags, except in Code view. The W3C deprecated <font> tags ten years ago, so CS4 decided to get rid of them from the main user interface.
If you want to add styles to a short selection of text, you have two options:
1. Create embedded styles in the <head> of the page.
2. Create inline styles.
Both are done using the Property inspector in CSS mode (click the CSS button on the left). Select the text you want to style. How and where the style is created depends on what you select in the Targeted Rule field.
If you select <New CSS Rule>, you can then select the font, size, or colour in the Property inspector. As soon as you choose one of these, you will be prompted to choose a class name, and the location of the new style. To embed the style in the <head> of the page, select "This document only".
The name of the class will appear in the Targeted Rule field, and you can add other values to it.
If you select <New Inline Style> in the Targeted Rule field, you can apply any of the properties in the Property inspector. This wraps your text selection with a <span> tag that contains the CSS properties as an inline style, e.g., <span style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 24px;">Styled text</span>.
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7ce ba.html
Note: If you select text in Code view, you can apply font tags by selecting Format > Font from the main menu. This works only in Code view; selecting Format > Font in Design view launches the New CSS Rule dialog box.
http://www.adobe.com/devnet/dreamweaver/articles/css_best_practices_03.html

Applying exiting CSS rules to new HTML item

Similar Messages

Maybe you are looking for