Jump to content

Archived

This topic is now archived and is closed to further replies.

arlomiller

Menu and Button Colors

Recommended Posts

arlomiller

Ok, DMS is pretty freaking amazing.

 

I made this site using it:

http://millerfamilydermatology.com/

 

I'm not a web designer.  I'm a doctor.  I like computers, tech, design, and art, so I thought I would try making my website myself using DMS.  Its gone well, had to ask a lot of questions here and do a lot by trial and error.

 

Having gone through a website design process as a novice, I wanted to say that I think that hands down, the single most frustrating thing with DMS and, I think the biggest opportunity for improvement, is giving it an easy interface for controlling the menu and button colors.

 

I ended up trying to use CSS to alter the menu color and create some new button colors.  They are working (I think) in chrome and safari, but do not seem to function in Firefox and Safari.

 

I've seen enough to realize that button and menu styling is pretty much an infinitely complex thing, BUT I think that for casual users like myself, a relatively modest interface could probably be made to give the user control over colors in these elements. 

Share this post


Link to post
Share on other sites
batman

HI arlomiller

Your button colors works fine to me in Chrome, Safari and Firefox.

I´m a newbie too and when you learn to use the CSS color is not so difficult.

I like your site, my congratulation !

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Your site looks awesome, really nice job.

 

FireFox, Chrome, IE, Safari all use different browser engines and therefore, display certain CSS properties differently or require additional code. This is why you may have issues in FireFox. However, Safari and Chrome use the same browser engine, so if it displays OK in Chrome it should display fine in Safari also, I just this moment checked and your buttons appear to be working, just as Batman said above.

 

Therefore, I have provided you with a link to our old documentation for PageLines Framework, which goes the code to create custom buttons that are supported by all browsers.

 

Hope it helps.

 

http://support.pagelines.me/docs/customization/create-custom-buttons/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
arlomiller

Thanks for the reminder about the CSS

 

So I borrowed from the structure of the buttons and used that to tweak the menu CSS and came up with this:

 

.navbar.pl-color-blue {
border-top: 0px;
background-color: #34495E;
background-image: -webkit-gradient(linear,0 0,0 100%,from(#3C5064),to(#24384D));
background-image: -webkit-linear-gradient(top,#3C5064,#24384D);
background-image: -moz-gradient(linear,0 0,0 100%,from(#3C5064),to(#24384D));
background-image: -moz-linear-gradient(top, #3C5064,#24384D);
background-repeat: repeat-x;
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#3C5064, endColorStr=#24384D);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#3C5064, endColorStr=#24384D);
}
 
Basically, adding this code for firefox:
background-image: -moz-gradient(linear,0 0,0 100%,from(#3C5064),to(#24384D));
background-image: -moz-linear-gradient(top, #3C5064,#24384D);
Made it work with Firefox
 
I'm hoping this does it for IE, but i'm on mac:
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#3C5064, endColorStr=#24384D);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#3C5064, endColorStr=#24384D);
 
Questions:
-Is the IE code correct?

-Do i need:

background-image: -webkit-gradient(linear,0 0,0 100%,from(#3C5064),to(#24384D));
AND
background-image: -webkit-linear-gradient(top,#3C5064,#24384D);
 
likewise:
background-image: -moz-gradient(linear,0 0,0 100%,from(#3C5064),to(#24384D));
AND
background-image: -moz-linear-gradient(top, #3C5064,#24384D);
 
They seem redundant to me.

Share this post


Link to post
Share on other sites
Rob

Theoretically, they are redundant, but there to insure different browsers see the same thing.

 

Gradients are odd things.  Each browser handles their CSS in different ways, thus unlike most other things in CSS, the code for them is more complex.

 

I'd leave them.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
arlomiller

So this is what i've come up with:

 

.btn-green, .btn-success {
  font-size: 16px;
  padding: 6px 8px 8px;
  text-decoration: none;
  border: solid #596911 1px;
  color: white;  
  #gradient > .vertical (#b3c272,#748a15);
  text-shadow: 0 1px 3px (#666666);
  .border-radius(6px);
  .box-shadow(0px 1px 3px #666666);
 
 &:hover {
    text-shadow: 0 1px 3px (#666666);
    color: white;
   .buttonBackground(darken(#748a15, 5%), #748a15);
  }  
  &:active {
    text-shadow: 0 1px 3px (#666666);
    color: white;
   .buttonBackground(darken(#748a15, 5%), #748a15);
  }
}
 
 
Its being used for the green buttons on my testing site dev.millerfamilydermatology.com
 
The only hangup I had is with the gradient and hover.   In your example code:
  1. .btn-google {
  2. color: white;
  3. .buttonBackground(lighten(#dd4b39, 10%),#dd4b39);
  4. text-shadow: 0 -1px 0 rgba(0,0,0,.25);

 

You put in .buttonBackground, specify a background color to be lightened by 10% in the default state, and revert to the other regular dd4b39 in all other states.  (I think).  

Couldn't figure out a way to do that easily with the gradient, so I just specified a darker, solid color background for the hover state.  Is there a way to apply lighten or darken to the gradient, analagous to how its done for .buttonBackground?

 

Otherwise, I think i was able to use the mixins to get everything else I was looking for.

 

And they look fine in the version of IE that I just checked.

Share this post


Link to post
Share on other sites

×