Site-specific style sheet rules

Hello,
Does anyone know if it's possible to add site-specific sections to my default style sheet (Preferences > Advanced > Style sheet)? It's possible to do this in Firefox using this syntax: @-moz-document url-prefix(http://www.apple.com) { ... }, but I'm not aware of a Safari or Webkit equivalent.
I'd like to undo some of the changes made in a recent re-design of one of my favourite web sites, but due to the rather generic IDs and class names that they use it's proving to be difficult to write a style sheet that only targets that site.
Thanks,
Tim

Hi Jinxed,
Firstly, I need to verify the followings:
Are you using SharePoint 2013?
What is website designer? Whether the website designer is SharePoint Deisgn Manager or SharePoint Designer.
Where can we find Site->Advanced->Edit Style Sheet?
Could you give me a screenshot for your Site?
I hope this helps.
Thanks,
Wendy
Wendy Li
TechNet Community Support

Similar Messages

Moving CSS to an external style sheet [was: CSS]

Hi
I have in error created all my css for a site as "this doccument only" what i meant to do was create a site wide style sheet !
Is there a way to copy my css and turn it into a .css file that applies to the whole site, without starting again.
Help much appreciated.
many thanks
Mark
[Subject line edited by moderator for clarity]

Hi
Highlight the css from the document and select - Format - css styles - move css rules. Select new style sheet from the dialog, name the style sheet and save. Check that a link has been created for the new style sheet, if not select attach style sheet from the - Format - css styles list.
PZ

Keep style sheets collapsed in CSS Panel CS6

Is there a way to open pages with style sheet rules collapsed and keep them collapsed. Everytime I open a page it expands all of the rules and I have to close them one by one. THX

Thanks for your response
This is the first time I have tried DTSS. Like you I have sites that don't play well in design view so, for the most part like you I code manually, but I like to use display view to click on the element I am looking for to select it quickly rather than trawling through lines of code to find what I want to work on in code view.
I think you misunderstood my problem. In an arttached style sheet I have a style which is set to "display: none" bto hide jQuery tabs when JS is inaactive. When JS is atcive in the browser it dislays teh tabs Because in design view, JS is normally inactive the tabs are not be visible so I want a DTSS to set the tabs to "Display: inline" so I can see them while I work on on the page.
The problem is that the DTSS sits at the top of the cascade in the CSS panel and I can find no way to put it at the bottom of the cascade. Consequently, although I have "display: inline" in the DTSS, in my regular style sheet, which sits below the DTSS in the cascade, I have "display: none", so the latter prevails and I can not see the tabe while I work in code/design view! So I can not click on the tabs in display view to get to ithem quckly in code view!
Not lethal but a nuisance. If anyone knows how to force DTSS to the bottom of the cascade so it is read last I would be very grateful for the informaton

FF 5 on mac is no longer displaying background images that are defined in style sheets. This has woeked correctly for years with older versions.

The problem occurs both in safe mode with all add-ons turned off and in normal mode with add-ons active. I see the missing images error on most sites using style sheets including Mozilla.

Make sure that you allow pages to choose their colors and that you haven't enabled High Contrast in the Accessibility settings.
* Firefox > Preferences > Content : Fonts & Colors > Colors : [X] "Allow pages to choose their own colors, instead of my selections above"
See also http://support.apple.com/kb/HT1343#odd10

I am forced to hold shift and refresh the page on 99% of the sites I visit. How do I fix this from happening? If I don't the pages are missing style sheets and etc.

When ever I go to sites they half load or are missing style sheets. If I view the source for the page and click on a style sheet link I get the following error:
Content Encoding Error
The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression.
If I hold shift and refresh the page loads as normal.
It's happening on 99% of the sites I visit. I have disabled my plugins and add-ons.
I do have some add-ons or plugins that I would like to remove completely but there is no uninstall or remove option, neither in regular or safe mode.

'''I'm NOT buying a backup Computer till, Firefox will Run on Windows 8 !'''

Export css rules to an external style sheet

Hi
For some reason, when i try and right click on my selected styles to move them into a new external style sheet the option to move css rules isn't in bold so i can't perform the task. Its the same when i try and select move css rules from the format tab in my toolbar. Has anyone come across this before or know another way around it. I also seem to get different options appear on my right click depending on what view I am in, is this normal?
Thanks
Ellen

Why don't you manually move your embedded CSS code into a new CSS file (in code view)?
Then link your HTML pages to your external style sheet.
Dreamweaver, Linking HTML to External Style Sheets
Nancy O.

Link to site-root relative style sheet not working CS4

I am trying to define links to site-root relative external style sheets - as I believe that IE conditional comments prevent Templates from correctly updating the links. The styles are not being applied when I use any href path begining with "/". So, the following do not work:
<link href="/styles/myStyleSheet.css" rel="stylesheet" type="text/css" />
<link href="/myStyleSheet.css" rel="stylesheet" type="text/css" />
Dreamweaver can open the css file from a right-mouse click and even give me warnings about css properties as a tool-tip as I hover over the file. The styles are applied fine with document relative paths:
<link href="../myStyleSheet.css" rel="stylesheet" type="text/css" />
Any ideas?
Jeff

Close your meta tag.
<meta name="description" content="blah, blah, blah...>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How can i load a specific CSS style sheet for Safari?

Okay, So I have some structure issues when viewing my website on Safari compared to Firefox. Is there a way to put a code in the <head> tag to load a specific CSS style sheet for Safari like you can do with IE?
Thanks.

I took a screenshot of your page from Firefox (shown below). I assume you're seeing the same problem in Safari. If you increase text size one click, the keyboard image drops below the #contact division.
1) Height is a restiction in all browsers except IE. Avoid using height values on containers with text in them. If needed to show a background image, use the min-height property.
2) Fix your code errors. Some browsers are very sensitive to errors.
3) Your #content lacks cohesion. You need 3 columns, each with a width in pixels. Or simply use a 3-column table.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Attach existing CSS style sheet to existing site

