我目前在定制Theme My Login小部件的外观时遇到问题,我正在使用Parabola主题。目前它看起来像这样:
但是我希望将链接放在头像的右边而不是它下面。我已经调整了头像和用户链接区域的大小,以便它们的大小正确,以便在小部件空间中彼此相邻,但我不确定如何让它现在坐在化身旁边。
以下是我用来调整大小的代码:
.avatar.avatar-100.photo{
height: 100px;
width: 100px;
}
.tml-user-links{
height: 100px;
width: 100px;
}
以下是小部件的代码:
<?php
/**
* Holds the Theme My Login widget class
*
* @package Theme_My_Login
*/
if ( ! class_exists( 'Theme_My_Login_Widget' ) ) :
/*
* Theme My Login widget class
*
* @since 6.0
*/
class Theme_My_Login_Widget extends WP_Widget {
/**
* Constructor
*
* @since 6.0
* @access public
*/
public function __construct() {
$widget_options = array(
'classname' => 'widget_theme_my_login',
'description' => __( 'A login form for your blog.', 'theme-my-login' )
);
parent::__construct( 'theme-my-login', __( 'Theme My Login', 'theme-my-login' ), $widget_options );
}
/**
* Displays the widget
*
* @since 6.0
* @access public
*
* @param array $args Display arguments including before_title, after_title, before_widget, and after_widget.
* @param array $instance The settings for the particular instance of the widget
*/
public function widget( $args, $instance ) {
$theme_my_login = Theme_My_Login::get_object();
$instance = wp_parse_args( $instance, array(
'default_action' => 'login',
'logged_in_widget' => true,
'logged_out_widget' => true,
'show_title' => true,
'show_log_link' => true,
'show_reg_link' => true,
'show_pass_link' => true,
'show_gravatar' => true,
'gravatar_size' => 50
) );
// Show if logged in?
if ( is_user_logged_in() && ! $instance['logged_in_widget'] )
return;
// Show if logged out?
if ( ! is_user_logged_in() && ! $instance['logged_out_widget'] )
return;
$args = array_merge( $args, $instance );
echo $theme_my_login->shortcode( $args );
}
/**
* Updates the widget
*
* @since 6.0
* @access public
*/
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['default_action'] = in_array( $new_instance['default_action'], array( 'login', 'register', 'lostpassword' ) ) ? $new_instance['default_action'] : 'login';
$instance['logged_in_widget'] = ! empty( $new_instance['logged_in_widget'] );
$instance['logged_out_widget'] = ! empty( $new_instance['logged_out_widget'] );
$instance['show_title'] = ! empty( $new_instance['show_title'] );
$instance['show_log_link'] = ! empty( $new_instance['show_log_link'] );
$instance['show_reg_link'] = ! empty( $new_instance['show_reg_link'] );
$instance['show_pass_link'] = ! empty( $new_instance['show_pass_link'] );
$instance['show_gravatar'] = ! empty( $new_instance['show_gravatar'] );
$instance['gravatar_size'] = absint( $new_instance['gravatar_size'] );
return $instance;
}
/**
* Displays the widget admin form
*
* @since 6.0
* @access public
*/
public function form( $instance ) {
$defaults = array(
'default_action' => 'login',
'logged_in_widget' => 1,
'logged_out_widget' => 1,
'show_title' => 1,
'show_log_link' => 1,
'show_reg_link' => 1,
'show_pass_link' => 1,
'show_gravatar' => 1,
'gravatar_size' => 50,
'register_widget' => 1,
'lostpassword_widget' => 1
);
$instance = wp_parse_args( $instance, $defaults );
$actions = array(
'login' => __( 'Login', 'theme-my-login' ),
'register' => __( 'Register', 'theme-my-login' ),
'lostpassword' => __( 'Lost Password', 'theme-my-login' )
);
echo '<p>' . __( 'Default Action', 'theme-my-login' ) . '<br /><select name="' . $this->get_field_name( 'default_action' ) . '" id="' . $this->get_field_id( 'default_action' ) . '">';
foreach ( $actions as $action => $title ) {
$is_selected = ( $instance['default_action'] == $action ) ? ' selected="selected"' : '';
echo '<option value="' . $action . '"' . $is_selected . '>' . $title . '</option>';
}
echo '</select></p>' . "\n";
$is_checked = ( empty( $instance['logged_in_widget'] ) ) ? '' : 'checked="checked" ';
echo '<p><input name="' . $this->get_field_name( 'logged_in_widget' ) . '" type="checkbox" id="' . $this->get_field_id( 'logged_in_widget' ) . '" value="1" ' . $is_checked . '/> <label for="' . $this->get_field_id( 'logged_in_widget' ) . '">' . __( 'Show When Logged In', 'theme-my-login' ) . '</label></p>' . "\n";
$is_checked = ( empty( $instance['logged_out_widget'] ) ) ? '' : 'checked="checked" ';
echo '<p><input name="' . $this->get_field_name( 'logged_out_widget' ) . '" type="checkbox" id="' . $this->get_field_id( 'logged_out_widget' ) . '" value="1" ' . $is_checked . '/> <label for="' . $this->get_field_id( 'logged_out_widget' ) . '">' . __( 'Show When Logged Out', 'theme-my-login' ) . '</label></p>' . "\n";
$is_checked = ( empty( $instance['show_title'] ) ) ? '' : 'checked="checked" ';
echo '<p><input name="' . $this->get_field_name( 'show_title' ) . '" type="checkbox" id="' . $this->get_field_id( 'show_title' ) . '" value="1" ' . $is_checked . '/> <label for="' . $this->get_field_id( 'show_title' ) . '">' . __( 'Show Title', 'theme-my-login' ) . '</label></p>' . "\n";
$is_checked = ( empty( $instance['show_log_link'] ) ) ? '' : 'checked="checked" ';
echo '<p><input name="' . $this->get_field_name( 'show_log_link' ) . '" type="checkbox" id="' . $this->get_field_id( 'show_log_link' ) . '" value="1" ' . $is_checked . '/> <label for="' . $this->get_field_id( 'show_log_link' ) . '">' . __( 'Show Login Link', 'theme-my-login' ) . '</label></p>' . "\n";
$is_checked = ( empty( $instance['show_reg_link'] ) ) ? '' : 'checked="checked" ';
echo '<p><input name="' . $this->get_field_name( 'show_reg_link' ) . '" type="checkbox" id="' . $this->get_field_id( 'show_reg_link' ) . '" value="1" ' . $is_checked . '/> <label for="' . $this->get_field_id( 'show_reg_link' ) . '">' . __( 'Show Register Link', 'theme-my-login' ) . '</label></p>' . "\n";
$is_checked = ( empty( $instance['show_pass_link'] ) ) ? '' : 'checked="checked" ';
echo '<p><input name="' . $this->get_field_name( 'show_pass_link' ) . '" type="checkbox" id="' . $this->get_field_id( 'show_pass_link' ) . '" value="1" ' . $is_checked . '/> <label for="' . $this->get_field_id( 'show_pass_link' ) . '">' . __( 'Show Lost Password Link', 'theme-my-login' ) . '</label></p>' . "\n";
$is_checked = ( empty( $instance['show_gravatar'] ) ) ? '' : 'checked="checked" ';
echo '<p><input name="' . $this->get_field_name( 'show_gravatar' ) . '" type="checkbox" id="' . $this->get_field_id( 'show_gravatar' ) . '" value="1" ' . $is_checked . '/> <label for="' . $this->get_field_id( 'show_gravatar' ) . '">' . __( 'Show Gravatar', 'theme-my-login' ) . '</label></p>' . "\n";
echo '<p>' . __( 'Gravatar Size', 'theme-my-login' ) . ': <input name="' . $this->get_field_name( 'gravatar_size' ) . '" type="text" id="' . $this->get_field_id( 'gravatar_size' ) . '" value="' . $instance['gravatar_size'] . '" size="3" /> <label for="' . $this->get_field_id( 'gravatar_size' ) . '"></label></p>' . "\n";
}
}
endif; // Class exists
如果有人能指导我如何做到这一点我会非常感激。
答案 0 :(得分:0)
通过足够的修补,我设法找到了解决方案。我不得不将代码更改为:
.avatar.avatar-100.photo{
height: 100px;
width: 100px;
float: left;
}
.tml-user-links{
height: 100px;
width: 100px;
float: right;
}
非常感谢Casimir et Hippolyte让我走上正轨。
小部件现在看起来像这样:
我仍然希望将链接集中在一起,但我确定我可以修补一下,直到我再次弄清楚它。如果有人在将来遇到同样的问题,我会在帖子中添加答案。
修改强>
我终于得到了我想要的东西。 Using margin-right: 120px;
下的.tml-user-links
以下是最终结果: