Skip to:
Content
Pages
Categories
Search
Top
Bottom

Widget CSS alteration

  • @reprocessor

    Participant

    Howdy folks,

    Have a look @ http://gigbuddy.org

    Basically what I need to do is indent the contents of a widget by 3px. Is this possible without throwing the whole thing out? (I have fix width widget headers y’see)

    Cheers,

    Phil

Viewing 5 replies - 1 through 5 (of 5 total)
  • @reprocessor

    Participant

    Sorry for bumping this chaps but I was wondering if anyone could help.

    @burtadsit

    Participant

    http://www.cssbasics.com/chapter_7_css_margins.html

    http://www.cssbasics.com/chapter_8_css_padding.html

    Margin or padding the left edge of the containing div for whatever widget you are interested in is the way to go probably. First install firebug to figure out what to alter and what the current settings are: http://getfirebug.com/

    That will tell you what you need to change and even allow you to interactively change css to try before you buy. You need to override the css in your theme\\\’s site-wide.css file. Create one in your theme\\\’s /theme/css directory. Create the \\\’css\\\’ directory if it doesn\\\’t exist.

    Example: move the site wide activity widget 3px to the right in the bp home theme if it\\\’s activated in the left-column.

    1) Create: /wp-content/themes/buddypress-home/css/site-wide.css

    2) Firebug says that the containing div is: \\\’buddypress-activity\\\’ and has the classes: \\\’widget\\\’ and \\\’bp_activity_widget_sitewide_activity\\\’

    3) In site-wide.css we override the default setting for class bp_activity_widget_sitewide_activity which is specific to this widget and firebug tells me that nothing is modifying this class yet. So we do:

    .bp_activity_widget_sitewide_activity{

    margin-left: 3px;

    }

    I should stick to programming. I really suck at css so that may cause your server to have a meltdown and your children to talk back to you. :)

    @reprocessor

    Participant

    Hi Burt,

    I’ve been using firebug for a while and i’m ok (kinda) with css, firebug seems to represent the css well but not 100% perfectly. The problem seems to be with the li tags on that particular div, anything I do either throws the padding out for the widget header or seems to have no affect at all :(

    Cheers for the tips tho – i’ll give the site-wide.css thing a try shortly and will let u know how I get on with it.

    Thanks for taking the time to answer this so thorougly. BTW my daughter is nearly 2 and started talking back to me well before I embarked on this buddypress project lol :)

    Thanks once again,

    Phil

    @burtadsit

    Participant

    Howdy again. I dislike playing with css because I just don\\\’t understand it that well. I usually play for hours trying to get *one* thing done and most of the time stumble on the solution. css items inherit attributes from this and that object and get overridden two blocks away by something I didn\\\’t even know existed.

    There\\\’s more than one way to get to where I\\\’m going and the css I\\\’m looking at is doing things in some manner I\\\’m not familiar with. It\\\’s a black art as far as I\\\’m concerned and this humble programmer just ain\’t no artist.

    @reprocessor

    Participant

    Hi Burt,

    Got it fixed ;) I just wrote an over-riding style for the li & p tags on .widget and that fixed it. I should have done that earlier but couldn’t see the wood for the trees!

    Cheers for your help!

    Phil

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Widget CSS alteration’ is closed to new replies.
Skip to toolbar