Jump to content

Archived

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

janpeeters

DMS Editor mimics styles of custom CSS and/or plugins

Recommended Posts

janpeeters

Hi,

 

I've noticed that the DMS editor mimics the styles of certain plugins like The Event Calendar or child theme custom CSS. With my custom CSS all hyperlinks get purple (because I have that on my site) and with The Event Calendar all buttons get a different style.

 

Is there a way to cut the CSS for DMS editor loose from generally used CSS so that whatever I do to my CSS or a plugin does to CDD does not affect the DMS editor view? I like DMS editor the way you guys designed it ;-)

 

I have this problem om two sites: www.janpeeters.nl and www.lovo.nu

 

Thanks for any ideas

Jan

 

Share this post


Link to post
Share on other sites
Rob

Hi Jan,

 

That certainly shouldn't be happening, but I suspect the two are using some common CSS elements. When the plugin's CSS is read (second to that of DMS in the browser's read of the stylesheets), it takes precedence over DMS, resulting in the change.

 

Which event plugin is this? The one by Modern Tribe?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

Hi Rob,

 

Yep ;-) The one by Modern Tribe.

But I also have this problem with my personal site where I use custom CSS in a child theme. My links are purple on that site and as you can see, links also get this color in de editor. http://cl.ly/image/2p1H2W3I1s32

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Rob

Jan, I suspect that even in the editor, the secondary CSS loading, probably because the plugin will load last.

 

Since Modern Tribe is a premium developer, you might want to ask them to download DMS (the free version) and test this out themselves.  I did that with a few other premium plugin developers who were kind enough to develop custom solutions they offered to our customers via their forum or eventually via our store.  For example, Ubermenu created a custom section.

 

Their plugin is very popular with our clientele and I'm sure it's in their best interests to make this work correctly.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

Hi Rob,

 

Thanks for the speedy responses!

Will do that regarding Modern Tribe.

Do you think there is a solution for the custom coloured links that I'm causing myself. I can figure that if Pagelines DMS would prepend the css classes for links in the editor with e.g. dms- it would not happen. Or is there anything I can do myself?

 

Jan

Share this post


Link to post
Share on other sites
Rob

Jan,  honestly I don't know.  Have you tried adding custom CSS to override what's happening?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

I'm gonna try that. Find out the context of the links in editor and create a custom rule for that. 

Maybe when suitable you can discuss this with the devs, maybe they can implement something that protects the editor css from 'outside' css.

 

Have a nice weekend!

Jan

Share this post


Link to post
Share on other sites
Rob

Jan,

 

As soon as I see one online, I promise to discuss this with them. 

 

Have a great weekend.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

Rob, thanks. Grateful for your ever positive help here! 

Share this post


Link to post
Share on other sites
Rob

Thanks Jan!

 

Always a pleasure to help!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

Hi Rob, since The Event Manager free missed some features that I needed I installed Event Manager and that plugin shows the same problems. Also there the plugin overrides the Editor CSS. Just FYI for when you speak to the devs.

Share this post


Link to post
Share on other sites
janpeeters

Hi Rob, 

 

This issue got picked up very well by a Events Manager user named FranceImage from the Wordpress Forums:http://wordpress.org/support/topic/events-manager-influences-css-of-pagelines-dms?replies=6#post-4840644

He researched it quite thoroughly and comes to the conclusion that it has to do with the inclusion of jquery custom css (ui-lightness.css). He states that Event Manager doesn't implement this specific enough and that Pagelines does this right :-) yay!

 
 
Best, Jan

Share this post


Link to post
Share on other sites
Mark & Phil

Just overriding .btn, nothing special.

Share this post


Link to post
Share on other sites
Danny

Can you provide the exact code used please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Mark & Phil
// BUTTON STYLES
// -------------

// Base styles
// --------------------------------------------------

// Core
.btn {
	display: inline-block;
	.ie7-inline-block();
	padding: 6px 10px;
	margin-bottom: 0; // For input.btn
	font-size: @buttonFontSize;
	line-height: @baseLineHeight - 1;
	color: #fff;
	text-align: center;
	text-shadow: none;
	vertical-align: middle;
	background:  @btnBackground;
	border-bottom: 4px solid @btnBackgroundHighlight;
	text-transform: uppercase;
	cursor: pointer;

	// Give IE7 some love
	.ie7-restore-left-whitespace();
	
	&:hover {
		color: white;
		text-decoration: none;
		background-color: darken( @btnBackground, 5% );
		border-bottom: 4px solid darken( @btnBackground, 10% );
	}
	&:focus {
	  .tab-focus();
	}
	&.active,
	&:active {
		.translate3d(0, 1px, 0);
		color: white;
		text-decoration: none;
		background-color: darken( @btnBackground, 5% );
		border-bottom: 4px solid darken( @btnBackground, 10% );
		outline: 0;
	}
}

// Hover state
body a.btn:hover {
  text-decoration:none;
}

// Disabled state
.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-image: none;
  background-color: darken(white, 10%);
  .opacity(65);
  .box-shadow(none);
}


// Button Sizes
// --------------------------------------------------

// Large
.btn-large {
	padding: 14px 20px;
	font-size: @buttonFontSize + 4px;
	line-height: normal;
	.border-radius( 4px );
	[class^="icon-"] {
		margin-top: 1px;
	}
}

// Small
.btn-small {
	padding: @paddingSmall;
	font-size: @fontSizeSmall;
	.border-radius(@borderRadiusSmall);
	[class^="icon-"],
	[class*=" icon-"] {
	  margin-top: 0;
	}
}



// Mini
.btn-mini {
	padding: 2px 6px;
	font-size: 11px;
	line-height: 14px;
	[class^="icon-"],
	[class*=" icon-"] {
 		margin-top: -1px;
	}
}


// Alternate buttons
// --------------------------------------------------

// Set text color
// -------------------------
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-important,
.btn-important:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover, 
.btn-edit,
.btn-edit:hover{
  color: white;
}
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-important.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active,
.btn-edit.active {
  color: white;
}

// Set the backgrounds
// -------------------------
.btn-primary {
	background:  @btnPrimaryBackground;
	border-bottom: 4px solid @btnPrimaryBackgroundHighlight;

	&:hover {
		color: white;
		text-decoration: none;
		background-color: darken( @btnPrimaryBackground, 5% );
		border-bottom: 4px solid darken( @btnPrimaryBackground, 10% );
	}
}
// Warning appears are orange
.btn-warning {
	background:  @btnWarningBackground;
	border-bottom: 4px solid @btnWarningBackgroundHighlight;

	&:hover {
		color: white;
		text-decoration: none;
		background-color: darken( @btnWarningBackground, 5% );
		border-bottom: 4px solid darken( @btnWarningBackground, 10% );
	}
}
// Important and error appear as red
.btn-important {
	background:  @btnImportantBackground;
	border-bottom: 4px solid @btnImportantBackgroundHighlight;

	&:hover {
		color: white;
		text-decoration: none;
		background-color: darken( @btnImportantBackground, 5% );
		border-bottom: 4px solid darken( @btnImportantBackground, 10% );
	}
}
// Success appears as green
.btn-success {
	background:  @btnSuccessBackground;
	border-bottom: 4px solid @btnSuccessBackgroundHighlight;

	&:hover {
		color: white;
		text-decoration: none;
		background-color: darken( @btnSuccessBackground, 5% );
		border-bottom: 4px solid darken( @btnSuccessBackground, 10% );
	}
}
// Info appears as a neutral blue
.btn-info {
	background:  @btnInfoBackground;
	border-bottom: 4px solid @btnInfoBackgroundHighlight;

	&:hover {
		color: white;
		text-decoration: none;
		background-color: darken( @btnInfoBackground, 5% );
		border-bottom: 4px solid darken( @btnInfoBackground, 10% );
	}
}
// Inverse appears as dark gray
.btn-inverse {
	background:  @btnInverseBackground;
	border-bottom: 4px solid @btnInverseBackgroundHighlight;

	&:hover {
		color: white;
		text-decoration: none;
		background-color: darken( @btnInverseBackground, 5% );
		border-bottom: 4px solid darken( @btnInverseBackground, 10% );
	}
}
.btn-edit {
	.buttonBackground(rgba(70,70,70,.5), rgba(70,70,70,.7));
	border: 1px solid rgba(0,0,0,.7);
}

