Style Last Topics and Login Widgets how to

[axew3]

NOTE from 1.9.7 >
[w3allastopics] - [w3allastopicforumsids] AND [w3allfeed] shortcodes
there is the new way to apply classes and inline styles on each shortcode.
Documentation on how to use has been added on bottom of each shortcode documentation page.
It maintain compatibility with the old way.

The following below is may obsolete to apply for the above listed shortcodes from version 1.9.7 >
By the way you still can use the old way to style shortcodes as explained here below

This first explain post if for more advanced users, skip to next reply post for the easy how to style widgets
Check also the latest post on this topic

If you need to style widgets because they do not look like your theme

For Widget Last Topics
open file
views/phpbb_last_topics.php
+- on top search for this lines:

Code: Select all

$w3all_lastopics_style_ul = 'list-style:none;margin:0px';
$w3all_lastopics_style_ul_class = 'w3all_ul_widgetLastTopics'; // declare this class .w3all_ul_widgetLastTopics into your css template and style ul element as needed 
$w3all_lastopics_style_li_class = 'w3all_li_widgetLastTopics'; // declare this class .w3all_li_widgetLastTopics into your css template and style li elements as needed 

WP_w3all Login Widget
files
views/login_form_include_iframe_mode_links.php
and
views/login_form_include_noiframe_mode_links.php

Code: Select all

$w3all_loginform_style_ul = 'list-style:none;margin:0px';
$w3all_loginform_style_ul_class = 'w3all_ul_widgetLogin'; // declare this class .w3all_ul_widgetLogin into your css template and style ul element as needed 
$w3all_loginform_style_li_class = 'w3all_li_widgetLogin'; // declare this class .w3all_li_widgetLogin into your css template and style li elements as needed 
 

Be noticed that if you change classes names, when the plugin will be updated (so all plugin's files replaced by the update) you'll need so to reset classes names other time on views/phpbb_last_topics.php or views/login_form_include_iframe_mode_links.php or views/login_form_include_noiframe_mode_links.php

[axew3]

As easy start example that you'll customize adding your CSS code, to style the two widgets, is necessary to add the follow into your childtheme CSS or main CSS of your WP theme, in this way:

to style UL and LI elements for widget Last Topics

Code: Select all

.w3all_ul_widgetLastTopics {
padding: 10px;
/* edit or/and add more styles */
}
.w3all_li_widgetLastTopics {
padding: 3px 0px;
/* edit or/and add more styles */
}

to style UL and LI elements for widget Login

Code: Select all

.w3all_ul_widgetLogin {
padding: 10px;
/* edit or/and add more styles */
}
.w3all_li_widgetLogin {
padding: 3px 0px;
/* edit or/and add more styles */
}

[axew3]

... do not lose changes on plugin update.
To style your widgets and shortcodes to look like your theme, you may wish to edit files that output the html code: you can check for all these files into folder
/wp-content/plugins/wp-w3all-phpbb-integration/views
they are quite self explained on their names:

phpbb_last_topics.php (output last topics on widgets)
phpbb_last_topics_output_shortcode.php (output last topics shortcode)
phpbb_last_topics_forums_ids_shortcode.php (output last topics shortcode by forums IDS)
login_form_include_noiframe_mode_links.php (output login form widget when links are not set to point to iframed page)
login_form_include_iframe_mode_links.php (output login form widget when links are set to point to iframed page)

if you go to edit these files and you do not want they are overwritten on plugin update, then you
can copy/paste these five files into the custom folder you'll go to create
/wp-content/plugins/wp-w3all-config
or that you may already manually created, if you chosen to include/use the custom phpBB config.php file.
If not, create it and to activate the use of these files, activate the related option into
WP_w3all admin config page -> Use custom files to display Last Topics Widgets, Login Widget or Last Topics Shortcode content

custom modifications done into these files, aren't overwritten when plugin update.

NOTE IMPORTANT: if you activate this option, it is mandatory that you copy/paste all files (exclude config.php!) you'll go to use, into the custom folder
/wp-content/plugins/wp-w3all-config

[elawrenc01]

On phpb_last_topics.php

I would like to make a suggestion, that you add

Code: Select all

<span>

tags for the author and time:

Code: Select all

echo "<li class=\"".$w3all_lastopics_style_li_class."\"><table style=\"border-spacing:0;border-collapse:collapse;vertical-align:middle;margin:0;border:0;\"><tr><td style=\"border:0;width:".$w3all_last_t_avatar_dim."px;\">".$w3all_avatar_display."</td><td style=\"border:0;width:auto\"><a href=\"$w3all_url_to_cms/viewtopic.php?f=$value->forum_id&amp;t=$value->topic_id&amp;p=$value->post_id#p$value->post_id\">$value->topic_title</a> ".$w3all_post_state_ru."<br /><span>". __( 'by ' , 'wp-w3all-phpbb-integration' )." $value->topic_last_poster_name ". __( 'at ' , 'wp-w3all-phpbb-integration' ) . date_i18n( 'H:i Y-m-d', $value->topic_last_post_time + ( 3600 * get_option( 'gmt_offset' )) ) ."</span></td></tr></table></li>\n";

I added them right after the br/ and before the td closes. But also for the li items.

[axew3]

It need also to be re-coded to be + clear and easy.
Will be next step after iframe v6 code and new page-forum.

Anyway, to not loose changes when plugin update, set the option
Use custom files to display Last Topics Widgets, Login Widget or Shortcodes content
so you can modify these files as you more like, and will never be necessary to update anymore to fit your needs

note that to use this option you need to follow instructions:

Files that display widgets output and that reside into folder /wp-content/plugins/wp-w3all-phpbb-integration/views
can be copied/pasted into the custom folder (that you may already manually created, if you choosen to include/use the custom phpBB config.php file):
/wp-content/plugins/wp-w3all-config
custom modifications done into these files, aren't overwritten when plugin update.

NOTE: if you activate this option, it is mandatory that you copy all files inside views folder and paste all files into the custom created /wp-content/plugins/wp-w3all-config folder