Hello all,
I have an external CSS style sheet called default.css. I have an existing site of 61 pages that I want to apply default.css. Is there a way to apply a CSS file to multiple pages? Or am I doomed to going through the process 61 times?
Thanks for your time.

Thanks for replying Ben.
I 'forced' it to work. Fortunately, the pages were all linked to the same style sheet, so I just did a 'Find and Replace All'.
Thanks again.

Part 07 - Understanding and Using Cascading Style Sheets | Classroom: Basic Site Layout and Navigation in Dreamweaver | Adobe TV

In this video you’ll continue to further customize your website using CSS or Cascading Style Sheets. With CSS you can control many visual aspects of the website efficiently and consistently. Learn the basics of how CSS rules work and how you can easily take advantage of the power and flexibility of CSS in Dreamweaver including creating and editing your own CSS class.
http://adobe.ly/wTlFxC

some of these tutorials don't really work. changing the body image to scrolling or fixed doesn't change anything on my computer, and apparantly doesn't change anything on the version that the instructor is using either, since he never shows us the "before"

Too difficult to find style sheets in DW

I use DW on a Mac - and a site I work on has hundreds of
styles in the style sheet. They are listed pretty much as I added
them - so finding one can take ages - because they can;t be lsited
alphabetically (they are if you access them through the tags at the
bottom of the page - by right-clicking - but this can only be done
one cell at a time. If you want to apply a style to more than one
cell or item - you have to 'apply' it from the side bar - and there
they are not listed alphbetically).
Could someone at DW please make sure this is in the next
release - as I spend hours hunting and pecking styles - and it
drives me crazy.
Thanks,
- Greg

> Sounds like the stylesheet is far too bloated. I've
never seen a
> stylesheet that big.
Check out the stylesheets that FW pop-up menus generate. I've
seen one with
more than 2000 lines of pop-up menu specific CSS.
Anyhow, stylesheets with hundreds of custom classes can be
nearly impossible
to manage. Sorting alphabetically would be a disaster (due to
the disrupted
cascade of styles as a result). The solution is to learn how
to use
selectors in such a way that you do not need custom classes
(except
occasionally). Then your stylesheets would be arranged in a
contextual
order, so that it's easy to find what you are looking for
based on its
position on the visual page, and the identity of its
containers.
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
==================
"John Waller" <[email protected]>
wrote in message
news:eeoetn$pqp$[email protected]..
> and a site I work on has hundreds of styles in the style
>> sheet.
>
> Can you provide a link to the site?
>
> Sounds like the stylesheet is far too bloated. I've
never seen a
> stylesheet that big.
>
> Economising the style definitions and getting rid of
redundant rules may
> be the place to start to make it manageable.
>
> --
> Regards
>
> John Waller
>

Question on Converting an existing style sheet to print.

When attempting to do the conversion, I cannot get the 'link' button in MAC. It's greyed out. In the PC I can get the 'link' button, then do all of the proper media selections but when I go to save it I get a message about my new_styles.css being an HTML file, so it won't save it.
Is there some process or settings I might be missing? I can supply all the steps taken if necessary?
Thank you,

Here is what was generated for me:
The styles all worked in the site prior to being saved as an external styles sheet. Now we are trying to link that same styles sheet back to the original site. I apologize for the size, but that's what was generated.
@charset "UTF-8";
body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
.sidebar1 aside {
    font-size: 90%;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #42413C;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
    color: #6E6C64;
    text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
    width: 950px;
    background-color: #FFFFFF; /* the auto value on the sides, coupled with the width, centers the layout */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border: 2px solid #060;
    background-image: url(images/divider.png);
    background-repeat: repeat-y;
#logo {
    position: absolute;
    width: 170px;
    height: 158px;
    z-index: 1;
    margin-top: 10px;
    margin-left: 30px;
    left: 216px;
    top: 1px;
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
    background-color: #090;
    background-image: url(lesson04/images/banner.jpg);
    background-repeat: no-repeat;
    height: 130px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the block elements. The elements within these blocks have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the block itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the block element and place a second block element within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a block set to float right). Many times, padding can be used instead. For blocks where this rule must be broken, you should add a "display:inline" declaration to the block element's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar blocks could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the blocks around in the HTML source.
