overriding theme's css img command

  • Resolved saydaysago

    (@saydaysago)


    11 years, 5 months ago

    Hey all!

    I am running a theme on my site that has a css command in the stylesheet:

    img, img a {
    width: auto;
    height: auto;
    }

    that makes it so whatever I size my images as in my posts, they automatically resize to be as big as possible that my theme will accept. I’ve so far resorted to just deleting the aforementioned css code, but i have to redelete it every time i update the theme. is there anything I can add to my custom css that will cancel this out? I’ve used the trick of adding !important to some code before to override theme defaults, but i don’t want to set a specific width, I just want the width to be whatever I set it as in the post.

    thanks for any help!

Viewing 5 replies - 1 through 5 (of 5 total)

  • but i have to redelete it every time i update the theme.

    You should not update the theme files directly; as you’ve found out firsthand, your changes get lost when the theme gets updated. Instead, you should create a child theme. If you are only making CSS changes, you can use a CSS plugin like Lazyest Stylesheet or Custom CSS Manager instead.

    I’ve used the trick of adding !important to some code before to override theme defaults

    Don’t get in the habit of using !important, it is usually unnecessary and can cause you headaches in the future. Instead, learn how to create CSS selectors that have a higher specificity than the CSS that you’re trying to override. If you create a selector that’s identical to your parent theme’s CSS rule, as long as your rule comes after the parent theme’s CSS, then your rule will override that of the parent theme. That is, if you create a rule that looks like this in your child theme or in a CSS plugin:

    img, img a {
width: 70%;
}

    That width property of 70% will override the width property of auto in the parent theme because it will come after the parent theme’s rule.

    If you want to set the width and height of a specific image in a certain post, without changing them for all other images on the site, then it’s best just to do it as an inline style:

    <img src="mypicture.jpg" style="width:300px;height:150px;" />

    Inline styles have the highest specificity of all, and will override any externally defined styles, unless that external style has the !important qualifier. That’s one of the few situations in which you would use an !important qualifier in an external CSS file, to override inline CSS.

    Thread Starter saydaysago

    (@saydaysago)

    Thanks! I will use inline style in my posts from now on. works perfectly.

    I’ve manually altered my image size in the post html and nothing changes they just are as big as can be, annoying, what’s wrong? It’s the text widget code, no difference shown.

    @vanessajw – please start your own thread – this one is resolved and likely not the same question.

    And @vanessajw, please include the address of your site in your new thread, it will help a lot.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘overriding theme's css img command’ is closed to new replies.