Jump to content


Welcome to the forum:

Welcome to the iThemes, PluginBuddy and WebDesign.com forum. We've created several tutorial video's to help you get you started with using the forum, please check them out!

Also take note of the forum guidelines.


Support hours:

Our moderators actively respond to forum support requests during normal business hours which are Monday-Friday, 8am - 5pm Central Standard Time, typically within one business day. Although some moderators choose to work during the weekends, we can not guarantee immediate attention to your requests. Thanks for understanding.

What is included with support:

Premium support includes theme/plugin issues such as: bugs encountered under normal operation, how to use basic features, basic WordPress help, and basic help with customization (meaning we point you to resources and will help in more depth as time allows). More information.

How to target and style specific images within a tabber?


This topic has been archived. This means that you cannot reply to this topic.
6 replies to this topic

#1 andreakropp

andreakropp

    Advanced Member

  • Members
  • Others: Toolkit
  • PipPipPip
  • 157 posts

Posted 04 May 2010 - 07:24 PM

Hello-

In order to get background images and Dynamic Content Gallery images centered properly within tabs, I've had to use the following bit of CSS:

.builder-module-sidebar .widget img {
padding: 0;
margin: 0;

Unfortunately, this solution is really too broad for my purposes and now creates other image spacing issues within other widgets that I've addressed like this:

/* To fix image spacing in image widget--create space between image and text to the right*/
img.alignleft {
padding: 0 !important;
margin-right: 10px !important;
}

I'm pretty sure this is not the preferred way to handle these fixes and I've generally been able to do much better with the IDs attached to individual builder modules. Any idea how I can target specific images within specific tabs in the tabber widget? I've tried Firebug, but can't seem to find IDs.

The site is http://www.practicelight.com

All suggestions greatfully received.

Andrea and Karl

#2 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 05 May 2010 - 06:16 AM

Is this your question?

How do I target the image of the man standing with his arms folded in 'Welcome' tab?

#3 andreakropp

andreakropp

    Advanced Member

  • Members
  • Others: Toolkit
  • PipPipPip
  • 157 posts

Posted 05 May 2010 - 09:20 AM

Hi Sridhar-

Yes--targeting that image or any other placed into a tabber. The second bit of code was directed at that image. We had the same challenge with the images in DCG--wanted to target them specifically but ended up with the workaround above.

Thanks!

Andrea and Karl

#4 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 05 May 2010 - 08:38 PM

Here you go:

#builder-module-4bd7131d1766e .builder-module-sidebar .widget-wrapper-top #tabber_widget-4 #widget_sp_image-2 img {
 
}

Firebug FTW!

Would you like a video tutorial on how to arrive at the above?

#5 andreakropp

andreakropp

    Advanced Member

  • Members
  • Others: Toolkit
  • PipPipPip
  • 157 posts

Posted 05 May 2010 - 09:46 PM

Thank you Sridhar! I'd certainly like to see a video like that. Most of what I know about CSS I know because of you and the iThemes team (as well as some quality time with w3schools.com). In this case, I was able to identify #tabber_widget-4 and #widget_sp_image-2 img with Firebug, but simply couldn't work backward from there successfully. Looks like I could use a 201 or 301 level course...

Thanks again!

Best,

Andrea and Karl

#6 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 06 May 2010 - 12:58 AM

I actually started making the video and at half way point realized
that we can just use the following instead of the earlier CSS code:

#widget_sp_image-2 img {
 
}
When
we inspect using Firebug, you can see that the img element is
contained inside a div that has an ID of "widget_sp_image-2".
Since this ID is auto-generated by Builder and since we know that IDs
are unique, it is assured that no other div on the web page will have
the same ID.

Hence there is no need to be more specific than the
CSS code in this post. i.e, we don't need to add the complete path to
arrive at the div.

Hope this is clear.

#7 andreakropp

andreakropp

    Advanced Member

  • Members
  • Others: Toolkit
  • PipPipPip
  • 157 posts

Posted 06 May 2010 - 11:28 PM

Thank you Sridhar--makes perfect sense. Played around with it for a while today and was able to get at other image-widget images in much the same way. We're making progress...

Best,

Andrea and Karl