Trying to align columns WordPress
- SOLVED
I am trying to align the columns on this page:
http://www.creative-printables.com/autonav-with-div-instead-of-table/
to look like the table on this page:
http://www.creative-printables.com/autonav/
Basically I want the images aligned and the text to appear neatly under the images.
The images are created via a plugin called [[LINK href="http://wordpress.org/plugins/autonav/other_notes/"]]autonav[[/LINK]]
Answers (4)
Bob answers:
The trouble is with this plugin is that it do not create container div for each item.
First we have to modify plugin code and then write some css for it.
Following are instructions of modification autonav-wl.php of plugin.
If you wish I can send you modified plugin. But you have to write css in your theme by yourself (3rd point in below instructions)
( 1 )
To add item contaier, you have to modify php code in file autonav-wl.php
line no 1019 to 1021
::Old Code::
$my_html = $attr['plain'] ? '' : an_create_tag('li', array('class' => an_create_unit_class($attr, $pic, $class . '-item')));
$html .= apply_filters('autonav_create_list_item', $my_html, $class, $pic, $attr);
if (!$attr['plain']) { $html .= "</li>\n"; }
::New Code::
$my_html = $attr['plain'] ? '<div class="autonav-content">' : an_create_tag('li', array('class' => an_create_unit_class($attr, $pic, $class . '-item')));
$html .= apply_filters('autonav_create_list_item', $my_html, $class, $pic, $attr);
if (!$attr['plain']) { $html .= "</li>\n"; }else{ $html .= "</div>\n"; }
( 2 )
Then you have to change filter priority filter, so it display image first and then post title
line no 961,962
::old code::
add_filter('autonav_create_list_item', 'an_create_output_text', 10, 4);
add_filter('autonav_create_list_item', 'an_create_output_picture', 15, 4);
::New code::
add_filter('autonav_create_list_item', 'an_create_output_text', 15, 4);
add_filter('autonav_create_list_item', 'an_create_output_picture', 10, 4);
( 3 )
Now write css in your theme to display everything properly.
.autonav-content {
width: 200px;
float: left;
}
.autonav-content a {
display: block;
text-align: center;
}
Bob comments:
The trouble is with this plugin is that it do not create container div for each item.
First we have to modify plugin code and then write some css for it.
Following are instructions of modification autonav-wl.php of plugin.
If you wish I can send you modified plugin. But you have to write css in your theme by yourself (3rd point in below instructions)
( 1 )
To add item contaier, you have to modify php code in file autonav-wl.php
line no 1019 to 1021
::Old Code::
$my_html = $attr['plain'] ? '' : an_create_tag('li', array('class' => an_create_unit_class($attr, $pic, $class . '-item')));
$html .= apply_filters('autonav_create_list_item', $my_html, $class, $pic, $attr);
if (!$attr['plain']) { $html .= "</li>\n"; }
::New Code::
$my_html = $attr['plain'] ? '<div class="autonav-content">' : an_create_tag('li', array('class' => an_create_unit_class($attr, $pic, $class . '-item')));
$html .= apply_filters('autonav_create_list_item', $my_html, $class, $pic, $attr);
if (!$attr['plain']) { $html .= "</li>\n"; }else{ $html .= "</div>\n"; }
( 2 )
Then you have to change filter priority filter, so it display image first and then post title
line no 961,962
::old code::
add_filter('autonav_create_list_item', 'an_create_output_text', 10, 4);
add_filter('autonav_create_list_item', 'an_create_output_picture', 15, 4);
::New code::
add_filter('autonav_create_list_item', 'an_create_output_text', 15, 4);
add_filter('autonav_create_list_item', 'an_create_output_picture', 10, 4);
( 3 )
Now write css in your theme to display everything properly.
.autonav-content {
width: 200px;
float: left;
}
.autonav-content a {
display: block;
text-align: center;
}
printables comments:
Works perfectly! Thank you!
printables comments:
I just noticed that the titles of the posts do not appear as text but more like an image with a link. Is this related to the change? Is there by any chance a quick way to fix this?
Balanean Corneliu answers:
Add me on skype i will fixx this for you but i need some acces to the admin area.
id: balanean.corneliu
or user and pas to email admin[]colibry.ro
keep in touch
Balanean Corneliu comments:
Open your post or page where you want to be and select "Text" mode , after insert this code
<ul style="margin: 0; padding: 0; list-style: inline;">
<li style="width: 160px; margin: 20px; float: left;"><img style="background-color: #f5f5f5; border: 1px solid #DDDDDD; padding: 4px;" alt="" src="http://www.creative-printables.com/wp-content/uploads/2013/11/calendar-20141-150x150.jpg" />
Free Printable Calendars</li>
<li style="width: 160px; margin: 20px; float: left;"><img style="background-color: #f5f5f5; border: 1px solid #DDDDDD; padding: 4px;" alt="" src="http://www.creative-printables.com/wp-content/uploads/2013/11/vintage-coffee-labels-150x150.jpg" />
Free Printable Labels</li>
<li style="width: 160px; margin: 20px; float: left;"><img style="background-color: #f5f5f5; border: 1px solid #DDDDDD; padding: 4px;" alt="" src="http://www.creative-printables.com/wp-content/uploads/2013/11/printable-banners-150x150.jpg" />
Free Printable Banners</li>
</ul>
Balanean Corneliu comments:
This one is without li circle:
<ul style="margin: 0; padding: 0; list-style: inline;">
<li style="list-style: none; width: 180px; margin: 20px; float: left;"><img style="background-color: #f5f5f5; border: 1px solid #DDDDDD; padding: 4px;" alt="" src="http://www.creative-printables.com/wp-content/uploads/2013/11/calendar-20141-150x150.jpg" />
<strong>Free Printable Calendars</strong></li>
<li style="list-style: none; width: 175px; margin: 20px; float: left;"><img style="background-color: #f5f5f5; border: 1px solid #DDDDDD; padding: 4px;" alt="" src="http://www.creative-printables.com/wp-content/uploads/2013/11/vintage-coffee-labels-150x150.jpg" />
<strong>Free Printable Labels</strong></li>
<li style="list-style: none; width: 175px; margin: 20px; float: left;"><img style="background-color: #f5f5f5; border: 1px solid #DDDDDD; padding: 4px;" alt="" src="http://www.creative-printables.com/wp-content/uploads/2013/11/printable-banners-150x150.jpg" />
<strong>Free Printable Banners</strong></li>
</ul>
i have atached my exemple.