19 {{ upvoteCount | shortNum }}
19 {{ upvoteCount | shortNum }}

Any ideas why my css keeps changing?

by BenQ
16 replies
Wordpress, Thesis theme.

I'm editing my layout.css to include an inline display for <h3>. It looks like this:
Code:
.format_text h2, .format_text h3 { font-size: 1em; line-height: 1.222em; display: inline; margin: 1.833em 0 0.611em 0; }
It works, but every once in a while when I'm editing a page or post, it will revert back to original -- which is the same as above without the "display: inline;".

I know <h3> is a block element, but I've never had any problem doing it like this before. Any ideas why it's changing on me?
#changing #css #ideas
  • Profile picture of the author Tim Brownlaw
    What do you do when, "it reverts back"?
    {{ DiscussionBoard.errors[3406814].message }}
  • Profile picture of the author BenQ
    When it reverts back, I just go back into my file manager and change and save it.

    Are you giving me a clue that I'm not picking up on?
    Signature
    {{ DiscussionBoard.errors[3407417].message }}
    • Profile picture of the author Tim Brownlaw
      Originally Posted by Benq View Post

      When it reverts back, I just go back into my file manager and change and save it.

      Are you giving me a clue that I'm not picking up on?
      Well I'm asking in a round about kind of way to see what falls out....

      So by Filemanager, you mean the filemanager under Cpanel and its through there that you see the file having been changed and you put it back, save it and the page appears as you expect it to.

      And it appears to change ( revert back ) , when you create or edit a post through your WP admin.

      Ok, what plugins are you running. Sounds like something is detecting the change and reverting it back... [ just talking aloud here...] So do you have a plugin that can do that or is meant to revert changes it detects?

      At the moment I can't setup the theme to check what it might be doing...

      What happens if you change in from within Wordpress - Appearance -> Editor , click on the css file and edit it there?

      Does that give us an "AHA" moment?
      {{ DiscussionBoard.errors[3407757].message }}
      • Profile picture of the author Evan-M
        Originally Posted by Tim Brownlaw View Post

        Well I'm asking in a round about kind of way to see what falls out....

        So by Filemanager, you mean the filemanager under Cpanel and its through there that you see the file having been changed and you put it back, save it and the page appears as you expect it to.

        And it appears to change ( revert back ) , when you create or edit a post through your WP admin.

        Ok, what plugins are you running. Sounds like something is detecting the change and reverting it back... [ just talking aloud here...] So do you have a plugin that can do that or is meant to revert changes it detects?

        At the moment I can't setup the theme to check what it might be doing...

        What happens if you change in from within Wordpress - Appearance -> Editor , click on the css file and edit it there?

        Does that give us an "AHA" moment?
        I was thinking the same thing, either a plugin that reverts changes, or one that writes to the css file. Can't think of anything else off had that would cause this
        Signature

        Evan-M

        Easily The Worlds Best Wordpress Popup plugin

        Visit Website Design Firm For All Your Wordpress Coding Needs

        {{ DiscussionBoard.errors[3409601].message }}
  • Profile picture of the author BenQ
    Tim, that's exactly how I'm doing it. Actually it's just reverting by itself. I went to bed last night, and all looked good. When I checked the site this morning, it had reverted back. The layout.css does not show up in appearance editor. I edit it through cpanel as you surmized. It must be a plugin, but I use these same plugins on other sites with this same configuration. I'll have to deactivate one by one and see if I can locate the culprit.
    Signature
    {{ DiscussionBoard.errors[3409927].message }}
  • Profile picture of the author carrot
    Doesnt thesis have a whole bunch of built in theme options to alter the layout? If so it probably writes the css files based on these settings, so the theme its self is overwriting your edits.

    Why would you try and set a heading tag as an inline item btw?
    {{ DiscussionBoard.errors[3410467].message }}
  • Profile picture of the author CarloD.
    It's possible that the editor is editing/changing it on save if there is a type of "cleaner" in place. This would definitely cause the issue especially when dealing with inline style... which you should just create a class in your css file and add the class to the heading tag.

    If the class gets wiped out, then there is something defaulting the styles within the theme.
    Signature

    {{ DiscussionBoard.errors[3410603].message }}
  • Profile picture of the author BenQ
    I think I have it now. This is a new site, and it's possible Thesis was overwriting my css as I added in the options. But as a last step, I stripped the css clean, minified it and added to my .htaccess with a long-term expiration. We'll see if it holds.
    Signature
    {{ DiscussionBoard.errors[3410675].message }}
    • Profile picture of the author SteveJohnson
      Originally Posted by Benq View Post

      I think I have it now. This is a new site, and it's possible Thesis was overwriting my css as I added in the options. But as a last step, I stripped the css clean, minified it and added to my .htaccess with a long-term expiration. We'll see if it holds.
      You would have been far better off to make your changes in the custom.css file, as the Thesis instructions suggest that you do. The custom files aren't written over at any time, and your modifications will stay when you upgrade - or make changes in the theme options panels.
      Signature

      The 2nd Amendment, 1789 - The Original Homeland Security.

      Gun control means never having to say, "I missed you."

      {{ DiscussionBoard.errors[3410780].message }}
  • Profile picture of the author BenQ
    Steve, I haven't see that in the instructions, but I'll look it up. Under what heading is it? What would that css entry look like -- can you post it here please? Would it be:

    Code:
    .custom h3 {
   display: inline;
}
    Signature
    {{ DiscussionBoard.errors[3410843].message }}
  • Profile picture of the author SteveJohnson
    That's what it would look like - but you may have to experiment with adding selectors to add to the specificity of the rule:

    .custom .format_text h3 { display: inline; }

    although in most cases, the .custom selector should do enough to override the 'stock' styles.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[3410969].message }}
  • Profile picture of the author BenQ
    Still can't get it.

    .custom .format_text h3 { display: inline; } doesn't seem to have any effect in the custom.css.
    Signature
    {{ DiscussionBoard.errors[3418730].message }}
  • Profile picture of the author SteveJohnson
    [EDIT] first things first...make sure you have the option turned on to use a custom stylesheet. I believe its in the Thesis Site Options page. [/EDIT]

    If you want to PM me the URL, I'll take a look at it.

    Here's the thing - CSS can be tricky. You have to deal with the cascade (inheritance), and also deal with specificity of your css rules. For instance, id selectors carry more weight than class selectors.

    If you have the following markup:
    <h3 id='blue' class='red'>this is a headline</h3>

    and in your stylesheet:
    h3#blue { color: blue; }
    h3.red { color: red; }

    your headline will be blue because an id (#) is more important than a class (.).

    I highly recommend that you use the Firebug extension for Firefox when you're troubleshooting css issues - the html pane shows the rules that apply to any selector, including overridden rules.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[3420234].message }}
  • Profile picture of the author mahesh2010
    Hi,
    have tried giving !important to that css which you want it to edit
    where you have seen your out put ?? does the css changes inside your layout.css or in fire bug how does it reflect?? is there is any jquery or Dom script utilizing the class??
    please post link to verify it
    Signature
    Mobile Website Design
    {{ DiscussionBoard.errors[3420684].message }}
  • Profile picture of the author herry
    To try out Backfire in Quplo, here's what you do:
    1. Create a new prototype or pick an existing one
    2. Head to the "work on" page
    3. Click on "goodies" on the right
    4. Copy/paste the code for Backfire on this page into the head section of your prototype
    5. Click "view" and you should see the Backfire bar at the bottom of your screen.
    6. Change some stuff with Firebug or Webkit inspector, and hit "Save CSS changes"!
    {{ DiscussionBoard.errors[3420740].message }}
  • Profile picture of the author BenQ
    yes, I do use custom stylesheet. And I do have firebug for FF. I'll be working on it again today. Thanks for the advice guys.
    Signature
    {{ DiscussionBoard.errors[3421870].message }}

Trending Topics