WordPress.org

Ready to get started?Download WordPress

Forums

How to Make Single Widget CSS Override Template CSS (10 posts)

  1. JSDavis82
    Member
    Posted 6 years ago #

    i'm trying to use alex king's twitter tools in my sidebar, but my themes sidebar.php is causing the links to break to a new line from the rest of the tweet text.

    the div class after the h4 of my sidebar headings is: .navigate and my .navigate code is:

    /* Side Navigation */
    
    .navigate {
    	padding: 10px 0 30px 35px;
    	font-size: 10px;
    	font-family: arial, sans-serif;
    	}
    
    .navigate ul {
    	list-style-type: none;
    	font-size: 11px;
    	padding: 0;
    	margin: 0;
    	}
    
    .navigate li a {
    	background: url("images/arw.gif") no-repeat top left;
    	text-decoration: none;
    	display: block;
    	color: #7F8062;
    	border-bottom: #1F270B 1px solid;
    	padding: 4px 0 4px 21px;
    	margin: 0;
    	}

    I tried writing a new style into the plugin file, but that div class get's wrapped in the .navigate div. How can I fix this? thanks so much.

    check out my site to see how the .navigate styles my sidebar links:my blog. *note that i have the twitter tools plugin disabled due to it's lack of formatting.

  2. Adam Brown
    Member
    Posted 6 years ago #

    url?

  3. JSDavis82
    Member
    Posted 6 years ago #

    crap, did i break this post by trying to link my url? where'd my original issue go?

  4. Adam Brown
    Member
    Posted 6 years ago #

    Whoa, my post used to be the 2d here, not the first.

    No idea what just happened.

  5. JSDavis82
    Member
    Posted 6 years ago #

    adam, here was my url and the code i mentioned:

    http://jeffrey-davis.net/blog/

    /* Side Navigation */
    
    .navigate {
    	padding: 10px 0 30px 35px;
    	font-size: 10px;
    	font-family: arial, sans-serif;
    	}
    
    .navigate ul {
    	list-style-type: none;
    	font-size: 11px;
    	padding: 0;
    	margin: 0;
    	}
    
    .navigate li a {
    	background: url("images/arw.gif") no-repeat top left;
    	text-decoration: none;
    	display: block;
    	color: #7F8062;
    	border-bottom: #1F270B 1px solid;
    	padding: 4px 0 4px 21px;
    	margin: 0;
    	}
  6. Adam Brown
    Member
    Posted 6 years ago #

    You'll have to remind me what you were trying to fix. I seem to remember that it sounded like something quick, but I don't see anything obviously broken on your site.

  7. JSDavis82
    Member
    Posted 6 years ago #

    i am trying to use alex king's twitter tools to parse my tweets into my sidebar, but when i do, any url's in my tweets and the links to "more updates" break to a different line as is the style of the rest of the links on my sidebar.

    i tried to fix that by editing the plugin file with different ul, li, and a class, but when viewing my site's page source, that class was still wrapped in the .navigate class that i showed above.

    any ideas how to make the links in that one widget appear as regular content links instead of the style of the other links on my sidebar?

  8. Adam Brown
    Member
    Posted 6 years ago #

    Maybe it's because I'm on FireFox, but I don't see any broken links (edit: links with a line break), nor do I see "more updates" anywhere on the page...

    But I'll give you an answer in general terms, then I'm going out for a burger, so I hope somebody else resumes this if you still have a question.

    If I hear you right, after editing the plugin file, you've got something like this:

    <div class="navigate"><div class="someOtherClass">...

    right? Then override the .navigate settings with something like this:

    .navigate .someOtherClass li a{display:inline;}

    and you should fix it.

  9. JSDavis82
    Member
    Posted 6 years ago #

    adam, thanks for the suggestion. what you proposed didn't seem to work, but then again it was problem incorrect implmentation on my part, here's what i did:

    in the twitter tools plugin file i put:

    .twitter_tools li a {
            text-decoration: none;
    	color: #7F8062;
    }
    .navigate .twitter_tools li a {
            display:inline;
    }

    and i am unsure of what else to do. do i wrap an area in a div class or do i assign a li class?

    here's the part that will need the markup:

    function aktt_sidebar_tweets() {
    	global $wpdb, $aktt;
    	$tweets = $wpdb->get_results("
    		SELECT *
    		FROM $wpdb->aktt
    		GROUP BY tw_id
    		ORDER BY tw_created_at DESC
    		LIMIT $aktt->sidebar_tweet_count
    	");
    	$output = '<div class="aktt_tweets">'."\n"
    		.'	<ul>'."\n";
    	if (count($tweets) > 0) {
    		foreach ($tweets as $tweet) {
    			$output .= '		<li>'.aktt_make_clickable(wp_specialchars($tweet->tw_text)).' <a href="http://twitter.com/'.$aktt->twitter_username.'/statuses/'.$tweet->tw_id.'">'.aktt_relativeTime($tweet->tw_created_at, 3).'</a></li>'."\n";
    		}
    	}
    	else {
    		$output .= '		<li>'.__('No tweets available at the moment.', 'twitter-tools').'</li>'."\n";
    	}
    	$output .= '		<li class="aktt_more_updates"><a href="http://twitter.com/'.$aktt->twitter_username.'">More updates...</a></li>'."\n"
    		.'</ul>';
    	if ($aktt->tweet_from_sidebar == '1') {
    		$output .= aktt_tweet_form('input', 'onsubmit="akttPostTweet(); return false;"');
    		$output .= '	<p id="aktt_tweet_posted_msg">'.__('Posting tweet...', 'twitter-tools').'
    ';
    	}
    	if ($aktt->give_tt_credit == '1') {
    		$output .= '<p class="aktt_credit">Powered by <a href="http://alexking.org/projects/wordpress">Twitter Tools</a>.
    ';
    	}
    	$output .= '</div>';
    	print($output);
    }

    thanks for your help...hope the burger was tasty ;-)

  10. JSDavis82
    Member
    Posted 6 years ago #

    oh, and i left the widget activated on my sidebar for you to view now. jeffrey-davis.net/blog/

Topic Closed

This topic has been closed to new replies.

About this Topic