Question

我使用WordPress和＃34;事件日历＆＃34;插件和＆＃34;事件日历短代码＆＃34;插入。我需要在＆＃34;关于公司＆＃34;页。显示事件，现在我需要添加CSS以很好地显示这些事件。通过使用Inspect element命令，我在代码中看到<ul>，<li>和<span>元素。你能帮我解决一下如何修改这些元素的外观吗？

浏览器中的完整代码如下：

<ul class="ecs-event-list">
<li class="ecs-event">
    <h4 class="entry-title summary">
        <a rel="bookmark" href="http://www.green-craft.eu/event/parfumerijos-paslaptys/">
            Parfumerijos paslaptys
        </a>
    </h4>
    <img class="attachment-150x150 wp-post-image" alt="ramute" src="http://i1.wp.com/www.green-craft.eu/wp-content/uploads/2015/10/ramparfuma.jpg?fit=150%2C150"></img>
    <span class="duration time">
        <span class="date-start dtstart">
            spalio 12 @ 11:00 am
            <span class="value-title" title="2015-10-12UTC11:00"></span>
        </span>
         - 
        <span class="end-time dtend">
            6:00 pm
            <span class="value-title" title="2015-10-12UTC06:00"></span>
        </span>
    </span>
</li>

我需要添加html表吗？（我可以在WordPress中指定html表吗？）或者我可能需要为ul，li和span元素中提到的类添加CSS？但我试图修改CSS并无法管理它。通过论坛和文章搜索已经:) 非常感谢您的帮助。

Kotryna

Answer 1

如果您不想弄脏手，请使用此plugin。此插件会向您的网站添加额外的css文件，覆盖任何现有的CSS，以便您可以直接修改元素。小心使用最具体的继承以避免更改其他内容。恩。始终使用班级.ecs-event

开始

Answer 2

function custom_query_one_tribe_events_list(){ if(!class_exists('Tribe__Events__Main')){return;}ob_start(); add_filter( 'tribe-events-bar-should-show', '__return_true' );  $output=''; $output .='<div class="post-type-archive-tribe_events tribe-js tribe-filter-live events-list events-archive tribe-events-style-full tribe-events-style-theme elementor-default tribe-theme-parent-moscow tribe-theme-child-moscow-child tribe-is-responsive"><div id="tribe-events"><div id="tribe-events-content-wrapper" class="tribe-clearfix"><div id="tribe-events-content" class="tribe-events-list tribe-events-day">'; $argsdefaults = array('posts_per_page'=>5,'orderby'=>'event_date','order'=>'DESC');  $output .= tribe_include_view_list($argsdefaults); $output .='</div><!-- #tribe-events-content --> </div><!--tribe-events-content-wrapper--></div><!-- #tribe-events --></div>';echo $output;wp_reset_query();  return ob_get_clean();}add_shortcode('actus_custom_events_list','custom_query_one_tribe_events_list');

function tribe_events_embed_custom_scripts(){ if(in_array('the-events-calendar/the-events-calendar.php', apply_filters('active_plugins', get_option('active_plugins')))){ if(is_page(6508)||is_page(6535)){   $css_path=Tribe__Events__Template_Factory::getMinFile(Tribe__Events__Main::instance()->plugin_url.'src/resources/css/tribe-events-full.min.css', true );$css_path_embed=Tribe__Events__Template_Factory::getMinFile(Tribe__Events__Main::instance()->plugin_url.'src/resources/css/tribe-events-embed.min.css', true );$css_path_theme=Tribe__Events__Template_Factory::getMinFile(Tribe__Events__Main::instance()->plugin_url.'src/resources/css/tribe-events-theme.min.css', true );$css_path_admin_menu=Tribe__Events__Template_Factory::getMinFile(Tribe__Events__Main::instance()->plugin_url.'src/resources/css/admin-menu.min.css', true );wp_enqueue_style( 'tribe-events-embed-custom-css', $css_path_embed );wp_enqueue_style( 'tribe-events-full-custom-css', $css_path );wp_enqueue_style( 'tribe-events-theme-custom-css', $css_path_theme );wp_enqueue_style( 'tribe-events-admin-menu-custom-css', $css_path_admin_menu ); }  }}add_action('wp_enqueue_scripts','tribe_events_embed_custom_scripts');

自定义代码简码仅显示事件日历列表。使用的两个函数都有您的主题函数。php通过这种方式显示[actus_custom_events_list]编辑器工具或do_shortcode（'[actus_custom_events_list]'）

事件日历插件的CSS

2 个答案: