| Inline style override help needed
need to make image smaller than wp plugin dictates |
ericjt
msg:4546463 | 3:14 pm on Feb 18, 2013 (gmt 0) |
I hope you can help with this. There are several layers of divs, classes, etc here and I'm not getting anywhere.
I am trying to overide the size limit in the code below to make the image smaller. It's set as it is by a wordpress plugin and I can't change the size for this page without changing it on another that I need to stay as the plugin dictates. I want it 150 px here and the default 200px there.
The page code looks like this:
<div id="wpbdp-view-listings-page" class="wpbdp-view-listings-page wpbdp-page">
<div class="wpbdp-page-content">
<div class="listings">
<div id="wpbdp-listing-17" class="wpbdp-listing excerpt wpbdp-listing-excerpt normal even cf">
<div class="listing-thumbnail"><a href="http://websitenamehere.com/testcart/calendar-of-events/17/dancealot/"><img class="wpbdmthumbs" src="http://websitenamehere.com/testcart/wp-content/uploads/2013/02/ericmoschnau-sepia-200x159.jpg" style="max-width: 200px;" alt="Dancealot" title="Dancealot" border="0" /></a></div>
I need to make the image 150px max width, but also have a max height of 150. The override cannot be specific to div id wpbdp-listing-17 as there are other listings with different div id numbers that will have the same style to overide.
I tried the following but it didn't work:
#wpbdp-view-listings-page .wpbdp-view-listings-page wpbdp-page .wpbdp-page-content .listings .listing-thumbnail img [style] { max-width: 150px !important; }
Or what? Of course, needs to work in all browsers...
(DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN")
Thank you for your efforts with this.
|
Fotiman
msg:4546475 | 4:05 pm on Feb 18, 2013 (gmt 0) |
The only way to override the inline style would be to use !important in your stylesheet.
I tried the following but it didn't work:
#wpbdp-view-listings-page .wpbdp-view-listings-page wpbdp-page .wpbdp-page-content .listings .listing-thumbnail img [style] { max-width: 150px !important; }
|
|
You're specifying an id of wpbdp-view-listings-page that CONTAINS a class .wpbdp-view-listings-page, which in turn CONTAINS a class* wpbdp-page, but that is not how your code is structured.
* Note, you were also missing the . before wpbdp-page.
Also, unless you NEED to be for some reason, avoid overly specific selectors, as it will affect performance.
Try this:
#wpbdp-view-listings-page .listing-thumbnail img[style] {
max-width: 150px !important;
max-height: 150px !important;
}
|
|
|
ericjt
msg:4546480 | 4:18 pm on Feb 18, 2013 (gmt 0) |
You are a god! Thanks so much. It works perfectly. I was confused by so many selectors.
|
ericjt
msg:4546481 | 4:19 pm on Feb 18, 2013 (gmt 0) |
Issue resolved by another forum. Thanks for looking.
|
ericjt
msg:4546525 | 5:52 pm on Feb 18, 2013 (gmt 0) |
Oops, that was meant for a different forum. You solved it first. Excellent.
|
|
|
