Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

How to make admin css match front-end

edited February 2013 in Design

What's the best way to make it so that the css in the editor matches the css on the front end? I edited css/style.css, but now the view in the admin side doesn't match the actual site. Example: front end: http://postimage.org/image/3tbfyv5lh/ ; back end: http://postimage.org/image/r8td47pcl/

Comments

  • Can you post the HTML from the wysiwyg editor?

    In the current editor, the CSS used in the editor is in css/wysiwyg/default.css but once that's replaced with Redactor, it'll be a combination of apps/admin/js/redactor/redactor.css and apps/admin/js/redactor/custom.css.

  • Can you post the HTML from the wysiwyg editor?

    <div id="our-team">
        <p><img>text</p>
        <p><img>text</p>
        <p><img>text</p>
        <p><img>text</p>
    </div>
    

    Then in the css:

    div#our-team p {
      clear: left;
    }
    
    div#our-team p img {
      border: 2px solid #ccc;
      box-shadow: 5px 5px 5px #888888;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    
  • It looks like you'd need to add div#our-team p { clear: left; } to css/wysiwyg/default.css, or you could enter a few empty paragraphs to force the images to appear one after another, like this:

    http://imgur.com/LJhtVZa

  • I added it and it works, thanks.

    I was wondering if there was some way both the front end and the back end could include the same css file so I wouldn't have to remember to do any updates twice.

  • To save having to make updates twice, I made a file with my tweaks and am using @import url(/css/tweaks.css); in both /css/style.css and /css/wysiwyg/default.css

  • Assetic doesn't pull in the @imported file. Not sure if that's an assetic issue or a yuicompressor one.

  • Looks like YUI Compressor is being deprecated in favour of UglifyJS and CSSMin. I've marked it in my to-do list to update the app:

    https://github.com/jbroadway/assetic/issues/2

    Although I'm not sure yet whether CSSMin supports @import either.

  • Having some trouble with this using Redactor. I have the content of the page wrapped in <div id="our-team">, but that's getting stripped.

  • I think this relates to Redactor's convertDivs setting, which converts divs into <p> tags in the editor. There were other issues with this setting already mentioned on here, so I think turning that off may be the best solution.

    I see that there's also a Redactor update just released today, so I'll change that setting and do the upgrade at the same time.

  • Just pushed the fix for this :)

  • Thanks!

Sign In or Register to comment.