Title: Multiple Image Styles Within One Theme? Last modified: August 18, 2016 --- # Multiple Image Styles Within One Theme? * Resolved [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/) * I have a blog design where we use 2 different image types – one with a white background, and one with a pink background (generated in photoshop, and not CSS). * We’re re-designing the theme, and thinking that there has to be an easier way to accomplish the same thing. Our question: Is it possible to have two images styles within one theme, so that we can select if the post is to use the style with the border, or without it? * Example post with NO border: [http://eyesoncreativity.com/?p=358](http://eyesoncreativity.com/?p=358) * Example post WITH border: [http://eyesoncreativity.com/?p=352](http://eyesoncreativity.com/?p=352) * Obviously the photoshop generated pixelized border is not ideal, and we’d love to have the option of doing both in CSS. Can anyone help? Thanks! Viewing 15 replies - 1 through 15 (of 15 total) * [rudolf45](https://wordpress.org/support/users/rudolf45/) * (@rudolf45) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539094) * Using classes for the images? * Thread Starter [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539097) * ``` #content p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; border-bottom: 1px solid #C0C0C0; } ``` * This is what I’m using for the images, right now (in the new theme). The border will ultimately go all the way around, but I just put the 1px at the bottom to test colors, etc. * [rudolf45](https://wordpress.org/support/users/rudolf45/) * (@rudolf45) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539102) * That’s not a class. [http://www.w3schools.com/css/css_syntax.asp](http://www.w3schools.com/css/css_syntax.asp) * So, the “classless” image would be without border – as defined above (less the boottom) and you’d have for example a “bordered” class in the CSS: * ``` .bordered { border: 3px solid #C0C0C0; } ``` * In the markup: `` * Thread Starter [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539147) * Thanks for your help thus far. Where would I add that ‘class’ ? I tried adding it underneath the existing img style, but when calling out the class in the markup, nothing happened. Here is my CSS, edited from an existing template: * [http://www.eyesoncreativity.com/downloads/style.zip](http://www.eyesoncreativity.com/downloads/style.zip) * Any help would be greatly appreciated. Here’s a rough prototype of the new theme for the site: * [http://www.findingthebull.com](http://www.findingthebull.com) * Thread Starter [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539162) * Please? Anyone? I will PayPal you money if you can help me. * Thread Starter [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539165) * Please, for the LOVE OF GOD, can anyone **PLEASE** help me? This should be a slam dunk, yet I’m hitting a wall. * [Pizdin Dim](https://wordpress.org/support/users/pizdin_dim/) * (@pizdin_dim) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539168) * > _“Please, for the LOVE OF GOD, can anyone PLEASE help me?”_ * I can’t help but to laugh but that’s just sounds so ridiculous. As you will, given enough time. * Read rudolf’s last post again, it’s self explanatory. The class declaration goes in your stylesheet and the markup just uses the declared class name. * And take the time to go to [w3shcool](http://www.w3schools.com/css/css_syntax.asp). * Thread Starter [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539169) * Thanks for the ‘insight’ but needless to say I’m struggling. I tried what Rudolf said, but to no avail. I have even included my style sheet for reference. Would you mind, please, pointing out where I have made my mistake? * I did, as he suggested, added the class. but when I call it out in the post window and save it – nothing happens. Clearly I have a conflicting style or poorly written one. But, where? * [Pizdin Dim](https://wordpress.org/support/users/pizdin_dim/) * (@pizdin_dim) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539170) * Your theme actually uses ‘
’ instead of ‘
’ for the main post content so change your stylesheet to say ‘#contentleft p img {‘ instead of ‘#content p img {‘ * As for your paypal offer, please donate the money to your favourite charity. * Thread Starter [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539187) * Thanks, but I’m not sure you scrolled up all the way. There is also the #content DIV. So there’s Content, and Content Left. I’ll gladly donate money to **YOUR** favorite charity (or anyone’s) if you can please help me. This is basically that last thing I need to do before launching this thing. Any help would be **greatly** appreciated. * [Pizdin Dim](https://wordpress.org/support/users/pizdin_dim/) * (@pizdin_dim) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539191) * Yes, I did scroll and understand the problem. The info I gave you was correct at the time and was based on the two pages you supplied. * However, you have bigger problems than just the image borders. Your theme’s doctype is “XHTML 1.0 Strict” but your output is quite broken. * [http://validator.w3.org/check?uri=http://eyesoncreativity.com/](http://validator.w3.org/check?uri=http://eyesoncreativity.com/) * I notice that one of the errors is to do with your images, so that explains why the tips won’t work. * But, you really need to fix all these errors before you push the “live” button. If you’re in a hurry and no other volunteers can assist with fixing your theme’s errors for free, try the (chargeable) “WP pros” mailing list: * [http://codex.wordpress.org/Mailing_Lists#Professional](http://codex.wordpress.org/Mailing_Lists#Professional) * Thread Starter [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539192) * Thank you **kindly** for your continued support. My fault if I didn’t explain the situation well above: The **NEW** theme is being mocked up here: * [http://www.findingthebull.com](http://www.findingthebull.com) * I realize the old theme is trash, and in need of some work… hence the urge to use the NEW theme. So the CSS dilemma above pertains to the NEW theme. * [Pizdin Dim](https://wordpress.org/support/users/pizdin_dim/) * (@pizdin_dim) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539194) * Ok, I see what you mean. You did say “here’s a rough prototype of the new theme for the site” but I managed to ignore that for some reason. * Modify your stylesheet to also include the following, before your “blockquote” declaration: * ``` #contentleft p img { float: left; border: none; margin-right: 15px; margin-bottom: 10px; } #contentleft p img.bordered { border: 3px solid fuchsia; } ``` * That will fix it. Obviously change the “fuchsia” colour to suit. You should also fix the [minor validation](http://validator.w3.org/check?uri=http://www.findingthebull.com/) errors. * Thread Starter [eyenovation](https://wordpress.org/support/users/eyenovation/) * (@eyenovation) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539195) * That worked. A **thousand** thank yous to you, good sir. I sincerely appreciate the time you took to help me out. * [Pizdin Dim](https://wordpress.org/support/users/pizdin_dim/) * (@pizdin_dim) * [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539197) * Madam, actually. I’m glad we finally got there. Please make your proposed donation to [Oxfam](http://www.oxfam.org.au/). Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Multiple Image Styles Within One Theme?’ is closed to new replies. ## Tags * [Borders](https://wordpress.org/support/topic-tag/borders/) * [multiple](https://wordpress.org/support/topic-tag/multiple/) * [Themes](https://wordpress.org/support/topic-tag/themes/) * 15 replies * 3 participants * Last reply from: [Pizdin Dim](https://wordpress.org/support/users/pizdin_dim/) * Last activity: [19 years, 1 month ago](https://wordpress.org/support/topic/multiple-image-styles-within-one-theme/#post-539197) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics