close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Changing background color of side menu

Thread began 2/18/2010 9:57 pm by rmcadams351257 | Last modified 3/03/2010 9:46 pm by scott395605 | 1986 views | 18 replies |

rmcadams351257

Changing background color of side menu

Hi;

I'm using Powerstore3 and I can't seem to find a way of changing the background color of the side menu. I would like to change it to black. Can anyone help?

Thanks
Ron

Sign in to reply to this post

Jason ByrnesWebAssist

in the spry_custom.css file, change the background-color property for the AccordionPanelTab class.

Sign in to reply to this post

rmcadams351257

Thank you

Thanks for the help.

You guys are quick!

Ron

Sign in to reply to this post

scott395605

Okay I've got all that, works great on hover but once the "button" is "open" it reverts back to default blue #3375A2... This happens in both Firefox and Safari if that makes a difference... Any guidance?

Sign in to reply to this post

Jason ByrnesWebAssist

you also need to change the .AccordionFocused .AccordionPanelTab class in the spry_custom.css file, and the doHighlight script in the main.dwt.php template:
function doHighlighlight(div) {

div.setAttribute('style',"background-color:#3375A2; color: white; border-top:0px;");
div.style.cssText = "background-color:#3375A2; color: white; border-top:0px;";

Sign in to reply to this post

scott395605

Changed all of them but still have the same results... This is driving me crazy...

You can see it at:

http://dkflatwoods.net/DK_Store/Products_Results.php

Sign in to reply to this post

Jason ByrnesWebAssist

when I view source of your page, I do not see any changes made to the script code:
div.setAttribute('style',"background-color:#3375A2; color: white; border-top:0px;");
div.style.cssText = "background-color:#3375A2; color: white; border-top:0px;";

nor do I see any changes to the .AccordionFocused .AccordionPanelTab class in the spry_custom.css file.

It doesn't look like the changes are being uploaded to the server.

Sign in to reply to this post

carleneBeta Tester

I asked the same question and am continuing on with my questions about this issue on this page: showthread.php?t=10734

Was given a more helpful answer - but it still isn't working. Am having the same problem with the color change not sticking.

Sign in to reply to this post

scott395605

front-line fixer

I'm seeing this also on my source code, but when I open my Main.dwt.php and the spry_custom.css file the code is the correct color...

main.dwt.php

var lastHighlight = new Array();
function doHighlighlight(div) {

div.setAttribute('style',"background-color:#7E9653; color: white; border-top:0px;");
div.style.cssText = "background-color:#7E9653; color: white; border-top:0px;";
var y = 0;
for (var x=0; x<lastHighlight.length; x++)



spry_custom.css

/* These selectors change the way messages look when the widget is in one of the error states.
* These classes set a default red border and color for the error text.
* The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
* and this way only the specific error message can be shown by setting the display property to "inline".
*/
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState .textfieldInvalidFormatMsg,
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg,
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg,
.textfieldServerError,
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState .passwordInvalidStrengthMsg,
.passwordCustomState .passwordCustomMsg,
.confirmRequiredState .confirmRequiredMsg,
.confirmInvalidState .confirmInvalidMsg,
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg
{
font-style: italic;
color: #CC3333;
border: none;
}

/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid
* There are two selectors for each state, to cover the two main usecases for the widget:
* - the widget id is placed on the top level container for the INPUT
* - the widget id is placed on the INPUT element itself (there are no error messages)
*/

/* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState,
.textareaValidState textarea, textarea.textareaValidState,
.passwordValidState input, input.passwordValidState,
.confirmValidState input, input.confirmValidState,
.selectValidState select, select.selectValidState
{

}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input,
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input,
input.textfieldMinValueState, .textfieldMinValueState input,
input.textfieldMaxValueState, .textfieldMaxValueState input,
input.textfieldMinCharsState, .textfieldMinCharsState input,
input.textfieldMaxCharsState, .textfieldMaxCharsState input,
textarea.textareaRequiredState, .textareaRequiredState textarea,
textarea.textareaMinCharsState, .textareaMinCharsState textarea,
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea,
input.passwordRequiredState, .passwordRequiredState input,
input.passwordInvalidStrengthState, .passwordInvalidStrengthState input,
input.passwordMinCharsState, .passwordMinCharsState input,
input.passwordCustomState, .passwordCustomState input,
input.passwordMaxCharsState, .passwordMaxCharsState input,
input.confirmRequiredState, .confirmRequiredState input,
input.confirmInvalidState, .confirmInvalidState input,
select.selectRequiredState, .selectRequiredState select,
select.selectInvalidState, .selectInvalidState select
{

}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState,
.passwordFocusState input, input.passwordFocusState,
.confirmFocusState input, input.confirmFocusState,
.selectFocusState select, select.selectFocusState
{
background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
* It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
*/
.textfieldFlashText input, input.textfieldFlashText,
.textareaFlashState textarea, textarea.textareaFlashState
{
color: red !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState,
textarea.textareaHintState, .textareaHintState textarea
{
/*color: red !important;*/
}


.Accordion {
border: solid 1px white;
overflow: hidden;
}

.AccordionPanelTab {
background-color: #eeeeee;
border: 0;
border-top: solid 1px white;
padding:10px;
}

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #7E9653;
}

.AccordionPanelOpen {
border: 1px solid #7E9653;
}

.AccordionPanelOpen .AccordionPanelOpen {
border: 0;
}

.AccordionPanelOpen .AccordionPanelTab {
background-color: #7E9653;
}

.AccordionFocused .AccordionPanelTab {
background-color: #eeeeee;
}

.AccordionFocused .AccordionPanelTabHover {
background-color: #7E9653;
color: #FFF;
}

.AccordionPanelTabHover {
background-color: #7E9653;
color: #FFF;
}

.AccordionPanelOpen .AccordionPanelTabHover {
background-color: #7E9653;
color: #FFF;
}

.AccordionFocused .AccordionPanelOpen .AccordionPanelTabHover {
background-color: #7E9653;
color: #FFF;
}



For some reason after I upload it the linked pages to the template do not seem to refresh with the new code...

Sign in to reply to this post

Jason ByrnesWebAssist

1) To be able to make modifications to the template using Dreamweaver, you must extract the power stoer files to the root of your dreamweaver site.

double check that the power store files are at the root of your dreamweaver site.


2) When you modify the template, make sure that none of the other files are open in Dreamweaver.

3) When you save your changes, you should be prompted to update files that are based on the template. If you are not prompted to update files, you can force this by going to Modify -> Templates -> Update Pages.


4) After updating all of the pages, you must upload the entire site to your remote host.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...