.sidebar1 {
    float: left;
    width: 180px;
    padding-bottom: 10px;
.content {
    width: 770px;
    float: right;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
.content h1 {
    font-size: 200%;
    margin-top: 10px;
    margin-bottom: 5px;
.Green {
    color: #090;
nav p {
    font-size: 90%;
    font-weight: bold;
    color: #FFC;
    background-color: #090;
    text-align: right;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #060;
    background-image: url(images/background.png);
    background-repeat: repeat-x;
nav p a:link, nav p a:visited {
    text-decoration: none;
    color: #FFC;
    padding: 5px;
nav p a:hover, nav p a:active {
    color: #FFF;
    background-color: #060;
nav p a {
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the space between the navigation on the content below */
    font-size: 90%;
ul.nav li {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #0C0;
    border-right-color: #060;
    border-bottom-color: #060;
    border-left-color: #0C0;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #090;
    color: #FFC;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background-color: #060;
    color: #FFF;
/* ~~ The footer ~~ */
footer {
    padding: 10px 0;
    background-color: #090;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    font-size: 90%;
    color: #FFC;
    background-image: url(images/background.png);
    background-repeat: repeat-x;
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
    display: block;

Style sheets (paragraph and character) not coping Special Effects

Couple of questions about ID CS3. I have been really digging into the guts of the application and can appreciate how powerful it is.
I am having a couple of problems and don't know if it is me or the app.
1. I can not get a NEW Paragraph or Character Style Sheet to copy the Special Effects (specifically the drop shadow and inner glow).
I have tried both by using the eye dropper, and the highlighting etc but nothing works. What am i missing?
2. Also, how can I change the Drop Shadow Distance from the default (.1375in) to something else (ie., .05)? Same thing for the Angle. I also want to change the Distance and Angle for the Inner Glow. I looked in Preferences but could not fine them there. I am afraid to ask when do I use them for Object and when for the text....I will figure that one out by playing with it.
3. And finally, how do I isolate moving an object. Even though the boundary boxes show up that I have a specific object selected, when I put the mouse in there to move it, some object underneath it moves. This is probably some technique I am not doing correctly.
I absolutely love this application and will appreciate any help in the above questions.
Thanks,
bob

Hmmmmmm not too sure what you are saying here (faking my way through applying it to a paragraph and anchored objects).
Lets say I have the following:
Chef Salad
We use the freshest lettuce, tomatoes..... bla bla bla
I wanted the name of the menu item (Chef Salad) to be 30 pt, Times New Roman, Red text (no container fill), drop shadow.
Lets also say I want the description (the Bla bla bla) to be 15 pt, Arial, Green text, and small drop shadow.
From what I understood you to say(write), I would have to make a Object style for Chef Salad (and I guess another Object style for the description)given that I want to use special effects.
What has been one of the more confusing things about ID (and believe me, I have been watching hours and hours of Lynda.com, Youtube, and reading a book/DVD on the subject) is when to use paragraph styles, Character styles and now Object styles.
Changing the parameters on these styles is not (to me) the difficulty. When and where to use a particular style is.
I don't want to keep bugging you so if you have someplace that really gets into the proper place and time to use these styles I will go there (if I haven't been there already).
However, if it is pretty easy for you to elaborate some more, that too would be greatly appreciate.
Thanks Bob
PS Nice looking web site you have.... I am up there viewing it now.

CSS style sheet problem

My page is displayed perfectly in design view, reflecting the CSS rules I've created, but when I preview in Live View and in a browser, it's as if there is no style sheet attached at all... ??

Some things to check:
1) Did you define a Local Site folder in DW before starting your project?
If no, refer to part 1 of this tutorial:
Creating your first web site in DW CS4 -
http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt1.html
2) Did you link your HTML page(s) to an external stylesheet?
See link below for details:
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

RH 11 v11.0.2.240: Cleaning up an External Style Sheet (CSS)

Hello,
I am in the process of trying to clean up a CSS for an "old" RoboHelp project. I believe the CSS contains many unused styles that were probably "trial & error" styles, but were never deleted when they failed to produce the correct format. I know it doesn't do any harm to leave them in the CSS, but I really don't want them around!
I did not see a report in RoboHelp that would provide this information, but before doing a search for each individual style using a program like Agent Ransack, I wanted to see if anyone in the Community had any clever ideas as to how to accomplish this task.
Thanks for your input/suggestions!

I can't say I've had this issue. But then again, I never use the CSS property inspector to create an external style sheet. I just hit File > New > CSS. I add my CSS rules and Save it to the local site folder.
Link style sheet to HTML pages.
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Site-specific style sheet rules

Similar Messages

Maybe you are looking for