Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter cronk005

    (@cronk005)

    OK, I have solved most of my initial issues and have it somewhat more “presentable”. There is one thing that I really would like to figure out and that is how I can get the twitter graphic to be next to my twitter handle. Currently I have the following as my “twitter-widget” code:

    .widget_twitter div {
        padding:0;
        width:280px;
    }
    .widget_twitter a {
        text-decoration:none;
        color:#333333;
        margin: 0 10px 10px 0;
    	}
    }
    .widget_twitter a:visited {
        text-decoration:underline;
        color:#FF00FF;
    }
    .widget_twitter a:hover {
        text-decoration:underline;
        color:#0000CC;
    }
    
    .widget_twitter ul {
        margin-left:
        margin-bottom:5px;
        clear:both;
    }
    .widget_twitter li .clear {
        clear:both;
    }
    .widget_twitter .follow-button,
    .widget_twitter .xavisys-link {
        margin:0 10px 10px 25px;
    }
    .widget_twitter .entry-content {
       width:280px;
       margin-top:10px;
    
       }
    .widget_twitter .entry-meta {
        display:block;
        font-size:80%;
        margin-bottom: 10px;
    }
    .widget_twitter .intent-meta a {
        background-image: url('images/everything-spritev2.png'); /** from Twitter resources */
        display: inline-block;
        text-indent: -9999px;
        margin: 0 10px 10px 0;
        height: 16px;
        width: 16px;
    }
    .widget_twitter .in-reply-to-meta {
        margin: 0 10px 10px 0;
    }
    .widget_twitter .intent-meta a.in-reply-to {
        background-position: 0 center;
    }
    .widget_twitter .intent-meta a:hover.in-reply-to {
        background-position: -16px center;
    }
    .widget_twitter .intent-meta a.favorite {
        background-position: -32px center;
    }
    .widget_twitter .intent-meta a:hover.favorite {
        background-position: -48px center;
    }
    .widget_twitter .intent-meta a.retweet {
        background-position: -80px center;
    }
    .widget_twitter .intent-meta a:hover.retweet {
        background-position: -96px center;
    }

    and this is the area that I made changes to my widget template:

    $widgetContent .= '<ul>';
    		if ( ! is_array( $tweets ) || count( $tweets ) == 0 ) {
    			$widgetContent .= '<li class="wpTwitterWidgetEmpty">' . __( 'No Tweets Available', $this->_slug ) . '</li>';
    		} else {
    			$count = 0;
    			foreach ( $tweets as $tweet ) {
    				// Set our "ago" string which converts the date to "# ___(s) ago"
    				$tweet->ago = $this->_timeSince( strtotime( $tweet->created_at ), $args['showts'], $args['dateFormat'] );
    				$entryContent = apply_filters( 'widget_twitter_content', $tweet->text, $tweet );
                    $widgetContent .= "<span class='entry-content'><img src='https://globe-trekking.com/running/wp-content/themes/newscast/images/bird_blue_16.png'><a href='https://twitter.com/{$args['username']}'>@{$args['username']}</a>  <br/>{$entryContent}</span>";
    				$widgetContent .= " <span class='entry-meta'>";
    				$widgetContent .= "<span class='time-meta'>";
    				$linkAttrs = array(
    					'href'	=> "https://twitter.com/{$tweet->user->screen_name}/statuses/{$tweet->id_str}"
    				);
    				$widgetContent .= $this->_buildLink( $tweet->ago, $linkAttrs );
    				$widgetContent .= '</span>';
    
    				if ( 'true' != $args['hidefrom'] ) {
    					$from = sprintf( __( 'from %s', $this->_slug ), str_replace( '&', '&', $tweet->source ) );
    					$widgetContent .= " <span class='from-meta'>{$from}</span>";
    				}
    				if ( !empty( $tweet->in_reply_to_screen_name ) ) {
    					$rtLinkText = sprintf( __( 'in reply to %s', $this->_slug ), $tweet->in_reply_to_screen_name );
    					$widgetContent .=  ' <span class="in-reply-to-meta">';
    					$linkAttrs = array(
    						'href'	=> "https://twitter.com/{$tweet->in_reply_to_screen_name}/statuses/{$tweet->in_reply_to_status_id_str}",
    						'class'	=> 'reply-to'
    					);
    					$widgetContent .= $this->_buildLink( $rtLinkText, $linkAttrs );
    					$widgetContent .= '</span>';
    				}
     				$widgetContent .= '</span>';
    
    				if ( 'true' == $args['showintents'] ) {
    					$widgetContent .= ' <span class="intent-meta">';
    					$lang = $this->_getTwitterLang();
    					if ( !empty( $lang ) )
    						$linkAttrs['data-lang'] = $lang;
    
    					$linkText = __( 'Reply', $this->_slug );
    					$linkAttrs['href'] = "https://twitter.com/intent/tweet?in_reply_to={$tweet->id_str}";
    					$linkAttrs['class'] = 'in-reply-to';
    					$linkAttrs['title'] = $linkText;
    					$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
    
    					$linkText = __( 'Retweet', $this->_slug );
    					$linkAttrs['href'] = "https://twitter.com/intent/retweet?tweet_id={$tweet->id_str}";
    					$linkAttrs['class'] = 'retweet';
    					$linkAttrs['title'] = $linkText;
    					$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
    
    					$linkText = __( 'Favorite', $this->_slug );
    					$linkAttrs['href'] = "https://twitter.com/intent/favorite?tweet_id={$tweet->id_str}";
    					$linkAttrs['class'] = 'favorite';
    					$linkAttrs['title'] = $linkText;
    					$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
    					$widgetContent .= '</span>';
    				}
    				/*$widgetContent .= '</li>';*/
    
    				if ( ++$count >= $args['items'] )
    					break;
    			}
    		}
    
    		$widgetContent .= '</ul>';

    Thread Starter cronk005

    (@cronk005)

    this is what i’m going for.

    https://globe-trekking.com/twitter_ideal.jpg

    I’ve something to ask you…
    did you created a css file right?
    you put it in the same directory of the plugin, or somewhere else… right?
    how you force the widget to import the css file?
    Thanks in advance

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS & styling issues’ is closed to new replies.