Editing CSS rules in SlideShow

Hello Community,
I need to create a new CSS rule for the ContentSlideShow from Spry. I want that the title of the headline is in a other color than the other text.
I want the title "The Expendables" in #429af2 and the rest of the text in white. Can somebody help me futher with this? I already tried to create a new CSS rule by enclosing "The Expendables" with a <div>-Tag named "headtitle", but it does not work if I insert it in the CSS-file of the SlideShow.
Here is the CSS-code of the complete title "The Expendables - Unsere Kritik zum Action-Kracher!":
.WLBSlideShow .photo .caption {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #ffd700;
margin: 0 6px;
line-height: 25px;
font-style: bold;
padding-left: 8px;
position: absolute;
top: 265px;
And here is the first part of the HTML-code:
<div class="article">
    <div class="photo"> <a href="EDIT"> <img src="Expendables_01.jpg" alt="Expendables" /></a>
      <div class="caption">The Expendables - Unsere Kritik zum Action-Kracher!</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">The Expendables - Unsere Kritik zum Action-Kracher!</div>
        <div class="subTitle">The Expendables - Unsere Kritik zum Action-Kracher!</div>
      </div>
      <div class="content">
        <p>The Expendables - Unsere Kritik zum Action-Kracher!</p>
        <button type="button"><span><span><span>More Info</span></span></span></button>
      </div>
    </div>
</div>
Thanks ahead.

This is one slide of (obviously) several. Is it dynamically created?
For the specific example you've given:
"<div class="caption">The Expendables - Unsere Kritik zum Action-Kracher!</div>
I want the title "The Expendables" in #429af2 and the rest of the text in white."
You'll need to add a span tag inside the div
<div class="caption"><span>The Expendables</span> - Unsere Kritik zum Action-Kracher!</div>
Then the CSS
.WLBSlideShow .photo .caption {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
margin: 0 6px;
line-height: 25px;
font-style: bold;
padding-left: 8px;
position: absolute;
top: 265px;
.WLBSlideShow .photo .caption span {
color: #429af2;

Similar Messages

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.

On Dreamweaver CC how do I get to the css rule definition box?

On the other Dreamweavers when I wanted to edit a css, I selected the css and clicked on the pencil icon to open the css rule definition box.
The only way I find to get acess to the css rule definition box on the new CC is when I am creating a new div and then there is a option for a new style and it opens the box.
My question is how do I get to the box once the rule is created? the pencil icon is not there anymore.
Not good breaking workflows Adobe, some folks have work in progress...
Please help, thanks.

Nancy O. wrote:
I can't remember the last time I used DW's CSS panels. If you know CSS, why not use code view? DW's Code Hinting is very good & it's much quicker to edit code directly in the style sheet than it is in CSS panels.
Nancy O.
That depends a bit on the situation. For example, in Netbeans I use the live connection with Chrome (embedded view or not) and I can then select an item in the live view in Chrome, which opens the css properties panes. These are quite similar to DW.
By changing the values in the css properties pane the changes in values are automatically saved in the css file, and visually updated in realtime in Chrome.
It can be very handy to quickly change the position or margin/padding/size of an element this way without having to switch back and forth to your css. Bit similar to the inspect element pane in FF and Chrome, and the changes are immediately saved.
When I still used DW I used it in the same manner for quick visual changes - and no reason to rummage through my css code.
In short, those css inspector panes can work quite efficiently when you need to polish the css code.
Granted, I would never use it while working on the main css code - but for slight and quick changes it can be a very handy feature.

DW CS3: Template & CSS Rules problems

Dreamweaver CS3 Templates and CSS Rules.
I've built a basic html page with a header, navigation links and main content area, then saved this as a template with the content area as the edit region.
When I create new html pages from this template I want to insert Divs in the edit region for each new page, which I can successfully do, but for some reason Dreamweaver is not allowing me to create new CSS Rules for each new Div? So I'm not able to control position, text layout, colours etc for the new content. So my question is how do I do this?
I got around this with the current website by creating the template with virtually all of the content for the entire website firstly, then deleting as necessary for each page, which I know is the wrong way to build html site pages from a template!
I wonder if someone could please point me in the right direction to get me back on track? Any pointers would be very much appreciated.
Thanks in advance.

Yes, there is a meta tag at the start of the CSS rules. Here's a copy and paste of the code generated in DW CS3. Template was created from a html doc...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

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

Disabling a CSS rule in the Page Inspector deletes it

I have been using the Firefox Page Inspector lately to see how it compares to Firebug. I noticed that if you disable a CSS rule by unchecking the checkbox next to it, it is still shown in the inspector, so you can check the box again and reenable it. However, if I click some other element, and then come back to the previous one, I found that the CSS rule seems to have been deleted entirely i.e. there is no checkbox for me to check to reenable that rule.
This is a pretty major problem for me, as Firebug and Chrome's inspector both remember rules you have disabled and give you the options of reenabling them again later, even if you click a different element. Is it a problem with my particular installation of firefox, or is it just a bug with the inspector?

I've seen that too.<br />
What is happening that deleting and adding rules rules is the same as editing the style sheet via the style editor and changes that you make are actually edits in the style sheet file.<br />
I agree that it would be better to comment out rules so you could at least enable them by editing the file rather than removing the rule completely.

Is there anyway to lock CSS rules? What's happening in design view?

Hi,
I have no idea what I've done, but I've accidentally deleted some CSS rules. Now my design view shows almost a random pattern, yet most things seem to still be working when I view it in a browser.
So,
Is there a way to lock CSS rules so that you don't accidentally loose them? Is there a way to toggle them on and off? Why does my design view suddenly look all whacked out?
The jpg shows my design view and here is the link to the page.
http://test.taffyproductions.com/reservations.htm

You have an id set on one of the divs, but there is no rule for that ID selector:
<div id="sidebar2-1"><img src="_images/sidebar2.jpg" alt="sidebar2" width="180" height="479" /></div>
Change the id to sidebar2 and see what happens. The page should fall back into place correctly.
There is no way to 'lock' in styles, you just need to be careful on editing the style rules as you go
You could always keep a backup copy of a stylesheet that works correctly and if you then want to play around with the rules, do so, but knowing that you have a backup copy if you need it.
I'd also take a look at the naming convention you use for file names. I'd not start a file name or folder with and underscore... some browsers may choke. always better off starting a name with a letter, no characters, or numerals etc.,to be on the safe side.
Nadia
Adobe Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap

Overview of CSS rules for UI?

I've found several useful tweaks I can apply by editing userCrome.css so I'm wondering if there's any documentation somewhere on all available css rules for customizing the UI.
For example, I've added the "Bookmarks" button to the far right of my "Bookmarks Toolbar", but I don't want the text label that comes with it. I only want the icon but how do I found out the name of the id's/class that affects this button?
I'm using Firefox 4 on Windows 7.

See http://forums.mozillazine.org/viewtopic.php?f=23&t=2057009

CSS rules in fluid grid layout?

Hello there
I been working with fluid grid layout and when i set up a page i see in the CSS panel under page.css i have 3 CSS rules for header or content CSS panel for the divs i have set up! Now if i have 3 header CSS rule do i just edit one off them or all off them please? Or is the top one you need to edit in the CSS in the panel you need to edit if just one off them?
I am using Dreamweaver CS6
Look forward to hearing from you.
Thank
Brian

See this FGLayout example. View source to see the code.
Alt-Web :: Fluid Grid Test #4
These are the style sheets I used:
Responsive layout
http://alt-web.com/FluidGrid/FluidGrid.css
My custom content styles
http://alt-web.com/FluidGrid/Content-4.css
Nancy O.

Rename CSS rule

Is there an easy way to rename an existing CSS rule (actually, a compound selector) and retain all the properties that were oringally set for that rule. I'd like to simply change a name of a rule to better fit my layout and naming scheme. Better planning up front would have eliminated this problem, but I goofed on the naming conventions. By renaming some of the rules, I can make my whole layout easier to understand and work with.
I tried the "edit selector," function, but when I did that, it deleted all the properties in that rule. For example, I had a container element that had float, margins, padding and text properties in it. When I changed the name using the "edit selector" function, the element no longer floated, the width had changed, etc.
Any help appreciated.

Grab the original name from your CSS file.
Do a CTRL+F to do a search and change Find In: to be Entire Current Local Site.
Type the original name into the Find: field
Type the new name into the Replace: field
Do a Replace All and let Dreamweaver fix all of those for you.
Rename the rule in your CSS file.
Probably seems a bit basic but it's very thorough (DW won't miss anything) and you can see all the files it did a replace inside of in the Search Results panel so if there is one that looks out of place you can look into.
Of course, be careful what you search on. If the CSS rule you want to change is called RedText, you're planning on changing it to text-red and you have another rule called BigRedText then you might end up with a bunch of Bigtext-red throughout your pages. If you can do it this way, I'd suggest using class="RedText" for your search value so that you don't have any of the forementioned whoopsies.
Hope that helps.

How Do You Add Multiple CSS Rules to Text?

Hi everyone, I have these css rules in my css styles window they are all assigned to some text in a cell on my page.
.Def14grey4 <body>
.def14grey4 a:link <a>
.def14grey4 a:visited <a>
.def14grey4 a:hover <a>
.def14grey4 a:active <a>
.def14grey4 a:focus <a>
How do you add (all of) these styles to the text in the first place, I know how to add the first one (.Def14grey4), you select the text in the cell and choose the rule from the drop-down menu in the css panel, but how do you add the other ones to some text as well, so that it can have the same link properties.
Basically I have some more text elsewhere on the page and want to assign these rules to that as well.
thanks Gareth

You would want to change your order as shown here -
.Def14grey4 <body>
.def14grey4 a:link <a>
.def14grey4 a:visited <a>
.def14grey4 a:hover, .def14grey4 a:focus <a>
.def14grey4 a:active <a>
That way, the hover and the focus states are equivalent.
How do you add (all of) these styles to the text in the first place, I know how to add the first one
You don't really. The 4 bottom selectors say -
"find an element with a class of 'def14grey4', and style any link inside that element this way"
So, <span class="def14grey4"><a href="whatever.html">Whatever</a></span> would get the pseudo-class styles, as would any of the following -
<span class="def14grey4"><a href="whatever.html">Whatever</a></span>
<td class="def14grey4"><a href="whatever.html">Whatever</a></td>
<p class="def14grey4"><a href="whatever.html">Whatever</a></p>
<body class="def14grey4"><a href="whatever.html">Whatever</a></body>
<div class="def14grey4"><a href="whatever.html">Whatever</a></div>
<strong class="def14grey4"><a href="whatever.html">Whatever</a></strong>
and so on. These examples assume that there isn't some other more specific rule that would apply to the same links. You need to study up on the CSS cascade and specificity....

A better way to edit content within a slideshow widget?

Is there a better way to edit the content of slideshow widgets? I understand the way to see the content of a slideshow and edit it is by viewing thumbnails, but this is a very clunky way to be dealing with a lot of content! It would be super cool to be able to link an entire folder to a slideshow widget and have it update when changes are made in that folder. that way designers could organize their files in finder or bridge and then simply update the slideshow link - i would love that!

I was afraid of that...
I don't use lightroom or Photoshop. I used to be a Photoshop user until the cost became so prohibitive. I have since switched to using GIMP as my eternal editor, it's native files are .xcf (musch like the Photoshop .PSD) but Aperture doesn't support .xcf files and I doubt they ever will since GIMP is a free open source tool, rather than a commercial product.
I have been playing with 3.01 now for a few days and finding that the heal tool and burn and dodge tools seem to be improved. Even though in GIMP they were destructive to the original RAW file those items were noticeably better in the external editor.
Also, any extreme editing still needs to be done outside of Aperture, so I will take a Catapult or just keep my current workflow....

How do you save css rules created in web inspector?

Being a web developer, I usually use Firebug on Firefox to test CSS when I'm developing a website. Ever since I got my new iMac, I've really grown to love Safari. I like the Web Inspector but I cannot seem to find a way to copy any of the CSS rules I create for testing. Is there an effective way to create CSS rules and copy the whole CSS rule (property + declarations) so I can paste them somewhere else?

You can import and replace any styles you want from other documents, but templates are templates. That is what they are for.
Styles are document specific for a reason. Imagine the fun and games if the styles in one document changed the behavior of same name style in other unopened documents. You would be chasing your tail forever.
Someone would send you a file and it would inexplicably change layout and appearance just because your styles didn't match.
Peter

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.

Is there a better way to do this? CSS rules/Background image/tables

Hi,
I am designing a site and I have used a table for the banner. Everytime a different page is displayed, the banner image changes. I have created .html pages, and I have created a lot of css rules to change the background image. I think there must be a more efficiant way to do this?
http://www.taffyproductions.com/test/
ALSO... I need to figure out how to make the links (hover/active states) work on all the pages... I figured it out on the index page, but I'm sure there is a better css rule?

Put a div in the head section? Surely you jest!
But you do hint at the easy solution - just have an embedded stylesheet in the head of each page that changed the background image only on that page. No need for any other complexities.
In other words on page1, change this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
</head>
to this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table#banner { background-image:url(images/banner1.jpg); }
</style>
</head>
and on page2 change it to this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table#banner { background-image:url(images/banner2.jpg); }
</style>
</head>
etc.

Editing CSS rules in SlideShow

Similar Messages

Maybe you are looking for