Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] CSS Not Responding To Edits

  • Avatar of Ben
    Ben
    Participant

    @communicatorsinaction

    9 months, 1 week ago

    Greetings,

    I am currently working to manually integrate BuddyPress into a theme. At the moment, I am attempting to fix the friendship/liked activity notices, which currently look like this:

    http://community.communicatorsinaction.com/files/2012/08/broken_friendship_mini_buddyPress_8-15-2012.png

    For my bbPress integration I simply found the nested classes and IDs and then just told the avatars to `display:inline-block;`, which worked perfectly. However, my BuddyPress edits in general seem not to be cooporating. I took `bp.css` from the BP Template Pack, pasted it at the bottom of my themes `style.css`, deactivated the CSS in the BP Template settings, and went to work. Some edits behaved just as expected (like Private Messages or the list tabs navigation) but others (such as info/error messages and some activity types) are not behaving at all. Just as a test, I tried to enlarge the font size of the activity type in the picture above, and it did not budge (yes, I cleared my cookies and tested in other browsers).

    To change the font size I attempted to edit the `font-size` of `.activity-list li.mini`. And to display the avatars inline I am attempting to edit `.activity-list li.mini a img` (and have attempted many variations). I have also tried adding `!important` to the end of the edits, but still had no effect on my CSS.

    Is there something I’m doing wrong? Firebug tells me that these are the correct classes, but is something overriding my edits somehow? Should I enable the BP Template CSS and edit the files there (the reason I turned it off is because I did not want my edits to disappear upon plugin update).

    Any help would be greatly appreciated here.

    Thanks!
    Ben

Viewing 3 replies - 1 through 3 (of 3 total)
  • Avatar of frank thirteen
    frank thirteen
    Member

    @frank13

    9 months, 1 week ago

    Hey @Ben,

    If you have never tried or seen this trick in Firefox — hit CTRL+SHIFT+i

    You’ll go into inspect mode and there you can hover over block elements on the page and see the exact ID’s and Classes for your styles.

    You can then use your theme’d style sheet to control styles by tagging “!important” (which you seem to be doing). It just might be that you are not capturing the right ID’s and Classes.

    Avatar of Ben
    Ben
    Participant

    @communicatorsinaction

    9 months, 1 week ago

    @frank13 thanks for the suggestion, the FireFox inspection tool is similar to one in Firebug but does help, thank you. As a result of using the inspect tool I added/edited the following classes as such:

    li.friends.friendship_created.activity-item.mini a img {
    display:inline-block !important;
    }
    li.friends.friendship_created.activity-item.mini div.activity-content div.activity-header p a img {
    display:inline-block !important;
    }

    Unfortunately, this does not seem to have solved my problem.

    Avatar of Ben
    Ben
    Participant

    @communicatorsinaction

    9 months, 1 week ago

    Ah-ha! I just needed to fiddle with my classes some more.

    li.activity-item.mini div.activity-content img.avatar {
    display:inline-block !important;
    vertical-align:top;
    }
    li.activity-item.mini div.activity-avatar img.avatar {
    display:inline-block !important;
    margin-top:10px;
    margin-left:42px !important;
    margin-right:-5px !important;
    }

    Thanks @frank13!

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Topic Info

Topic Tags