Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Horizontal unordered list problem.


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Nov 16, 2010, 01:40 AM
gmedel
 
7 posts · Feb 2010
Hi, I'm using a plugin called "Tumblr Widget" to display, on my wordpress blog, the last 4 posts from my Tumblr Blog. The plugin creates an unordered list to display the posts, so the list appears with the same styling that any other unordered list has (for example, just like the BFA_polular_posts widget), the only difference is that normally this "tumblr posts" are images or videos, no text.

I want to be able to display this items horizontally, but I've unable to do it with the CSS inserts.

This is the code generated by the plugin (inside a custom widget):

Code:
<div id="tumblr_widget_area" class="bfa_widget_area">
<div id="tumblr-widget-3" class="widget Tumblr">
<div id="Tumblr_List"> /* This line was added by me, by editing the plugin code. */
<ul>
<li class="tumblr_post video"><object width="100" height="81.5"><param name="movie" value="http://www.youtube.com/v/0pemlKXKQXM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/0pemlKXKQXM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="100" height="81.5"></object><br><p><a href="http://hrfavorites.tumblr.com/post/1469167109" class="tumblr_link">11/03/10</a></p>
</li>
<li class="tumblr_post photo"><a href="http://26.media.tumblr.com/tumblr_l6pgw2iOI81qcl834o1_500.jpg"><img src="http://28.media.tumblr.com/tumblr_l6pgw2iOI81qcl834o1_100.jpg"></a><br><p><a href="http://hrfavorites.tumblr.com/post/1469144441" class="tumblr_link">11/03/10</a></p>
</li>
</ul>
</div> /* This line was added by me, by editing the plugin code. */
</div>
</div>
and this is my current CSS insert:

Code:
#Tumblr_List ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
#Tumblr_List li {display: inline; }
and this is the end result:



As you can see, the first CSS line is doing nothing, and the second one, for some reason it just displays the gray padding on the left of each item with a less height (normally the gray padding has the same height of each item).

I'm not sure what am I doing wrong here. Could anyone please give me some pointers on this matter?
  #2  
Old Nov 16, 2010, 04:04 AM
juggledad's Avatar
juggledad
 
21,713 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
What version of Atahualpa and wp?
What is the URL?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Nov 16, 2010, 10:08 PM
gmedel
 
7 posts · Feb 2010
I'm running Atahualpa 3.5.3 and WP 3.0.1.

The url will not do you any good: I have the plugin deactivated because it is not a personal site and I the admins won't let me put erroneous configurations online.

But, I case you want to take a look at the other stuff configurations on the site, the url is www.hombresrudos.com (it's a spanish written site for men).

Thanks.
  #4  
Old Nov 17, 2010, 03:55 AM
juggledad's Avatar
juggledad
 
21,713 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
try
HTML Code:
#Tumblr_List li {display: inline !important; }
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Nov 17, 2010, 10:02 PM
gmedel
 
7 posts · Feb 2010
Nope, no change at all. Could there be something on the atahualpa CSS that it's preventing this to work? I've talked with the developer of the plugin and he says that it should work with the CSS styling.
  #6  
Old Nov 18, 2010, 04:07 AM
juggledad's Avatar
juggledad
 
21,713 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Without seeing the site with the issue I can only tell you what I would do.
Activate the plugin, visit the site and view the source. Copy the source to a text file and save it as 'test.html' now go back and deactivate the plugin.

Now you can open tset.html in your browser and start removing code and CSS to isolate the problem. Each time you remove some CSS, you do a save then switch to the browser and do a refresh and you will see the effect.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #7  
Old Nov 18, 2010, 08:20 AM
gmedel
 
7 posts · Feb 2010
I've tried to do what you told me, but I can't figure out what to take out. All the CSS that I can found is supposed to belong to other plugins.

I've managed to get permission from the admins to let the plugin activated. Right now, you can see it at the bottom of the main column at www.hombresrudos.com (as I said before, it's a spanish written blog for men).

I'm still trying to find what could be the cause of this looking at the test code, but I would be incredibly helpful if you could also take at look at it.

Thanks.
  #8  
Old Nov 18, 2010, 01:24 PM
juggledad's Avatar
juggledad
 
21,713 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
the problem is with the <p>'s and <br /> you have in the widget
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #9  
Old Nov 18, 2010, 04:17 PM
gmedel
 
7 posts · Feb 2010
Ohhh!! I see it now!! Thank you very much!! I will have to edit the plugin's code to fix that because those are generated automatically by it.

I do however have one last question: why is that the gray padding is no using all of the item's height? I should have to CSS that too? Could I CSS that so it would be transparent or black?

Thanks again for your great help!!
  #10  
Old Nov 18, 2010, 07:14 PM
juggledad's Avatar
juggledad
 
21,713 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
that has something to do with css that is there. If you want to make it full size fully define the CSS selector and use the '!important' portion of the CSS rule
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #11  
Old Nov 20, 2010, 12:46 AM
gmedel
 
7 posts · Feb 2010
Thank you very much for all your help!! I'm still playing with the styling to make it look exactly the way I want to, but thanks your help I've figured out all that I need to proceed.

I'll make sure to donate asap. Thanks again, bye.

Bookmarks

Tags
css inserts

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem with horizontal scrolling rcrsupport Header configuration & styling 0 Apr 13, 2010 07:16 PM
[SOLVED] How can I move vertical links list into horizontal list on navigation bar? kevandali Page & Category Menu Bars 2 Jul 21, 2009 01:04 PM


All times are GMT -6. The time now is 01:40 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.