homepage Welcome to WebmasterWorld Guest from 54.166.123.2
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved