WordPress.org

Ready to get started?Download WordPress

Forums

Inheritance problem with plugin css (4 posts)

  1. selfcomposed
    Member
    Posted 5 years ago #

    I'm trying to get a Twitter plugin to work on my sidebar. The plugin works but the problem is the CSS. The link in each twitter post inherits the CSS from that of the rest of the sidebar. I can't seem to figure out what I need to do to force it to use something else.

    Here is what the CSS being inherited looks like:

    #sidebar li{
    	list-style: none;
    }
    #sidebar ul li a {
    	border-bottom: 1px dotted #666;
            color: #cc99ff;
    	display: block;
    	text-decoration: none !important;
    	margin-left: 0px;
    	padding: 4px 0px 4px 25px;
    	background-image: url('images/bull.gif');
    	background-repeat: no-repeat;
    	background-position: 10px 50%;
    	font-size: 13px;
    }
    #sidebar ul li a:hover{
    	color: #cc99ff;
    	background-color: #eeeeee;
    }

    That puts a dotted underline under each link with a arrow to the left and a grey highlight with mouseover. I like these effects for the rest of the stuff in my sidebar and don't want to change it.

    The problem with the twitter plugins is that the link is effected. Here is what the html looks like that is generated by the plugin:

    <div id="twitt"><ul>
      <li><span class="mytwitter_tweet" id="mytwitter_tweet-1">I have a headache <i><a href="http://example.com">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-1">&nbsp;--&nbsp;</span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-1">9 hours ago</span></li>
      <li><span class="mytwitter_tweet" id="mytwitter_tweet-2">Doing some blogging today <i><a href="http://tinyurl.com/example">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-2">&nbsp;--&nbsp;</span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-2">2 days ago</span></li>
      <li><span class="mytwitter_tweet" id="mytwitter_tweet-3">Just began my tumblr <i><a href="http://self-composed.tumblr.com/">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-3">&nbsp;--&nbsp;</span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-3">2 days ago</span></li>
      <li><span class="mytwitter_tweet" id="mytwitter_tweet-4">Were going to look at puzzles(?). <i><a href="http://tinyurl.com/example">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-4">&nbsp;--&nbsp;</span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-4">4 days ago</span></li>
    </ul></div>

    I've tried things like declaring border-bottom: none; for the class. I can add other borders to the top or sides, but I can't change the bottom one.

    I also want to the link to be inline with the rest of each tweet/post/li not on a seperate line.

    Also, with the plugin I'm currently using (MyTwitter) I can make the li and ul tags have anything in them I want or change them altogether to something else.

  2. Chrisber
    Member
    Posted 5 years ago #

    The plugin is creating a a new div with the id of "twitt". Reference that new div in your style sheet and it will be independent of anything else in the sidebar.

  3. selfcomposed
    Member
    Posted 5 years ago #

    That's what I would have thought too, but it doesn't work. It still inherits the #sidebar stuff.

    I put

    #twitt ul li a {
    border-bottom: 3px solid #ff0000;
    color: #00ff00;
    display: inline;
    background-image: none;
    font-size: 26px;
    }
    
    #twitt ul li a:hover {
    color: #0000ff;
    background-color: #660000;
    }

    in my style sheet and it ignores it. By the way, I don't really want all the things that code does, I'm just trying things to see what it ignores and what it doesn't.

  4. design_dolphin
    Member
    Posted 5 years ago #

    Is the #twit code below or above the #sidebar code? The #twit code needs to be below the #sidebar code in order to override.

    Is it in the same external stylesheet or two external stylesheets? (If yes check the load order)

    You could give "li.mytwitter_tweet a" a try. Of course substituting "a" for the correct hyperlink css.

    Otherwise use Fireburg in firefox. Makes it a lot easier to track it down and interact with the styling.

    Hope it helps

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags