CSS & styling issues
-
Hi There. I am very new to wordpress and am not sure what to do in this case.
I installed and activated the plugin, but it seems to be interfering with my site’s CSS and so the Twitter Widget Data is not very appealing.
I am hoping maybe someone can help me with styling it so that it would be more readable ie: Plugin Example
my site is http://globe-trekking.com/running
Any assistance, guidance, etc would be most greatly appreciated.
Regards,
Daniël
-
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='http://globe-trekking.com/running/wp-content/themes/newscast/images/bird_blue_16.png'><a href='http://twitter.com/{$args['username']}'>@{$args['username']}</a> <br/>{$entryContent}</span>"; $widgetContent .= " <span class='entry-meta'>"; $widgetContent .= "<span class='time-meta'>"; $linkAttrs = array( 'href' => "http://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' => "http://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'] = "http://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'] = "http://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'] = "http://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>';this is what i’m going for.
http://globe-trekking.com/twitter_ideal.jpgI’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
The topic ‘CSS & styling issues’ is closed to new replies.