WordPress.org

Ready to get started?Download WordPress

Forums

Rotating Tweets (Twitter widget and shortcode)
[resolved] center align (16 posts)

  1. thomasbill
    Member
    Posted 1 year ago #

    I am using a layout where i have the whole thing centered in the page as the layout is fluid and responsive - i have the meta floating to the right of the tweets. One issue with this is that right now it only centers to the length of the longest tweet that is shown and if a tweet is shorter it appears off center. Is there a way to have the meta and tweets in the same div so I can use text-align:center - or if you have an idea of another solution? Thanks in advance!

    http://wordpress.org/extend/plugins/rotatingtweets/

  2. Martin Tod
    Member
    Plugin Author

    Posted 1 year ago #

    Can you send me a link so that I can see what you mean?

    Currently the structure is:

    <div class = 'rotatingtweet'>
    	<p class='rtw_main'>Text of the tweet</p>
    	<p class='rtw_meta'>Text of the meta</p>
    </div>

    I don't want to change that because of backwards compatibility and the risk of breaking other people's style sheets.

    Can you achieve what you want with:

    div.rotatingtweet {
    	text-align:center;
    }

    in the css/yourstyle.css file?

    Currently there is some 'post' javascript to sort out the CSS (because of the way the tweets rotate). It may be that we need to rewrite it to resize widths when the site is resized. Alternatively, we may need to find a way to write the CSS so that the javascript is not needed in the first place.

  3. thomasbill
    Member
    Posted 1 year ago #

    Hi Martin, thanks for your reply. I have emailed you my site link.

    Sadly for me the text:align-center on that div that won't work because rtw_main and rtw_meta and different p tags and it cant center them both.

    I tried to change them both to span and then set that css but it still does not work. stuck for ideas...

  4. thomasbill
    Member
    Posted 1 year ago #

    After some experimenting, I have managed to center it.. by centering the text within the rtw_main paragraph and also using width:100%!important; to override the javascript auto adjustment of it's width.

    The downside now is that i cant show the meta information beside it and i had to edit your php file in order to add the bird as an image instead of a background and now i cant update the plugin.

    If you can advise on a way i can get the meta to show in the same paragraph as the tweet then ill be all sorted.

  5. Martin Tod
    Member
    Plugin Author

    Posted 1 year ago #

    What happens if you drop something like:

    div.rotatingtweets,p.rtw_main,p.rtw_meta {
        width: 100%!important;
        text-align: center;
    }

    or alternatively something like:

    div.rotatingtweets,p.rtw_main,p.rtw_meta {
        width: 600px;
        text-align: center;
        margin: auto;
    }

    into the css/yourstyle.css file?

    Incidentally, you appear to have two incidences of jQuery.cycle on your page. Can you let me know what name the template gives it when it loads it, and I can try and ensure that Rotating Tweets uses that version of it.

  6. Martin Tod
    Member
    Plugin Author

    Posted 1 year ago #

    Or even something like:

    div.tweetholder,div.rotatingtweets,p.rtw_main,p.rtw_meta {
        width: 600px;
        text-align: center;
        margin: auto;
    }

    The new javascript in the latest version of the plug-in (0.702) may also help.

    Martin

  7. thomasbill
    Member
    Posted 1 year ago #

    Thanks for the replies. I am going to leave it now as I dont have much more time to fiddle with it and its looking okay at the moment.

    But when i do i get time i will update the plugin and try and readdress the issue.

    Thanks again

  8. Martin Tod
    Member
    Plugin Author

    Posted 1 year ago #

    That's great.

    You will need to do this fairly soon because Twitter is switching off open access to their APIs in March - and only versions of Rotating Tweets >= 0.700 will continue to work.

    Something that might help when you update the code is to change:

    <div class="tweetholder">

    on your home page template to:

    <div class="tweetholder widget_rotatingtweets_widget">

    (I don't know if you've inserted RT as a widget, function or shortcode, but this makes RT think it's in a widget and set itself to the width of the 'container' it's in).
    `
    Martin

  9. thomasbill
    Member
    Posted 1 year ago #

    Thanks again for the reply. I have been directly inserting the shortcode with a php line into the templates header.php - i added that css class, it didn't do anything as the same issue remains that its difficult to center 2 seperate paragraphs within one div on a full width layout.

    Anyway, I have now updated the plugin and edited it to my needs. I was hoping I would not need to edit the plugin so i could easily update in future but I had little choice in order to achieve the desried effect. I guess I won't update it any more ;-)

    i now have the rtw_meta in a span inside of the rtw_main paragraph tags which enables my to center the whole lot and using the following css code.. the result is a center aligned tweet and meta on a responsive fluid width layout.

    .tweetholder {max-width:90%; margin:0 auto; overflow:hidden;}
    
    .rotatingtweets {max-width:90%!important; margin:0 auto; z-index: 101; overflow:visible!important; text-align:center;}
    
    div.rotatingtweet {text-align:center; margin:0 auto;width:100%!important;}
    
    p.rtw_main {
    text-align:center;
    margin:0 auto;
    width:98%; max-width:1000px;
    color:#666!important;
    font-size:14px;
    word-wrap: break-word;}
    
    p.rtw_main a {color:orange; text-decoration:none!important;}
    
    span.rtw_meta {
    color:#666!important;
    font-size:12px;
    text-transform:uppercase;
    margin-left:3px;}
    
    span.rtw_meta a {color:#333!important;}
  10. thomasbill
    Member
    Posted 1 year ago #

    Also, please note - you commented in the sample yourstyle.css that it would not be overwritten when the plugin was updated but my yourstyle.css file was deleted. (luckily i made a backup first).

  11. Martin Tod
    Member
    Plugin Author

    Posted 1 year ago #

    Ah. Didn't realise that files got overwritten that way. I'll see what else might be possible.

    Regarding your layout challenge, I'll need to find a way to improve the HTML that's generated to make this work without breaking other people's use of the plug-in. Any thoughts on this most welcome!

  12. thomasbill
    Member
    Posted 1 year ago #

    dont get me wrong its a great little plugin and saves a lot of time. Its perfect for people who want to use it in a widget in the sidebar or a post. I think I just had different needs to most.

    Perhaps it could have more styling options, if of course you have time to add them- others might benefit - then again you are giving a lot here for free. So well done.

  13. Martin Tod
    Member
    Plugin Author

    Posted 1 year ago #

    Thank you.

    That's definitely another option. It's easier to add options to shortcodes, since I don't need to touch the interface.

    The other option is to create some kind of 'language' that let's people define their own structure!

    Martin

  14. Martin Tod
    Member
    Plugin Author

    Posted 1 year ago #

    Thomas,

    I've now moved the preferred location of css/yourstyle.css to wp-content/uploads/rotatingtweets.css. This won't get deleted.

    And official_format='5' should now give you the format you want!

    Martin

  15. Martin Tod
    Member
    Plugin Author

    Posted 1 year ago #

    I should stress that this is currently with the development version of the plug-in.

    Martin

  16. thomasbill
    Member
    Posted 1 year ago #

    Thanks for the reply. I am great believer in 'if it aint broke don't fix it' - and right now its working and looking perfect after my last modifications so I will leave it as is

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.