.btn-link-icon{
	> i:first-child {
		color: @linkColor;
	}
}


// Cross-browser Jank
// --------------------------------------------------

button.btn,
input[type="submit"].btn {

  // Firefox 3.6 only I believe
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  // IE7 has some default padding on button controls
  *padding-top: 2px;
  *padding-bottom: 2px;
  &.btn-large {
    *padding-top: 7px;
    *padding-bottom: 7px;
  }
  &.btn-small {
    *padding-top: 3px;
    *padding-bottom: 3px;
  }
  &.btn-mini {
    *padding-top: 1px;
    *padding-bottom: 1px;
  }
}


// BUTTON GROUPS
// -------------


// Make the div behave like a button
.btn-group {
    position: relative;
    display: inline-block;
    .ie7-inline-block();

    vertical-align: middle; // match .btn alignment given font-size hack above
    white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
    .ie7-restore-left-whitespace();

}

// Space out series of button groups
.btn-group + .btn-group {
  margin-left: 5px;
}

// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
  margin-top: @baseLineHeight / 2;
  margin-bottom: @baseLineHeight / 2;
  .btn-group {
    display: inline-block;
    .ie7-inline-block();
  }
}

// Float them, remove border radius, then re-add to first and last elements
.btn-group .btn {
  position: relative;
  float: left;
  ;
  .border-radius(0);
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group .btn:first-child {
  margin-left: 0;
     -webkit-border-top-left-radius: 2px;
         -moz-border-radius-topleft: 2px;
             border-top-left-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
      -moz-border-radius-bottomleft: 2px;
          border-bottom-left-radius: 2px;
}
.btn-group .btn:last-child,
.btn-group .dropdown-toggle {
     -webkit-border-top-right-radius: 2px;
         -moz-border-radius-topright: 2px;
             border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
      -moz-border-radius-bottomright: 2px;
          border-bottom-right-radius: 2px;
}
// Reset corners for large buttons
.btn-group .btn.large:first-child {
  margin-left: 0;
     -webkit-border-top-left-radius: 2px;
         -moz-border-radius-topleft: 2px;
             border-top-left-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
      -moz-border-radius-bottomleft: 2px;
          border-bottom-left-radius: 2px;
}
.btn-group .btn.large:last-child,
.btn-group .large.dropdown-toggle {
     -webkit-border-top-right-radius: 2px;
         -moz-border-radius-topright: 2px;
             border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
      -moz-border-radius-bottomright: 2px;
          border-bottom-right-radius: 2px;
}

// On hover/focus/active, bring the proper btn to front
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active,
.btn-group .btn.active {
  z-index: 2;
}

// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}


// Split button dropdowns

// Give the line between buttons some depth
.btn-group .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
  
  *padding-top: 3px;
  *padding-bottom: 3px;
}
.btn-group .btn-mini.dropdown-toggle {
  padding-left: 5px;
  padding-right: 5px;
  *padding-top: 1px;
  *padding-bottom: 1px;
}
.btn-group .btn-small.dropdown-toggle {
  *padding-top: 4px;
  *padding-bottom: 4px;
}
.btn-group .btn-large.dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}

.btn-group.open {
  // IE7's z-index only goes to the nearest positioned ancestor, which would
  // make the menu appear below buttons that appeared later on the page
  *z-index: @zindexDropdown;

  // Reposition menu on open and round all corners
  .dropdown-menu {
    display: block;
    margin-top: 1px;
    .border-radius(5px);
  }

  .dropdown-toggle {
    background-image: none;
    @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
    .box-shadow(@shadow);
  }
}

// Reposition the caret
.btn .caret {
  margin-top: 7px;
  margin-left: 0;
}
.btn:hover .caret,
.open.btn-group .caret {
  .opacity(100);
}
// Carets in other button sizes
.btn-mini .caret {
  margin-top: 5px;
}
.btn-small .caret {
  margin-top: 6px;
}
.btn-large .caret {
  margin-top: 6px;
  border-left:  5px solid transparent;
  border-right: 5px solid transparent;
  border-top:   5px solid @black;
}


// Account for other colors
.btn-primary,
.btn-warning,
.btn-important,
.btn-info,
.btn-success,
.btn-inverse {
  .caret {
    border-top-color: white;
    border-bottom-color: white;
    .opacity(75);
  }
}


// Block button
// -------------------------

.btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  .box-sizing(border-box);
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
  margin-top: 5px;
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}

// Link buttons
// --------------------------------------------------

// Make a button look and behave like a link
.btn-link,
.btn-link:active,
.btn-link[disabled] {
  background-color: transparent;
  background-image: none;
  .box-shadow(none);
}
.btn-link {
  border-color: transparent;
  cursor: pointer;
  color: @linkColor;
  .border-radius(0);
}
.btn-link:hover,
.btn-link:focus {
  color: @linkColorHover;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
  color: @grayDark;
  text-decoration: none;
}

Share this post


Link to post
Share on other sites
Mark & Phil

The code shouldn't matter, what matters is that the DMS Editor is pulling from the same styles that the site references. So for instance, ya'll should make like a .btnpl for editor instead of you using .btn.

Share this post


Link to post
Share on other sites
Simon

Thats the core button code, used by all buttons. Why dont you just use css to change your button by namespacing the css?

 

You shouldnt have to copy the entire less file? thats serious overkill

Share this post


Link to post
Share on other sites
janpeeters

Without wanting to get into a how should do what discussion.

I've noticed two different commonly used WP event plugins influencing the DMS editor code. A user Event Manager stated that he thinks that plugins that customize buttons should make their code as specific to their plugins as possible to not influence css outside of their plugins boundaries. I know not enough about code if the problem in this thread is something that we will see happen a lot more over the next months and/or if it is possible to prepend the buttons in DMS with a piece of code that shields them from this happening.

Share this post


Link to post
Share on other sites
Andrew

hey there,

 

Ya i know this is an issue, the alternate solution would be using iFrames which would hurt the drag and drop experience a bit...

 

Post screenshots of the graphics leaks and we can clean this up, things are sort of case by case on this.

Share this post


Link to post
Share on other sites
Mark & Phil

Copying the less files is exactly what we were told best practices were by the major DMS tutorial resources out there:

http://pagelinesacademy.com

http://pagelinesdevcamp.com/

 

Overriding with CSS is our last resort. Why add more weight with more CSS when we can override the original LESS being written?

Share this post


Link to post
Share on other sites
janpeeters

Hi Andrew,

 

thanks for your response. My issues with Event Manager have somehow magically resolved. When I wanted to make some additional screenshots for your request i can't seem to find the change coloration. It's weird because it's still the same plugin. Anyhow. I'll research this more, maybe I've deactivated some plugin CSS.

Thanks anyway for clearing up that it's a known issue!

Share this post


Link to post
Share on other sites
Danny

Mark & Phil

 

Well you're free to copy the less directory and make what ever changes you like. However, if you want to customize the buttons, why not just add your own ?

 

I need to update this doc for the DMS documentation, but the same thing should work in DMS too.

 

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

×