CSS rounded corners in IE

HEy does anyone have a solution for making rounded corners in internet explorer? border-radius works fine in all rowers except IE.

ok i did the HTC part and found and downloaded one. but i dont know how to upload the HTC file::::
Use an htc file in order to 'enable' rounded corners.
This is the preferred method for simple layouts as it 'enables' the older versions of IE to render rounded corners without the use of IECC's, (IE Conditional Comments) as the file 'contents' will be ignored by IE9. I would however advise the use of IECC's when using this or any other method as not only does it enable one to 'isolate' any pre IE9 specific code. but removes the limitation of having to apply a single border-radius value to all the corners. (see note below).
any help with the htc?

Similar Messages

DW-CS6 Does it support css rounded corners?

Anyone know if the new release of DWCS6 will support CSS rounded corners in Design View?
Thanks
Os.

David_Powers wrote:
Dreamweaver CS5.5 wasn't an intermediate upgrade. It contained a whole swathe of excellent features, and was fully deserving of being called CS6. The problem was that Photoshop and Illustrator weren't ready for an upgrade, and they didn't want the numbers to go out of sync. Bad marketing decision, but what's new? ;-)
Yeah, most don't upgrade for 2 versions. I'm still on 4 but will upgrade to 6. Not many will upgrade from 5 to 5.5 as even if it wasn't an intermediate upgrade it reads, on the face of it, the hell like it.
David_Powers wrote:
No, I'm not in charge of the forums. Never have been. I think what's needed is a stronger horizontal rule between posts, but I suspect that will take about 12 months to implement.
A stronger keyline between the posts would help, that can't be too difficult to incorporate.

AP Div with Rounded Corners

Hi All,
I want to draw an AP Div but I want it to have rounded corners. The reason being is that when I add a seperate background it will be more obvious and look better.
If anybody knows of a better way of adding a body of text with it's own background and rounded corners please can you let me know how to do it?
Many Thanks
Big_Gee

Wow Big_Gee! I think that's a Big_Question!
For a start, you can add rounded corners using CSS3 but it isn't widely supported accross all browsers. I don't think that DW will add those CSS rules but it won't take too much to find sample code on the web with a quick Google search on CSS Rounded Corners or something. Nancy O has recently responded to a rounded corner question here: http://forums.adobe.com/thread/657158?tstart=30. I don't konw if it makes a difference that you want the effect on AP Divs or not. I haven't read that you can't.
Adding a background image is achieved with CSS and you might be able to think about putting the rounded corners on the image in your graphics editor. That will depend partly on how flexible you site is and whether users can increase text size in the browser.
If you are using AP Divs (position: absolute) you need to be a bit cautious. General advice is to use them very sparingly and when other options don't achive what you want.
Martin

No Images - Rounded Corners

I have came across many people who belive that the only way
to round corners is to use images. I thought illd just let those
who did not know this isnt the case, and can be done with html and
css only no images no javascript. -
Css Rounded Corners.
Thanks

"james1892" <[email protected]> wrote in
message
news:geijir$boo$[email protected]..
>I have came across many people who belive that the only
way to round
>corners is
> to use images. I thought illd just let those who did not
know this isnt
> the
> case, and can be done with html and css only no images
no javascript. -
>
http://www.cssroundedcorners.co.uk.
Thanks
imho, you can't really say it's "Pure CSS" when you need junk
markup to make
it work.
I'd say this solution would be more elegant if it actually
relied on JS to
plug the Bs you need.
The title would be less catchy though ;-)
In any case, good job!
Thierry
http://www.TJKDesign.com/go/?0
| Articles and Tutorials
http://divahtml.com/products/scripts_dreamweaver_extensions.php
| Extensions
that keep your markup clean
http://www.fourlevel.com/ |
CSS Menus, Gallery, Tab Panels, etc

Bug: Artefacts on rounded corners

On Safari Version 6.0.2 (8536.26.17), ML, Retina MacBook, there are artefacts on the corners of HTML elements which have CSS rounded corners.
See image for details:
This does not happen in other browsers (Chrome...), and it seems it happens only on the right side of those elements. I haven't noticed artefacting on the left side.
This is not a CSS bug or something code related, as this same CSS works perfectly on other browsers and even in Safari on non-Retina screens.
So: Safari 6, Mountain Lion, Retina - artefacting on right side of rounded corners.

I also have this bug.
Safari 6.0.2 (8536.26.17)
Retina MBP 13" late 2012
(screenshot from ACD)

Rounded corners and dropshadows in CSS

Hi all,
Hopefully I am not repeating a similar question. I am trying to redesign my site (with not much luck) in CSS. I want some text/navigation boxes that have rounded corners and drop shadows. Using CSS do I still need to create the images in an image editor, slice the images and place the appropriate sections of the image in divs to get this effect (much like using tables)?
Thanks in advance
Chris

