3 column layout for tweets

(13 posts) (3 voices)

1. 

   stickane
   Member

   Part 1: I am attempting to reStyle the way tweets show up on my site. Currently I am using [twitter id="username" number="3"] to display tweets in the outro section. By default they are displaying stacked on top of each other full width. I am assuming they are using display:block or something similar. I want to style them to show horizontally. I have tried to use the [one_third] short code to have them display across the page horizontally but to no avail.

   Part 2: For each of the tweets I would like to have them show up on a custom .png background that I create. When I try to do this all I can seem to do is place it in the background of the entire div rather than behind each individual tweet.

   Help please!!

   Scott

   Posted 9 months ago #
2. 

   Elliott
   Support

   Hello stickane,

   Navigate to Dashboard -> Persuasion -> General Settings -> Custom CSS and add this line,

   #outro cufon { display: none !important; }
   #outro .one_third cufon { display: inline-block !important; }

   Next your code in the outro should look like this,

   [one_third]
   [twitter id = "" number = "3"]
   [/one_third]
   
   [one_third]
   [twitter id = "" number = "3"]
   [/one_third]
   
   [one_third_last]
   [twitter id = "" number = "3"]
   [/one_third_last]

   As for the custom background for your tweets the class you would use is this,

   #outro .mysite_twitter_widget li { }

   But keep in mind that if you change the background image then the tweet icon will disappear.

   Posted 9 months ago #
3. 

   stickane
   Member

   The code you gave me works, but the problem is I want to display tweets from one person only in a horizontal fashion.

   
[one_third]
[twitter id = "" number = "1"]
[/one_third]

   [one_third]
   [twitter id = "" number = "1"]
   [/one_third]

   [one_third_last]
[twitter id = "" number = "1"]
[/one_third_last]


   Works but it posts the same "most recent" post 3 times. I would like to post the last 3 tweets on the same line horizontally. I don't think the one_third shortcode is the answer unless there is a way to skip the most recent tweet and post the 2nd most recent and so on. I was hoping there was an easier way to style the div that contains the #outro .mysite_twitter_widget li.

   Can you try to help me again please?

   Posted 9 months ago #
4. 

   Elliott
   Support

   If you just want it on one line then you wouldn't need to use the column shortcodes. Just paste the [twitter] shortcode.

   If that's not what your wanting then take a screenshot and highlight the areas which you are having issues with so we can get a better idea.

   Posted 9 months ago #
5. 

   stickane
   Member

   The [twitter] shortcode displays like this:

   

   Attachments

   1. current.jpg (30.5 KB, 4 downloads) 9 months old

   Posted 9 months ago #
6. 

   stickane
   Member

   I want it to display like this:

   

   Attachments

   1. desired.jpg (37.4 KB, 0 downloads) 9 months old

   Posted 9 months ago #
7. 

   Elliott
   Support

   Go ahead and send us a link to your site so we can take a closer look. We probably just need to float the list items to the left.

   Posted 9 months ago #
8. 

   stickane
   Member

   http://www.stickane.com/stickanedotcom/

   Posted 9 months ago #
9. 

   Ruderic
   Support

   Hello,

   Go to the theme options panel, and paste this code in the "Custom CSS" field:

   #outro .mysite_twitter_widget li {
   float: left;
   }

   Try that and let us know the results.

   Posted 9 months ago #
10. 

    stickane
    Member

    That works as long as you specify a width for the list. 250px; seems to work.

    #2: but when I specify a background image nothing shows up. Can you help with that?
    Currently I am using :
    
#outro .mysite_twitter_widget ul { padding-left:60px;}
#outro .mysite_twitter_widget li { background-image:url(bokeh/postit1.png);float: left; width:220px;
}


    Posted 9 months ago #
11. 

    Elliott
    Support

    Try this,

    background: url() !important;

    Instead of,

    background-image: url();

    And try using an absolute path to your image instead of a relative one.

    Posted 9 months ago #
12. 

    stickane
    Member

    That did it, but the twitter logo disappeared. Any ideas?

    Posted 9 months ago #
13. 

    Elliott
    Support

    As said in my first post if you switch the background image the twitter icon will disappear.

    You can try including a twitter icon in your new background image.

    Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.