afr43 wrote:
Using CSS do I still need to create the images in an image editor, slice the images and place the appropriate sections of the image in divs to get this effect (much like using tables)?
Thanks in advance
Chris
Like Nancy mentioned, the border-radius properties are not supported in older browsers, particularly IE6, which some of us still worry about. I'm not sure about the support in IE7, but I still design with IE6 in mind. In fact, I have never upgraded my IE browser since version 6, so I keep it on my computer for testing purposes.
In deciding whether to use new css features is deciding whether you are willing to leave IE6 behind. I emailed Simon Collison about this topic a couple of weeks ago. He wrote two very good books about CSS, Beginning CSS and CSS Mastery. The latter book was co-written with Andy Budd.
Here's what Simon said:
"There are so many conflicting views that you really need to think about your target audiences and decide based on that. Will you upset just two or three percent of people, or twenty/thirty percent by not serving for IE6?
"We use stats to discover the portion of users using IE6 and make a unique decision for each project.
"In all honesty, I think it is too early to abandon IE6. We work for clients in the real world, with lots of users locked into using IE6 thanks to over-zealous, outdated IT teams/experts who won't let them upgrade or use Firefox etc."
When I mentioned to Simon that some of the css features he used in his book were not supported in IE6, he responded:
"In a book like CSS Mastery, you have to forget older browsers and look at the future, and cool, exciting techniques. If we wrote that book so everything worked in IE6, it'd be a dull book, and would not have advanced CSS usage."
Most of us are itching to use the latest features of CSS but we need to design for users and consider what their experience will be. So, it comes down to this: It's your decision whether you will use CSS that is not supported by some of the older browsers. If you have a fairly sophisticated market that probably upgrades their browsers to the latest versions, then you might choose to go with the latest features.
My decision is to still style for IE6 (I think it's safe to say that most designers have left IE5 far behind in the dust). These new CSS3 features will look absolutely hideous in IE6.
There is a technique Simon uses in one of his books that he calls "progressive enhancement." The technique will enable new css features, like rounded corners, to only work in modern browsers and in old browsers, like IE6, visitors will see square corners.
I think the best technique that most designers still use is to create rounded corner images in your css. Here's an example of a web site showcased in css zen garden that uses rounded corners with a drop-shadow:
http://www.csszengarden.com/?cssfile=208/208.css
If you right-click on the rounded corners and look at the background images, here's what you see:
For the header: http://www.csszengarden.com/208/top.jpg
Main content: http://www.csszengarden.com/208/right_bottom.gif
Side bar: http://www.csszengarden.com/208/left_bottom.gif
CSS Zen Garder invites designers to download the css file from these sites so you can learn from it.
By the way, the second edition of CSS Mastery: Advanced Web Standards Solutions is due out in a couple of weeks.

Rounded corners in CSS

Hello,
I've just started working with CSS and would like to know how
to create rounded corners on boxes. For instance, a sidebar that
has a border around it with rounded corners or a background colour
that is rectangular with a rounded corner.
Is this done through CSS or is there some other trick to it?
Any help is much appreciated - thanks!

"n6" <[email protected]> wrote in message
news:eq9s5l$is7$[email protected]..
> Hello,
>
> I've just started working with CSS and would like to
know how to create
> rounded corners on boxes. For instance, a sidebar that
has a border around
> it
> with rounded corners or a background colour that is
rectangular with a
> rounded
> corner.
>
> Is this done through CSS or is there some other trick to
it?
Here's one that's pure CSS:
www.cssplay.co.uk/boxes/snazzy.html
And this version uses some JavaScript as well:
www.html.it/articoli/niftycube/
HTH
Roy

Round Corners in CSS

Hi,
I was wondering if anyone knew how to create round corners in
CSS w/o adding an image to the top/bottom - left/right corners.
Is there a simplified way of doing it?
Thanks,
N.

Faisca1978 wrote:
> Hi,
>
> I was wondering if anyone knew how to create round
corners in CSS w/o adding an image to the top/bottom - left/right
corners.
> Is there a simplified way of doing it?
Theoretically when browsers support all of CSS3 you might be
able to get a pure CSS solution that doesn't involve extra markup,
but that's not anytime soon, so for now you'll need to pick lots of
extra markup to do it only with CSS and borders/background colors
but they all seem to be blocky rounded, not really rounded, or a
bit of extra markup and images. Plus you can get away with fewer
images if you don't have to have all for corners rounded.
I'm sure there are more pages out there, but take a look at
these pages for a some rounded corner techniques:
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
http://www.stumbleupon.com/tag/corners/
They mostly use images and some use only one image but use
judicious positioning, and some may set it up using JavaScript that
auto-adds in the extra markup and images for you.
Danilo Celic
| Extending Knowledge Daily :
http://CommunityMX.com/
| Adobe Community Expert

Style ProgressBar to get round corners with CSS

Hi,
is it possible to style a ProgressBar via CSS get "round corners". Tried -fx-background-radius and other without success.
Regards
Oliver

You need to round the bar and track, too.
.progress-bar .bar {
    -fx-background-radius: 5;
.progress-bar .track {
    -fx-background-radius: 5;
.progress-bar {
    -fx-background-radius: 5;
}

[Solved] How to force enable rounded corners in a theme on GNOME 3.16

Hello
I just recently started using arch (and I regret why didnt I use it earlier -.-, such a great OS). I put up Gnome 13.16.2 as my desktop environment particularly because I like its interface (rounded corners, the ui etc. Kinda reminds me of my fav mobile OS MIUI).
And I can see that most of the themes (almost all that I have installed infact) like to remove rounded corners and give a flat rectangle. Is there some way to force rounded corners by editing the theme? I did had a look at gnome-shell.css of theme and the "panel" portion of it didnt had any such part (or atleast I couldn't find it). Some help would be appreciated, really want those rounded corners as well as the theme.
Here's the gnome-shell.css from that theme btw:
/* Copyright 2009, 2015 Red Hat, Inc.
* Portions adapted from Mx's data/style/default.css
* Copyright 2009 Intel Corporation
* This program is free software; you can redistribute it and/or modify it
* under the terms and conditions of the GNU Lesser General Public License,
* version 2.1, as published by the Free Software Foundation.
* This program is distributed in the hope it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
* more details.
* You should have received a copy of the GNU Lesser General Public License
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
stage {
font-family: Cantarell, Sans-Serif;
font-size: 9pt;
color: #5c616c; }
.button, .notification-banner .notification-button,
.notification-banner:hover .notification-button,
.notification-banner:focus .notification-button {
min-height: 20px;
padding: 5px 32px;
transition-duration: 0;
border-radius: 2px;
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #cfd6e6; }
.button:focus, .notification-banner .notification-button:focus {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #5294E2; }
.button:hover, .notification-banner .notification-button:hover {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #5294E2; }
.button:hover:focus, .notification-banner .notification-button:hover:focus {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5294E2;
background-color: #fcfdfd;
border: 1px solid #5294E2; }
.button:active, .notification-banner .notification-button:active, .button:active:focus, .notification-banner .notification-button:active:focus {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
background-color: #5294E2;
border: 1px solid #5294E2; }
.button:insensitive, .notification-banner .notification-button:insensitive {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: rgba(92, 97, 108, 0.55);
border: 1px solid rgba(207, 214, 230, 0.55);
background-color: rgba(252, 253, 253, 0.55); }
StEntry {
padding: 7px;
caret-size: 1px;
selection-background-color: #5294E2;
selected-color: #ffffff;
transition-duration: 300ms;
border-radius: 20px;
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #ffffff;
border: 1px solid #cfd6e6; }
StEntry:focus, StEntry:hover {
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #ffffff;
border: 1px solid #5294E2; }
StEntry:insensitive {
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: rgba(92, 97, 108, 0.55);
background-color: #fcfcfd;
border-color: 1px solid #e1e6ef; }
StEntry StIcon.capslock-warning {
icon-size: 16px;
warning-color: #F27835;
padding: 0 4px; }
StScrollView.vfade {
-st-vfade-offset: 0px; }
StScrollView.hfade {
-st-hfade-offset: 0px; }
StScrollBar {
padding: 8px; }
StScrollView StScrollBar {
min-width: 5px;
min-height: 5px; }
StScrollBar StBin#trough {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px; }
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
border-radius: 4px;
background-color: #babcc1;
border: 0px solid;
margin: 0px; }
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
background-color: #c9ccd0; }
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: #5294E2; }
.slider {
-slider-height: 4px;
-slider-background-color: #cfd6e6;
-slider-border-color: transparent;
-slider-active-background-color: #5294E2;
-slider-active-border-color: transparent;
-slider-border-width: 0;
-slider-handle-radius: 4px;
height: 18px;
border: 0 solid transparent;
border-right-width: 1px;
border-left-width: 5px;
color: transparent; }
.check-box StBoxLayout {
spacing: .8em; }
.check-box StBin {
width: 16px;
height: 16px;
background-image: url("checkbox/checkbox-unchecked.svg"); }
.check-box:focus StBin {
background-image: url("checkbox/checkbox-unchecked-focused.svg"); }
.check-box:checked StBin {
background-image: url("checkbox/checkbox-checked.svg"); }
.check-box:focus:checked StBin {
background-image: url("checkbox/checkbox-checked-focused.svg"); }
.toggle-switch {
width: 52px;
height: 24px;
background-size: contain; }
.toggle-switch-us, .toggle-switch-intl {
background-image: url("switch/switch-off.svg"); }
.toggle-switch-us:checked, .toggle-switch-intl:checked {
background-image: url("switch/switch-on.svg"); }
.shell-link {
color: #2679db; }
.shell-link:hover {
color: #5294e2; }
.headline {
font-size: 110%; }
.lightbox {
background-color: black; }
.flashspot {
background-color: white; }
.modal-dialog {
border-radius: 3px;
color: #5c616c;
background-color: rgba(249, 250, 251, 0);
border: none;
border-image: url("misc/modal.svg") 10 10 10 10;
padding: 0 6px 6px 6px; }
.modal-dialog > * {
padding: 14px; }
.modal-dialog-button-box {
spacing: 0px;
margin: 0px;
padding: 12px 24px;
background-color: #3c4049;
border: solid 0px rgba(0, 0, 0, 0.3);
border-top: 1px;
border-radius: 0px 0px 1px 1px; }
.modal-dialog-button-box .button, .modal-dialog-button-box .notification-banner .notification-button, .notification-banner .modal-dialog-button-box .notification-button {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #c4c7cc;
outline-color: rgba(168, 173, 181, 0.3);
border-color: rgba(168, 173, 181, 0.3);
background-color: rgba(48, 52, 59, 0.95); }
.modal-dialog-button-box .button:hover, .modal-dialog-button-box .notification-banner .notification-button:hover, .notification-banner .modal-dialog-button-box .notification-button:hover {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
border-color: #5294E2;
background-color: rgba(48, 52, 59, 0.95); }
.modal-dialog-button-box .button:focus, .modal-dialog-button-box .notification-banner .notification-button:focus, .notification-banner .modal-dialog-button-box .notification-button:focus {
color: #5294E2; }
.modal-dialog-button-box .button:active, .modal-dialog-button-box .notification-banner .notification-button:active, .notification-banner .modal-dialog-button-box .notification-button:active {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
border-color: #5294E2;
background-color: #5294E2; }
.modal-dialog-button-box .button:insensitive, .modal-dialog-button-box .notification-banner .notification-button:insensitive, .notification-banner .modal-dialog-button-box .notification-button:insensitive {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c6069;
border-color: rgba(168, 173, 181, 0.2);
background-image: rgba(53, 57, 65, 0.95); }
.modal-dialog .run-dialog-entry {
width: 23em; }
.modal-dialog .run-dialog-error-box {
padding-top: 5px;
spacing: 5px; }
.modal-dialog .run-dialog-label {
font-size: 10pt;
font-weight: normal;
color: #5c616c;
padding-bottom: .8em; }
.show-processes-dialog-subject,
.mount-question-dialog-subject,
.end-session-dialog-subject {
font-size: 11pt;
font-weight: bold;
color: #5c616c; }
.end-session-dialog {
spacing: 42px; }
.end-session-dialog-list {
padding-top: 20px; }
.end-session-dialog-layout {
padding-left: 17px; }
.end-session-dialog-layout:rtl {
padding-right: 17px; }
.end-session-dialog-description {
width: 28em;
padding-bottom: 10px; }
.end-session-dialog-description:rtl {
text-align: right; }
.end-session-dialog-warning {
width: 28em;
color: #F27835;
padding-top: 6px; }
.end-session-dialog-warning:rtl {
text-align: right; }
.end-session-dialog-logout-icon {
border: 0px solid transparent;
border-radius: 2px;
width: 48px;
height: 48px;
background-size: contain; }
.end-session-dialog-shutdown-icon {
color: #5c616c;
width: 48px;
height: 48px; }
.end-session-dialog-inhibitor-layout {
spacing: 16px;
max-height: 200px;
padding-right: 10px;
padding-left: 10px; }
.end-session-dialog-session-list, .end-session-dialog-app-list {
spacing: 1em; }
.end-session-dialog-list-header {
font-weight: bold; }
.end-session-dialog-list-header:rtl {
text-align: right; }
.end-session-dialog-app-list-item, .end-session-dialog-session-list-item {
spacing: 1em; }
.end-session-dialog-app-list-item-name, .end-session-dialog-session-list-item-name {
font-weight: bold; }
.end-session-dialog-app-list-item-description {
color: #686d7a;
font-size: 8pt; }
.end-session-dialog .button:last-child, .end-session-dialog .notification-banner .notification-button:last-child, .notification-banner .end-session-dialog .notification-button:last-child {
color: #ffffff;
background-color: #FA4349;
border-color: #FA4349; }
.end-session-dialog .button:last-child:hover, .end-session-dialog .notification-banner .notification-button:last-child:hover, .notification-banner .end-session-dialog .notification-button:last-child:hover {
color: #ffffff;
background-color: #fb7074;
border-color: #fb7074; }
.end-session-dialog .button:last-child:active, .end-session-dialog .notification-banner .notification-button:last-child:active, .notification-banner .end-session-dialog .notification-button:last-child:active {
color: #ffffff;
background-color: #f92a31;
border-color: #f92a31; }
.shell-mount-operation-icon {
icon-size: 48px; }
.show-processes-dialog,
.mount-question-dialog {
spacing: 24px; }
.show-processes-dialog-subject,
.mount-question-dialog-subject {
padding-top: 10px;
padding-left: 17px;
padding-bottom: 6px; }
.show-processes-dialog-subject:rtl,
.mount-question-dialog-subject:rtl {
padding-left: 0px;
padding-right: 17px; }
.mount-question-dialog-subject {
max-width: 500px; }
.show-processes-dialog-description,
.mount-question-dialog-description {
padding-left: 17px;
width: 28em; }
.show-processes-dialog-description:rtl,
.mount-question-dialog-description:rtl {
padding-right: 17px; }
.show-processes-dialog-app-list {
font-size: 10pt;
max-height: 200px;
padding-top: 24px;
padding-left: 49px;
padding-right: 32px; }
.show-processes-dialog-app-list:rtl {
padding-right: 49px;
padding-left: 32px; }
.show-processes-dialog-app-list-item {
color: #454850; }
.show-processes-dialog-app-list-item:hover {
color: #5c616c; }
.show-processes-dialog-app-list-item:ltr {
padding-right: 1em; }
.show-processes-dialog-app-list-item:rtl {
padding-left: 1em; }
.show-processes-dialog-app-list-item-icon:ltr {
padding-right: 17px; }
.show-processes-dialog-app-list-item-icon:rtl {
padding-left: 17px; }
.show-processes-dialog-app-list-item-name {
font-size: 10pt; }
.prompt-dialog {
width: 500px; }
.prompt-dialog-main-layout {
spacing: 24px;
padding: 10px; }
.prompt-dialog-message-layout {
spacing: 16px; }
.prompt-dialog-headline {
font-size: 12pt;
font-weight: bold;
color: #5c616c; }
.prompt-dialog-descritption:rtl {
text-align: right; }
.prompt-dialog-password-box {
spacing: 1em;
padding-bottom: 1em; }
.prompt-dialog-error-label {
font-size: 9pt;
color: #FC4138;
padding-bottom: 8px; }
.prompt-dialog-info-label {
font-size: 9pt;
padding-bottom: 8px; }
.prompt-dialog-null-label {
font-size: 9pt;
padding-bottom: 8px; }
.hidden {
color: transparent; }
.polkit-dialog-user-layout {
padding-left: 10px;
spacing: 10px; }
.polkit-dialog-user-layout:rtl {
padding-left: 0px;
padding-right: 10px; }
.polkit-dialog-user-root-label {
color: #F27835; }
.polkit-dialog-user-user-icon {
border-radius: 2px;
background-size: contain;
width: 48px;
height: 48px; }
.network-dialog-secret-table {
spacing-rows: 15px;
spacing-columns: 1em; }
.keyring-dialog-control-table {
spacing-rows: 15px;
spacing-columns: 1em; }
.popup-menu {
min-width: 200px;
color: #5c616c;
border-image: url("menu/menu.svg") 10 10 35 14; }
.popup-menu .popup-sub-menu {
background: none;
box-shadow: none;
border-image: url("menu/submenu.svg") 8 8 2 2; }
.popup-menu .popup-menu-content {
padding: 1em 0em 1em 0em; }
.popup-menu .popup-menu-item {
spacing: 12px; }
.popup-menu .popup-menu-item:ltr {
padding: .4em 3em .4em 0em; }
.popup-menu .popup-menu-item:rtl {
padding: .4em 0em .4em 3em; }
.popup-menu .popup-menu-item:checked {
background: none;
box-shadow: none;
font-weight: normal;
border-image: url("menu/submenu-open.svg") 8 8 2 2; }
.popup-menu .popup-menu-item:active, .popup-menu .popup-menu-item.selected {
color: #5c616c;
background-color: transparent;
border-image: url("menu/menu-hover.svg") 7 7 1 1; }
.popup-menu .popup-menu-item:insensitive {
color: rgba(92, 97, 108, 0.5);
background: none; }
.popup-menu .popup-inactive-menu-item {
color: #5c616c; }
.popup-menu .popup-inactive-menu-item:insensitive {
color: rgba(92, 97, 108, 0.55); }
.popup-menu.panel-menu {
-boxpointer-gap: 0px;
margin-bottom: 1.75em; }
.popup-menu-ornament {
text-align: right;
margin-left: 10px;
width: 16px; }
.popup-menu-boxpointer {
-arrow-border-radius: 2px;
-arrow-background-color: transparent;
-arrow-border-width: 1px;
-arrow-border-color: transparent;
-arrow-base: 0;
-arrow-rise: 0; }
.candidate-popup-boxpointer {
-arrow-border-radius: 2px;
-arrow-background-color: rgba(37, 39, 45, 0.95);
-arrow-border-width: 1px;
-arrow-border-color: rgba(21, 22, 25, 0.95);
-arrow-base: 5;
-arrow-rise: 5; }
.popup-separator-menu-item {
height: 2px;
margin: 10px 0px;
background-color: transparent;
border: none;
border-image: url("menu/menu-separator.svg") 1 1 1 1; }
.background-menu {
-boxpointer-gap: 4px;
-arrow-rise: 0px; }
.osd-window {
text-align: center;
font-weight: bold;
spacing: 1em;
padding: 20px;
margin: 32px;
min-width: 64px;
min-height: 64px;
color: #ffffff;
background: none;
border: none;
border-radius: 5px;
border-image: url("misc/osd.svg") 10 10 9 11; }
.osd-window .osd-monitor-label {
font-size: 3em; }
.osd-window .level {
padding: 0;
height: 4px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 2px;
color: #5294E2; }
.resize-popup {
color: #A8ADB5;
background: none;
border: none;
border-radius: 5px;
border-image: url("misc/osd.svg") 10 10 9 11;
padding: 12px; }
.switcher-popup {
padding: 8px;
spacing: 16px; }
.switcher-list {
background: none;
border: none;
border-image: url("misc/bg.svg") 10 10 35 14;
border-radius: 3px;
padding: 20px; }
.switcher-list-item-container {
spacing: 8px; }
.switcher-list .item-box {
padding: 8px;
border-radius: 2px; }
.switcher-list .item-box:outlined {
padding: 6px;
border: 1px solid #5294E2; }
.switcher-list .item-box:selected {
color: #ffffff;
background-color: #5294E2;
border: 1px solid #5294E2; }
.switcher-list .thumbnail-box {
padding: 2px;
spacing: 4px; }
.switcher-list .thumbnail {
width: 256px; }
.switcher-list .separator {
width: 1px;
background: rgba(92, 97, 108, 0.33); }
.switcher-arrow {
border-color: transparent;
color: #A8ADB5; }
.switcher-arrow:highlighted {
color: #ffffff; }
.input-source-switcher-symbol {
font-size: 34pt;
width: 96px;
height: 96px; }
.workspace-switcher {
background: transparent;
border: 0px;
border-radius: 0px;
padding: 0px;
spacing: 8px; }
.workspace-switcher-group {
padding: 12px; }
.workspace-switcher-container {
border-image: url("misc/bg.svg") 10 10 35 14;
border-radius: 3px;
padding: 20px;
padding-bottom: 24px; }
.ws-switcher-active-up, .ws-switcher-active-down {
height: 30px;
background-color: #5294E2;
background-size: 96px;
border-radius: 2px;
border: 1px solid #5294E2; }
.ws-switcher-active-up {
background-image: url("misc/ws-switch-arrow-up.png"); }
.ws-switcher-active-down {
background-image: url("misc/ws-switch-arrow-down.png"); }
.ws-switcher-box {
height: 96px;
background-color: rgba(0, 0, 0, 0.33);
border-color: rgba(0, 0, 0, 0.33);
border-radius: 2px; }
.tile-preview {
background-color: rgba(82, 148, 226, 0.35);
border: 1px solid #5294E2; }
.tile-preview-left.on-primary {
border-radius: 0px 0 0 0; }
.tile-preview-right.on-primary {
border-radius: 0 0px 0 0; }
.tile-preview-left.tile-preview-right.on-primary {
border-radius: 0px 0px 0 0; }
#panel {
background-color: rgba(37, 39, 45, 0.95);
border-color: rgba(16, 17, 20, 0.95);
border-bottom-width: 1px;
font-weight: bold;
height: 2.1em;
min-height: 26px; }
#panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
background-color: transparent;
border-image: none; }
#panel:overview {
background-color: rgba(14, 15, 17, 0.8); }
#panel #panelLeft, #panel #panelCenter {
spacing: 8px; }
#panel .panel-corner {
-panel-corner-radius: 0px;
-panel-corner-background-color: transparent;
-panel-corner-border-width: 0px;
-panel-corner-border-color: black; }
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
-panel-corner-border-color: black; }
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-cornerunlock-screen {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent; }
#panel .panel-button {
-natural-hpadding: 12px;
-minimum-hpadding: 6px;
font-weight: bold;
color: #ffffff;
transition-duration: 100ms; }
#panel .panel-button .app-menu-icon {
width: 0;
height: 0;
margin-left: 4px;
margin-right: 4px; }
#panel .panel-button:hover {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.17); }
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
color: #ffffff;
background-color: #5294E2;
box-shadow: none; }
#panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {
icon-shadow: none; }
#panel .panel-button .system-status-icon {
icon-size: 16px;
padding: 0 8px; }
.unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button {
color: #737a88; }
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
color: #737a88; }
#panel .panel-status-indicators-box,
#panel .panel-status-menu-box {
spacing: 2px; }
#panel .screencast-indicator {
color: red; }
#panelActivities > *,
#panelActivities:hover > *,
#panelActivities:focus > *,
#panelActivities:active > *,
#panelActivities:overview > *,
#panel:overview #panelActivities.panel-button:active > *,
#panel:overview #panelActivities.panel-button:focus > * {
background-image: url("misc/activities.svg");
background-position: center top;
width: 24px;
height: 24px;
background-color: transparent !important;
background-gradient-direction: none !important;
border: 0 solid transparent !important;
text-shadow: 0 0 transparent !important;
transition-duration: 0ms !important;
box-shadow: none !important;
color: transparent; }
.system-switch-user-submenu-icon {
icon-size: 24px;
border: 1px solid rgba(92, 97, 108, 0.4); }
#appMenu {
spinner-image: url("misc/process-working.svg");
spacing: 4px; }
#appMenu .label-shadow {
color: transparent; }
.aggregate-menu {
width: 360px; }
.aggregate-menu .popup-menu-icon {
padding: 0 4px; }
.system-menu-action {
padding: 13px;
color: #5c616c;
border-radius: 32px;
/* wish we could do 50% */
border: 1px solid transparent; }
.system-menu-action:hover, .system-menu-action:focus {
transition-duration: 100ms;
padding: 13px;
color: #5c616c;
background-color: transparent;
border: 1px solid #5294E2; }
.system-menu-action:active {
color: #ffffff;
background-color: #5294E2;
border: 1px solid #5294E2; }
.system-menu-action > StIcon {
icon-size: 16px; }
#calendarArea {
padding: 0.75em 1.0em; }
.calendar {
margin-bottom: 1em; }
.calendar,
.datemenu-today-button,
.datemenu-displays-box,
.message-list-sections {
margin: 0 1.5em; }
.datemenu-calendar-column {
spacing: 0.5em; }
.datemenu-displays-section {
padding-bottom: 3em; }
.datemenu-today-button,
.world-clocks-button,
.message-list-section-title {
border-radius: 3px;
padding: .4em; }
.message-list-section-list:ltr {
padding-left: .4em; }
.message-list-section-list:rtl {
padding-right: .4em; }
.datemenu-today-button,
.world-clocks-button,
.message-list-section-title {
padding: 7px 10px 7px 10px;
border: 1px solid rgba(255, 255, 255, 0); }
.datemenu-today-button:hover, .datemenu-today-button:focus,
.world-clocks-button:hover,
.world-clocks-button:focus,
.message-list-section-title:hover,
.message-list-section-title:focus {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #5294E2; }
.datemenu-today-button:active,
.world-clocks-button:active,
.message-list-section-title:active {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
background-color: #5294E2;
border: 1px solid #5294E2; }
.datemenu-today-button .date-label {
font-size: 1.5em; }
.world-clocks-header,
.message-list-section-title {
color: rgba(92, 97, 108, 0.4);
font-weight: bold; }
.world-clocks-button:active .world-clocks-header {
color: #ffffff; }
.world-clocks-grid {
spacing-rows: 0.4em; }
.calendar-month-label {
color: #5c616c;
font-weight: bold;
padding: 8px 0; }
.pager-button {
color: transparent;
background-color: transparent;
width: 32px;
border-radius: 2px; }
.pager-button:focus, .pager-button:hover, .pager-button:active {
background-color: transparent; }
.calendar-change-month-back {
background-image: url("misc/calendar-arrow-left.svg"); }
.calendar-change-month-back:focus, .calendar-change-month-back:hover {
background-image: url("misc/calendar-arrow-left-hover.svg"); }
.calendar-change-month-back:active {
background-image: url("misc/calendar-arrow-left.svg"); }
.calendar-change-month-back:rtl {
background-image: url("misc/calendar-arrow-right.svg"); }
.calendar-change-month-back:rtl:focus, .calendar-change-month-back:rtl:hover {
background-image: url("misc/calendar-arrow-right-hover.svg"); }
.calendar-change-month-back:rtl:active {
background-image: url("misc/calendar-arrow-right.svg"); }
.calendar-change-month-forward {
background-image: url("misc/calendar-arrow-right.svg"); }
.calendar-change-month-forward:focus, .calendar-change-month-forward:hover {
background-image: url("misc/calendar-arrow-right-hover.svg"); }
.calendar-change-month-forward:active {
background-image: url("misc/calendar-arrow-right.svg"); }
.calendar-change-month-forward:rtl {
background-image: url("misc/calendar-arrow-left.svg"); }
.calendar-change-month-forward:rtl:focus, .calendar-change-month-forward:rtl:hover {
background-image: url("misc/calendar-arrow-left-hover.svg"); }
.calendar-change-month-forward:rtl:active {
background-image: url("misc/calendar-arrow-left.svg"); }
.calendar-day-base {
font-size: 80%;
text-align: center;
width: 25px;
height: 25px;
padding: 0.1em;
margin: 2px;
border-radius: 12.5px; }
.calendar-day-base:hover, .calendar-day-base:focus {
background-color: rgba(0, 0, 0, 0.1); }
.calendar-day-base:active {
color: #5c616c;
background-color: rgba(0, 0, 0, 0.15);
border-width: 0; }
.calendar-day-base.calendar-day-heading {
color: rgba(92, 97, 108, 0.85);
margin-top: 1em;
font-size: 70%; }
.calendar-day {
border-width: 0;
color: rgba(92, 97, 108, 0.8); }
.calendar-day-top {
border-top-width: 0; }
.calendar-day-left {
border-left-width: 0; }
.calendar-nonwork-day {
color: #5c616c;
font-weight: bold; }
.calendar-today,
.calendar-today:active,
.calendar-today:focus,
.calendar-today:hover {
font-weight: bold;
color: #ffffff;
background-color: #5294E2;
border-width: 0; }
.calendar-day-with-events {
color: #5294E2;
font-weight: bold; }
.calendar-today.calendar-day-with-events {
color: #ffffff; }
.calendar-other-month-day {
color: rgba(92, 97, 108, 0.3);
opacity: 1; }
.message-list {
width: 420px; }
.message-list-sections {
spacing: 1.5em; }
.message-list-section,
.message-list-section-list {
spacing: 0.7em; }
.message-list-section-title-box {
spacing: 0.4em; }
.message-list-section-close > StIcon {
icon-size: 16px;
border-radius: 8px;
color: #ffffff;
background-color: rgba(92, 97, 108, 0.5); }
.message-list-section-close:hover > StIcon,
.message-list-section-close:focus > StIcon {
color: #ffffff;
background-color: #5c616c; }
.message-list-section-close:active > StIcon {
color: #ffffff;
background-color: #5294E2; }
.message {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #cfd6e6;
padding: 4px; }
.message:hover, .message:focus {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #5294E2; }
.message:active {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
background-color: #5294E2;
border: 1px solid #5294E2; }
.message-icon-bin {
padding: 8px 0px 8px 8px; }
.message-icon-bin:rtl {
padding: 8px 8px 8px 0px; }
.message-icon-bin > StIcon {
icon-size: 48px; }
.message-secondary-bin {
color: rgba(92, 97, 108, 0.4); }
.message-secondary-bin > StIcon {
icon-size: 16px; }
.message-title {
font-weight: bold;
padding: 2px 0 2px 0; }
.message-content {
padding: 8px; }
.ripple-box {
width: 52px;
height: 52px;
background-image: url("misc/corner-ripple-ltr.svg");
background-size: contain; }
.ripple-box:rtl {
background-image: url("misc/corner-ripple-rtl.svg"); }
.popup-menu-arrow {
width: 16px;
height: 16px; }
.popup-menu-icon {
icon-size: 16px; }
.window-close {
background-image: url("misc/close.svg");
background-size: 26px;
height: 26px;
width: 26px; }
.window-close:hover {
background-image: url("misc/close-hover.svg");
background-size: 26px;
height: 26px;
width: 26px; }
.window-close:active {
background-image: url("misc/close-active.svg");
background-size: 26px;
height: 26px;
width: 26px; }
.window-close {
-shell-close-overlap: 11px; }
.nm-dialog {
max-height: 500px;
min-height: 450px;
min-width: 470px; }
.nm-dialog-content {
spacing: 20px; }
.nm-dialog-header-hbox {
spacing: 10px; }
.nm-dialog-airplane-box {
spacing: 12px; }
.nm-dialog-airplane-headline {
font-size: 1.1em;
font-weight: bold;
text-align: center; }
.nm-dialog-airplane-text {
color: #5c616c; }
.nm-dialog-header-icon {
icon-size: 32px; }
.nm-dialog-scroll-view {
border: 1px solid #dde3e9;
border-radius: 2px;
background-color: #ffffff; }
.nm-dialog-header {
font-weight: bold;
font-size: 1.2em; }
.nm-dialog-item {
font-size: 1em;
border-bottom: 0px solid;
padding: 12px;
spacing: 0px; }
.nm-dialog-item:selected {
background-color: #5294E2;
color: #ffffff; }
.nm-dialog-icons {
spacing: .5em; }
.nm-dialog-icon {
icon-size: 16px; }
.no-networks-label {
color: rgba(92, 97, 108, 0.55); }
.no-networks-box {
spacing: 12px; }
#overview {
spacing: 24px; }
.overview-controls {
padding-bottom: 32px; }
.window-picker {
-horizontal-spacing: 32px;
-vertical-spacing: 32px;
padding-left: 32px;
padding-right: 32px;
padding-bottom: 48px; }
.window-picker.external-monitor {
padding: 32px; }
.window-clone-border {
border: 3px solid rgba(82, 148, 226, 0.8);
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px rgba(82, 148, 226, 0); }
.window-caption, .window-caption:hover {
spacing: 25px;
color: #A8ADB5;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 2px;
padding: 4px 12px;
-shell-caption-spacing: 12px; }
.search-entry {
width: 320px;
padding: 7px 9px;
border-radius: 20px;
border: 1px solid rgba(0, 0, 0, 0.25);
background-color: rgba(255, 255, 255, 0.9); }
.search-entry:focus {
padding: 7px 9px; }
.search-entry .search-entry-icon {
icon-size: 16px;
padding: 0 4px;
color: #5c616c; }
.search-entry:hover, .search-entry:focus {
color: #ffffff;
caret-color: #ffffff;
background-color: #5294E2; }
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
color: #ffffff; }
#searchResultsBin {
max-width: 1000px; }
#searchResultsContent {
padding-left: 20px;
padding-right: 20px;
spacing: 16px; }
.search-section {
spacing: 16px; }
.search-section-content {
spacing: 32px; }
.list-search-results {
spacing: 3px; }
.search-section-separator {
background-color: rgba(255, 255, 255, 0.2);
-margin-horizontal: 1.5em;
height: 1px; }
.list-search-result-content {
spacing: 12px;
padding: 12px; }
.list-search-result-title {
font-size: 1.5em;
color: #ffffff; }
.list-search-result-description {
color: #cccccc; }
.search-provider-icon {
padding: 15px; }
.search-provider-icon-more {
width: 16px;
height: 16px;
background-image: url("misc/more-results.svg"); }
#dash {
font-size: 1em;
color: #A8ADB5;
background-color: rgba(37, 39, 45, 0.87);
padding: 6px 0px 6px 0px;
border-color: rgba(16, 17, 20, 0.87);
border-radius: 0px 3px 3px 0px; }
.right #dash, #dash:rtl {
padding: 6px 0px 6px 0px;
border-radius: 3px 0 0 3px; }
.bottom #dash {
padding: 0px 6px 0px 6px;
border-radius: 3px 3px 0 0; }
.top #dash {
padding: 0px 6px 0px 6px;
border-radius: 0 0 3px 3px; }
#dash .placeholder {
background-image: url("misc/dash-placeholder.svg");
background-size: contain;
height: 24px; }
#dash .empty-dash-drop-target {
width: 24px;
height: 24px; }
.dash-item-container > StWidget {
padding: 0px 4px 0px 5px; }
.right .dash-item-container > StWidget, .dash-item-container > StWidget:rtl {
padding: 0px 5px 0px 4px; }
.bottom .dash-item-container > StWidget {
padding: 4px 0px 5px 0px; }
.top .dash-item-container > StWidget {
padding: 5px 0px 4px 0px; }
.dash-label {
border-radius: 3px;
padding: 4px 12px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.7);
text-align: center;
-x-offset: 3px; }
.bottom .dash-label, .top .dash-label {
-y-offset: 3px;
-x-offset: 0; }
#dash .app-well-app .overview-icon, .right #dash .app-well-app .overview-icon, .bottom #dash .app-well-app .overview-icon, .top #dash .app-well-app .overview-icon {
padding: 10px; }
#dash .app-well-app:hover .overview-icon, .right #dash .app-well-app:hover .overview-icon, .bottom #dash .app-well-app:hover .overview-icon, .top #dash .app-well-app:hover .overview-icon {
background-color: #5294E2; }
#dash .app-well-app:active .overview-icon, .right #dash .app-well-app:active .overview-icon, .bottom #dash .app-well-app:active .overview-icon, .top #dash .app-well-app:active .overview-icon {
box-shadow: none;
background-color: #2679db; }
#dash .app-well-app-running-dot {
width: 11px;
height: 2px;
margin-bottom: 6px;
background-color: #5294E2; }
.show-apps .overview-icon {
padding: 11px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 2px;
border: 0px solid; }
.show-apps:hover .overview-icon {
background-color: rgba(0, 0, 0, 0.7);
color: #5294E2; }
.show-apps:active .overview-icon, .show-apps:active .show-apps-icon, .show-apps:checked .overview-icon, .show-apps:checked .show-apps-icon {
color: #ffffff;
background-color: #5294E2;
box-shadow: none;
transition-duration: 0ms; }
.icon-grid {
spacing: 30px;
-shell-grid-horizontal-item-size: 136px;
-shell-grid-vertical-item-size: 136px; }
.icon-grid .overview-icon {
icon-size: 96px; }
.app-view-controls {
padding-bottom: 32px; }
.app-view-control {
padding: 4px 32px;
color: rgba(255, 255, 255, 0.8);
background-color: rgba(14, 15, 17, 0.8);
border-color: rgba(168, 173, 181, 0.3); }
.app-view-control:hover {
color: #ffffff;
background-color: rgba(14, 15, 17, 0.8);
border-color: #5294E2; }
.app-view-control:checked {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
border-color: #5294E2;
background-color: #5294E2; }
.app-view-control:first-child:ltr, .app-view-control:last-child:rtl {
border-radius: 2px 0 0 2px; }
.app-view-control:last-child:ltr, .app-view-control:first-child:rtl {
border-radius: 0 2px 2px 0; }
.search-provider-icon:active, .search-provider-icon:checked,
.list-search-result:active,
.list-search-result:checked {
background-color: rgba(37, 39, 45, 0.85); }
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
.list-search-result:focus,
.list-search-result:selected,
.list-search-result:hover {
background-color: rgba(168, 173, 181, 0.4);
transition-duration: 200ms; }
.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
.app-well-app.app-folder:active .overview-icon,
.app-well-app.app-folder:checked .overview-icon,
.grid-search-result:active .overview-icon,
.grid-search-result:checked .overview-icon {
background-color: rgba(37, 39, 45, 0.85);
box-shadow: inset 0 0 #5294E2; }
.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon,
.app-well-app.app-folder:hover .overview-icon,
.app-well-app.app-folder:focus .overview-icon,
.app-well-app.app-folder:selected .overview-icon,
.grid-search-result:hover .overview-icon,
.grid-search-result:focus .overview-icon,
.grid-search-result:selected .overview-icon {
background-color: rgba(168, 173, 181, 0.4);
transition-duration: 0ms;
border-image: none;
background-image: none; }
.app-well-app-running-dot {
width: 20px;
height: 2px;
margin-bottom: 4px;
background-color: #5294E2; }
.search-provider-icon,
.list-search-result, .app-well-app .overview-icon,
.app-well-app.app-folder .overview-icon,
.grid-search-result .overview-icon {
color: #ffffff;
border-radius: 2px;
padding: 6px;
border: 1px solid transparent;
transition-duration: 0ms;
text-align: center; }
.app-well-app.app-folder > .overview-icon {
background-color: rgba(14, 15, 17, 0.8);
border: 1px solid rgba(168, 173, 181, 0.3); }
.app-well-app.app-folder:hover > .overview-icon {
background-color: rgba(60, 64, 73, 0.95); }
.app-well-app.app-folder:active > .overview-icon, .app-well-app.app-folder:checked > .overview-icon {
background-color: #5294E2;
box-shadow: none; }
.app-well-app.app-folder:focus > .overview-icon {
background-color: #5294E2; }
.app-folder-popup {
-arrow-border-radius: 2px;
-arrow-background-color: rgba(14, 15, 17, 0.8);
-arrow-border-color: rgba(168, 173, 181, 0.3);
-arrow-border-width: 1px;
-arrow-base: 5;
-arrow-rise: 5; }
.app-folder-popup-bin {
padding: 5px; }
.app-folder-icon {
padding: 5px;
spacing-rows: 5px;
spacing-columns: 5px; }
.page-indicator {
padding: 15px 20px; }
.page-indicator .page-indicator-icon {
width: 18px;
height: 18px;
background-image: url(misc/page-indicator-inactive.svg); }
.page-indicator:hover .page-indicator-icon {
background-image: url(misc/page-indicator-hover.svg); }
.page-indicator:active .page-indicator-icon {
background-image: url(misc/page-indicator-active.svg); }
.page-indicator:checked .page-indicator-icon, .page-indicator:checked:active {
background-image: url(misc/page-indicator-checked.svg); }
.app-well-app > .overview-icon.overview-icon-with-label,
.grid-search-result .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px;
spacing: 4px; }
.workspace-thumbnails {
visible-width: 40px;
spacing: 11px;
padding: 12px;
padding-right: 7px;
border-radius: 3px 0 0 3px;
background-color: rgba(37, 39, 45, 0.87);
border-color: rgba(16, 17, 20, 0.87); }
.workspace-thumbnails:rtl {
padding: 12px;
padding-left: 7px;
border-radius: 0 3px 3px 0; }
.workspace-thumbnail-indicator {
border: 4px solid rgba(82, 148, 226, 0.8);
border-radius: 1px;
padding: 1px; }
.search-display > StBoxLayout,
.all-apps,
.frequent-apps > StBoxLayout {
padding: 0px 88px 10px 88px; }
.search-statustext, .no-frequent-applications-label {
font-size: 2em;
font-weight: bold;
color: #5c616c; }
.url-highlighter {
link-color: #2679db; }
.notification-banner,
.notification-banner:hover,
.notification-banner:focus {
font-size: 1em;
width: 34em;
margin: 5px;
padding: 10px;
border-radius: 2px;
color: #5c616c;
background-color: #f9fafb;
border: 0px solid transparent;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); }
.notification-banner .notification-icon,
.notification-banner:hover .notification-icon,
.notification-banner:focus .notification-icon {
padding: 5px; }
.notification-banner .notification-content,
.notification-banner:hover .notification-content,
.notification-banner:focus .notification-content {
padding: 5px;
spacing: 5px; }
.notification-banner .secondary-icon,
.notification-banner:hover .secondary-icon,
.notification-banner:focus .secondary-icon {
icon-size: 1.09em; }
.notification-banner .notification-actions,
.notification-banner:hover .notification-actions,
.notification-banner:focus .notification-actions {
background-color: transparent;
padding: 2px 2px 0 2px;
spacing: 1px; }
.notification-banner .notification-button,
.notification-banner:hover .notification-button,
.notification-banner:focus .notification-button {
padding: 4px 4px 5px; }
.notification-banner .notification-button:first-child, .notification-banner .notification-button:last-child,
.notification-banner:hover .notification-button:first-child,
.notification-banner:hover .notification-button:last-child,
.notification-banner:focus .notification-button:first-child,
.notification-banner:focus .notification-button:last-child {
border-radius: 2px; }
.secondary-icon {
icon-size: 1.09em; }
.chat-body {
spacing: 5px; }
.chat-response {
margin: 5px; }
.chat-log-message {
color: #5c616c; }
.chat-new-group {
padding-top: 1em; }
.chat-received {
padding-left: 4px; }
.chat-received:rtl {
padding-left: 0px;
padding-right: 4px; }
.chat-sent {
padding-left: 18pt;
color: #5294E2; }
.chat-sent:rtl {
padding-left: 0;
padding-right: 18pt; }
.chat-meta-message {
padding-left: 4px;
font-size: 9pt;
font-weight: bold;
color: rgba(92, 97, 108, 0.6); }
.chat-meta-message:rtl {
padding-left: 0;
padding-right: 4px; }
.subscription-message {
font-style: italic; }
.hotplug-transient-box {
spacing: 6px;
padding: 2px 72px 2px 12px; }
.hotplug-notification-item {
padding: 2px 10px; }
.hotplug-notification-item:focus {
padding: 1px 71px 1px 11px; }
.hotplug-notification-item-icon {
icon-size: 24px;
padding: 2px 5px; }
.hotplug-resident-box {
spacing: 8px; }
.hotplug-resident-mount {
spacing: 8px;
border-radius: 4px; }
.hotplug-resident-mount:hover {
background-color: rgba(249, 250, 251, 0.3); }
.hotplug-resident-mount-label {
color: inherit;
padding-left: 6px; }
.hotplug-resident-mount-icon {
icon-size: 24px;
padding-left: 6px; }
.hotplug-resident-eject-icon {
icon-size: 16px; }
.hotplug-resident-eject-button {
padding: 7px;
border-radius: 5px;
color: pink; }
.legacy-tray {
background-color: rgba(37, 39, 45, 0.95);
border-width: 0; }
.legacy-tray:ltr {
border-radius: 0 2px 0 0;
border-left-width: 0; }
.legacy-tray:rtl {
border-radius: 2px 0 0 0;
border-right-width: 0; }
.legacy-tray-handle,
.legacy-tray-icon {
padding: 6px; }
.legacy-tray-handle StIcon,
.legacy-tray-icon StIcon {
icon-size: 24px; }
.legacy-tray-handle:hover, .legacy-tray-handle:focus,
.legacy-tray-icon:hover,
.legacy-tray-icon:focus {
background-color: rgba(92, 97, 108, 0.1); }
.legacy-tray-icon-box {
spacing: 12px; }
.legacy-tray-icon-box:ltr {
padding-left: 12px; }
.legacy-tray-icon-box:rtl {
padding-right: 12px; }
.legacy-tray-icon-box StButton {
width: 24px;
height: 24px; }
.magnifier-zoom-region {
border: 2px solid #5294E2; }
.magnifier-zoom-region.full-screen {
border-width: 0; }
#keyboard {
background-color: rgba(37, 39, 45, 0.9); }
.keyboard-layout {
spacing: 10px;
padding: 10px; }
.keyboard-row {
spacing: 15px; }
.keyboard-key {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #c4c7cc;
outline-color: rgba(168, 173, 181, 0.3);
border-color: rgba(168, 173, 181, 0.3);
background-color: rgba(48, 52, 59, 0.95);
min-height: 2em;
min-width: 2em;
font-size: 14pt;
font-weight: bold;
border-radius: 3px;
box-shadow: none; }
.keyboard-key:focus {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #5294E2; }
.keyboard-key:hover, .keyboard-key:checked {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
border-color: #5294E2;
background-color: rgba(48, 52, 59, 0.95); }
.keyboard-key:active {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
border-color: #5294E2;
background-color: #5294E2; }
.keyboard-key:grayed {
background-color: rgba(60, 64, 73, 0.95);
color: #A8ADB5;
border-color: rgba(0, 0, 0, 0.7); }
.keyboard-subkeys {
color: white;
padding: 5px;
-arrow-border-radius: 2px;
-arrow-background-color: rgba(37, 39, 45, 0.9);
-arrow-border-width: 0px;
-arrow-border-color: transparent;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px; }
.candidate-popup-content {
padding: 0.5em;
spacing: 0.3em;
color: #A8ADB5; }
.candidate-index {
padding: 0 0.5em 0 0;
color: #c4c7cc; }
.candidate-box {
padding: 0.3em 0.5em 0.3em 0.5em;
border-radius: 4px;
color: #A8ADB5; }
.candidate-box:selected, .candidate-box:hover {
background-color: #5294E2;
color: #ffffff; }
.candidate-page-button-box {
height: 2em; }
.vertical .candidate-page-button-box {
padding-top: 0.5em; }
.horizontal .candidate-page-button-box {
padding-left: 0.5em; }
.candidate-page-button {
padding: 4px; }
.candidate-page-button-previous {
border-radius: 2px 0px 0px 2px;
border-right-width: 0; }
.candidate-page-button-next {
border-radius: 0px 2px 2px 0px; }
.candidate-page-button-icon {
icon-size: 1em; }
.framed-user-icon {
background-size: contain;
border: 0px solid transparent;
color: #5c616c;
border-radius: 2px; }
.framed-user-icon:hover {
border-color: transparent;
color: #fbfbfb; }
.login-dialog-banner-view {
padding-top: 24px;
max-width: 23em; }
.login-dialog {
border: none;
background-color: transparent; }
.login-dialog .modal-dialog-button-box {
spacing: 3px; }
.login-dialog .modal-dialog-button {
padding: 3px 18px; }
.login-dialog .modal-dialog-button:default {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #cfd6e6; }
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #5c616c;
background-color: #fcfdfd;
border: 1px solid #5294E2; }
.login-dialog .modal-dialog-button:default:active {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: #ffffff;
background-color: #5294E2;
border: 1px solid #5294E2; }
.login-dialog .modal-dialog-button:default:insensitive {
text-shadow: 0 1px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 rgba(255, 255, 255, 0);
color: rgba(92, 97, 108, 0.55);
border: 1px solid rgba(207, 214, 230, 0.55);
background-color: rgba(252, 253, 253, 0.55); }
.login-dialog-logo-bin {
padding: 24px 0px; }
.login-dialog-banner {
color: #8c939e; }
.login-dialog-button-box {
spacing: 5px; }
.login-dialog-message-warning {
color: #F27835; }
.login-dialog-message-hint {
padding-top: 0;
padding-bottom: 20px; }
.login-dialog-user-selection-box {
padding: 100px 0px; }
.login-dialog-user-selection-box .login-dialog-not-listed-label {
padding-left: 2px; }
.login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label {
color: #A8ADB5; }
.login-dialog-not-listed-label {
font-size: 90%;
font-weight: bold;
color: #5a606a;
padding-top: 1em; }
.login-dialog-user-list-view {
-st-vfade-offset: 1em; }
.login-dialog-user-list {
spacing: 12px;
padding: .2em;
width: 23em; }
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
background-color: #5294E2;
color: #ffffff; }
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
border-right: 2px solid #5294E2; }
.login-dialog-user-list-item {
border-radius: 5px;
padding: .2em;
color: #5a606a; }
.login-dialog-user-list-item:ltr {
padding-right: 1em; }
.login-dialog-user-list-item:rtl {
padding-left: 1em; }
.login-dialog-user-list-item:hover {
background-color: #5294E2;
color: #ffffff; }
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
height: 2px;
margin: 2px 0 0 0;
background-color: #A8ADB5; }
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
background-color: #ffffff; }
.login-dialog-username,
.user-widget-label {
color: #A8ADB5;
font-size: 120%;
font-weight: bold;
text-align: left;
padding-left: 15px; }
.user-widget-label:ltr {
padding-left: 18px; }
.user-widget-label:rtl {
padding-right: 18px; }
.login-dialog-prompt-layout {
padding-top: 24px;
padding-bottom: 12px;
spacing: 8px;
width: 23em; }
.login-dialog-prompt-label {
color: #727985;
font-size: 110%;
padding-top: 1em; }
.login-dialog-session-list-button StIcon {
icon-size: 1.25em; }
.login-dialog-session-list-button {
color: #5a606a; }
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
color: #A8ADB5; }
.login-dialog-session-list-button:active {
color: #2b2e33; }
.screen-shield-arrows {
padding-bottom: 3em; }
.screen-shield-arrows Gjs_Arrow {
color: white;
width: 80px;
height: 48px;
-arrow-thickness: 12px;
-arrow-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
.screen-shield-clock {
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
font-weight: bold;
text-align: center;
padding-bottom: 1.5em; }
.screen-shield-clock-time {
font-size: 72pt;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }
.screen-shield-clock-date {
font-size: 28pt; }
.screen-shield-notifications-container {
spacing: 6px;
width: 30em;
background-color: transparent;
max-height: 500px; }
.screen-shield-notifications-container .summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0; }
.screen-shield-notifications-container .notification,
.screen-shield-notifications-container .screen-shield-notification-source {
padding: 12px 6px;
border: 1px solid rgba(168, 173, 181, 0.2);
background-color: rgba(60, 64, 73, 0.45);
color: #A8ADB5;
border-radius: 4px; }
.screen-shield-notifications-container .notification {
margin-right: 15px; }
.screen-shield-notification-label {
font-weight: bold;
padding: 0px 0px 0px 12px; }
.screen-shield-notification-count-text {
padding: 0px 0px 0px 12px; }
#panel.lock-screen {
background-color: rgba(60, 64, 73, 0.5); }
.screen-shield-background {
background: black;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); }
#lockDialogGroup {
background: #2e3436 url(misc/noise-texture.png);
background-repeat: repeat; }
#screenShieldNotifications StButton#vhandle, #screenShieldNotifications StButton#hhandle {
background-color: rgba(249, 250, 251, 0.3); }
#screenShieldNotifications StButton#vhandle:hover, #screenShieldNotifications StButton#vhandle:focus, #screenShieldNotifications StButton#hhandle:hover, #screenShieldNotifications StButton#hhandle:focus {
background-color: rgba(249, 250, 251, 0.5); }
#screenShieldNotifications StButton#vhandle:active, #screenShieldNotifications StButton#hhandle:active {
background-color: rgba(82, 148, 226, 0.5); }
#LookingGlassDialog {
spacing: 4px;
padding: 8px 8px 10px 8px;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid black;
border-image: url("misc/osd.svg") 10 10 9 11;
border-radius: 2px;
color: #A8ADB5; }
#LookingGlassDialog > #Toolbar {
padding: 3px;
border: 1px solid rgba(44, 47, 53, 0.95);
background-color: transparent;
border-radius: 0px; }
#LookingGlassDialog .labels {
spacing: 4px; }
#LookingGlassDialog .notebook-tab {
-natural-hpadding: 12px;
-minimum-hpadding: 6px;
font-weight: bold;
color: #A8ADB5;
transition-duration: 100ms;
padding-left: .3em;
padding-right: .3em; }
#LookingGlassDialog .notebook-tab:hover {
color: #ffffff;
text-shadow: black 0px 2px 2px; }
#LookingGlassDialog .notebook-tab:selected {
border-bottom-width: 0px;
color: #5294E2;
text-shadow: black 0px 2px 2px; }
#LookingGlassDialog StBoxLayout#EvalBox {
padding: 4px;
spacing: 4px; }
#LookingGlassDialog StBoxLayout#ResultsArea {
spacing: 4px; }
.lg-dialog StEntry {
background-color: rgba(0, 0, 0, 0.3);
color: #A8ADB5;
selection-background-color: #5294E2;
selected-color: #ffffff;
border-color: rgba(168, 173, 181, 0.3); }
.lg-dialog StEntry:focus {
border-color: #5294E2; }
.lg-dialog .shell-link {
color: #2679db; }
.lg-dialog .shell-link:hover {
color: #5294e2; }
.lg-completions-text {
font-size: .9em;
font-style: italic; }
.lg-obj-inspector-title {
spacing: 4px; }
.lg-obj-inspector-button {
border: 1px solid gray;
padding: 4px;
border-radius: 4px; }
.lg-obj-inspector-button:hover {
border: 1px solid #ffffff; }
#lookingGlassExtensions {
padding: 4px; }
.lg-extensions-list {
padding: 4px;
spacing: 6px; }
.lg-extension {
border: 1px solid #dde3e9;
border-radius: 2px;
background-color: #f9fafb;
padding: 4px; }
.lg-extension-name {
font-weight: bold; }
.lg-extension-meta {
spacing: 6px; }
#LookingGlassPropertyInspector {
background: rgba(0, 0, 0, 0.7);
border: 1px solid grey;
border-radius: 2px;
padding: 6px; }
PS-> The theme is Arc.
EDIT:
Solved it myself. What I was doing:
#panel .panel-corner {
-panel-corner-radius: 6px; //--------------//
-panel-corner-background-color: transparent;
-panel-corner-border-width: 0px;
-panel-corner-border-color: black; }
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
-panel-corner-border-color: black; }
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-cornerunlock-screen {
-panel-corner-radius: 6px; //------------//
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent; }
What needed to be done:
#panel .panel-corner {
-panel-corner-radius: 6px; //--------------//
-panel-corner-background-color: transparent;
-panel-corner-border-width: 2px; //----------------//
-panel-corner-border-color: black; }
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
-panel-corner-border-color: black; }
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-cornerunlock-screen {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent; }
Last edited by Electro498 (2015-06-09 09:01:01)

The file looks like malformed XML (malformed, because it's missing quotes around the attributes, closing tags, etc.). If it's supposed to be proper XML, the right way would be to fix it and use an XML parser in your favorite scripting language to load it, read the other file, and alter the data systematically.
xmllint in the libxml2 package may be useful for checking XML syntax and reformatting.
If you know Python then you could probably use the xml.dom.minidom or one of the other standard XML libraries.
If it is in the format posted then the following script should do what you want, or at least provide a starting point. It's not the most efficient approach but it seems to do the trick.
#!/usr/bin/env perl
use strict;
use warnings;
open (my $fh1, '<', $ARGV[0]) or die "failed to open $ARGV[1]";
open (my $fh2, '<', $ARGV[1]) or die "failed to open $ARGV[2]";
my %user_ips;
foreach my $line (<$fh2>)
my ($user, $ip) = split /,/, $line, 2;
chomp $ip;
$user_ips{$user} = $ip;
my $old_xml;
local $/;
$old_xml = <$fh1>;
my $new_xml = $old_xml;
while ($old_xml =~ m/(<accessControl\s.*?<\/accessControl>)/sg)
my $old_ac = $1;
my ($user) = ($old_ac =~ m/inRealm='([^']+)/);
my $new_ip = $user_ips{$user};
my $old_ip = quotemeta "0.0.0.0";
my $new_ac = $old_ac;
$new_ac =~ s/$old_ip/$new_ip/;
$old_ac = quotemeta $old_ac;
$new_xml =~ s/$old_ac/$new_ac/;
print $new_xml;
close($fh1);
close($fh2);
Now, if we lay down in the grass and remain very quiet, a wild sed wizard may appear to amaze us with a glorious, arcane one-liner. Remember, if he appears, avoid sudden movements. If you startle him, his expression will break and he'll slink off muttering something about it having worked a minute ago.
p.s. I haven't touched Perl in ages. I almost miss it.
Almost.
Last edited by Xyne (2013-10-02 00:25:12)

Is there a way for export to create rounded corners?

I love creating layouts with Fireworks, but it always bothered me that it didn't recreate any rounded corners.
When CS6 came out with the CSS Properties window, I was happy to see that the CSS in the Properties window faithfully created my objects with rounded corners, so I had high hopes that the regular export would include this markup... but it didn't.
My current work-around seems very frustrating. I export my file as HTML with CSS images... I get a perfectly rendered page with one exception... the corners are still square. Then, I go back to Fireworks, open the CSS Properties window, then cut and paste the tags for the corners one by one into the CSS file.
It seems to me with such heavy emphasis on CSS integration, that the export function should include the this code too.
Am I doing something wrong? Or is this still an unsupported feature?

Use the CSS Properties panel to extract and copy CSS for the selected object on the canvas. It has no integration with the CSS and Images export workflow OR the HTML and Images export workflow (the latter of which produces a rigid, image-based, html table layout). HTML and Images export is really only suitable for clickable prototypes. CSS and Images export is really only suitable if you like re-writing all the CSS to match your normal workflow.
General workflow:
1) Add effects to vector shape (corners, drop shadow, glow, gradient fill, border, opacity, etc..)
2) Open CSS Properties panel. CSS properties for selected object are displayed.
3) Click the Copy All button in the panel.
4) Switch to Dreamweaver or your preferred web editor.
5) Paste the CSS into the desired class, id or element rule.
6) View in Live View or Preview in Browser to see results.
HTH

Box with rounded corners displays as rectangle in Web Browser

I am using the box control (IBoxObject) in my Crystal Reports with rounded corners. However the box displays as a rectangle with square corners when viewed in a web browser. I have tried this in IE 7.0.5730.13, Firefox 3.0.3 and Chrome 0.2.149.30 all give the same problem.
The interesting thing is that the boxes display correctly at design time and when exported to PDF, but they wonu2019t display correctly in IE/Firefox/Chrome. Here are the specific settings for the box:
                CornerEllipseHieght = 375
                CornerEllipseWidth = 375
                Crystal Reports Version 10.5.3700.0
I have also attached an image to try and clarify the problem.
[Picture showing Box at design time, in a Web browser and when exported to PDF|http://i38.tinypic.com/10p6k1v.jpg]
Thanks in advance for any help with this issue.
-John

Thank you Ted, this was my take on the problem but it is good to have a confirmation.
There are CSS (HTML) solutions for creating boxes with rounded corners, such as [SpiffyBox|http://www.spiffybox.com/] and [CSS Rounded Box Generator|http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en] and many more that can be found using [Google|http://www.google.com/search?hl=en&q=cssboxeswithroundedcorners&btnG=Google+Search&meta=].
Do you know of any plans to support rounded corners in the future?
Thanks for your help!
John

Rounded corners on unordered list

I'd like to be able to have style my vertical menu, made with
an
unordered list, to have rounded corners. The menu is a fixed
width, but
the items could sometimes run onto two lines, so the height
of each item
needs to be flexible.
I created images called top.gif and bottom.gif for the curves
and when
I've done boxes I've made the bottom image a background to
the box div
tag and the top image a background to the heading tag within
the div.
However with the unordered list I don't really have two
elements to
attach the images to, if you understand what I mean?
I've been googling but haven't yet found a solution. Can
anyone
recommend a way of doing this?
Thanks
Vix

> I've been googling but haven't yet found a solution. Can
anyone recommend
> a way of doing this?
Could could wrap the UL in a DIV, giving you two elements.
You could give the first LI and last LI custom classes,
giving you to
elements.
While not pristine, I often will use wrapper divs to attach
CSS too:
<div id="menuOuterwrapper">
<div id="innnerWrapper">
<ul>...</ul>
</div></div>
That works for me in that it keeps my 'style HTML' separate
from my 'content
HTML'.
A goofy interpretation of 'separation of style and content',
perhaps.
-Darrel

CSS rounded corner problem

Another question regarding my site which I'm working on.
I have used a tutorial on a css corners website and put the code on the tutorial on my site to test it out.
The url is http://www.lindendesign.co.uk/test/templates/header2.html
In the bit under my navigation menu, there is block with the rounded corners, which appears correctly.
I have added the exact same code further down, but in the content div, but it appears incorrect.
Does anyone know why this is happening?
Also, if anyone could help with the gap between web hosting header (with the green background), and the bit below it (with the borders on the side), that would be great too.
I've tried everything and I'm really struggling so would really appreciate any help.

Just to clarify, CSS won't round off the corners on images. CSS will produce rounded borders around the images.
CSS:
img {
float: left;
margin: 45px;
border: 2px solid #999;
padding: 25px;
background: #FFF;
/**ROUNDED BORDERS FOR MOZILLA,
WEBKIT, LINUX, IE9, OPERA**/
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
-khtml-border-radius: 16px;
-ms-border-radius: 16px;
border-radius: 16px;
HTML:
<img src="some-image.jpg" width="100" height="100" />
<img src="some-image.jpg" width="100" height="100" />
<img src="some-image.jpg" width="100" height="100" />
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to create rounded corners for web site

I am interested in any help with creating rounded header and
rounded columns like at adobe home page. Whats the best way to go
about creating a page with rounded text boxes, rounded nav bars,
rounded logo box, etc..
Thanks,
Dennis

Rounded corners in Web pages now can be done best with CSS3. A lot of contemporary browsers support them -- Firefox, Opera, Chrome, Safari. IE doesn't support rounded corners (not yet), but this will happen somewhere in the future...
CSS3 rounded corners: a basic how-to:
http://www.css3.info/preview/rounded-border/
Of course, you can also use rounded corners in a Fireworks image, then apply the corners to the HTML elements via CSS; this will work in all browsers, including IE. There are a lot of tutorials over the Web which cover this topic, too

CSS rounded corners in IE

Similar Messages

Maybe you are looking for