"Single Page Layout" (#1675233) / Stachethemes

LaNeraNura started the conversation

August 13, 2018 at 8:48am

Hello together,

first of all thank you very much for this amazing plugin! Love the design and functionality. I don't know how i can change the basic layout of the single event pages. My Theme "Gridlove" comes with a "Blank Page (full width)" template which i use here: https://pandabeijing.com/event-calendar-test. How can i set the same layout for the single event pages? I know i can edit the event.php but I don't know where to start. How do i properly combine these two code files?

Gridlove template-full-width.php

<?php
/**
* Template Name: Blank Page (full width)
*/
?>

<?php get_header(); ?>

<?php get_template_part('template-parts/ads/below-header'); ?>

<?php while( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php post_class('gridlove-box box-vm'); ?>>

<?php get_template_part('template-parts/page/entry-header'); ?>

<?php get_template_part('template-parts/page/entry-content'); ?>

</div>

</article>

<?php endwhile; ?>

<?php comments_template(); ?>

</div>

<?php get_footer(); ?>

Stachethemes Event.php

<?php

namespace Stachethemes\Stec;

if ( !isset($stec) || !$stec instanceof stachethemes_ec_main ) {
return;
}

if ( !isset($event) || !$event instanceof Event_Post ) {
return;
}
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='<?php echo plugins_url('fonts/css/fontawesome-all.min.css', STACHETHEMES_EC_FILE__) ?>' type='text/css' media='all' />

<style>
.stec-event-embed {
margin:0;
padding:15px;
font-family: Roboto;
width: 100%;
background: #fff;
box-sizing: border-box;
overflow: hidden;
}

.stec-event-embed-icon {
width: 50px;
height: 50px;
min-width: 50px;
border-radius: 3px;
}

.stec-event-embed .stec-layout-single-month-full {
display: none;
}

h1 {
margin:0;
padding:0;
padding-left: 10px;
font-size: 24px;
}

.stec-event-embed-icon i {
width: 50px;
line-height: 50px;
color:#fff;
text-align: center;
font-size: 20px;
}

.stec-event-flex {
display: flex;
align-items: center;
align-content: space-between;
float: left;
width: 100%;
}

.stec-event-embed-description {
width: 100%;
float: left;
margin-top: 10px;
font-size: 16px;
line-height: 1.6;
color:#999;
}

.stec-event-embed-list {
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
float: left;
width: 100%;
margin-top: 10px;
padding: 10px 0;
list-style: none;
}

.stec-event-embed-list li {
width: 100%;
float: left;
margin: 5px 0;
color:#999;
font-size: 16px;
}

.stec-event-embed-list li i {
width: 35px;
text-align: center;
color:#999;
font-size: 20px;
}

.stec-embed-permalink:hover {
background-color:#f15e6e;
}

.stec-embed-permalink {
background-color:#4d576c;
color:#fff;
padding: 15px 20px;
border-radius: 3px;
text-decoration: none;
float: left;
}

@media screen and (max-width: 400px) {

.stec-event-embed {

}

h1 {

font-size: 18px;
}

.stec-event-embed-icon {
width: 40px;
height: 40px;
min-width: 40px;

}

.stec-event-embed-icon i {
width: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
}

.stec-event-embed-description {
font-size: 14px;
line-height: 1.2;

}
.stec-embed-permalink {
width:100%;
padding: 10px;
text-align: center;
box-sizing: border-box;
font-size: 14px;

}

.stec-event-embed-list li {

font-size: 14px;
}

.stec-event-embed-list li i {
width: 30px;
font-size: 18px;
}
}
</style>

</head>
<body class="stec-event-embed">

<div class="stec-event-flex">
<div class="stec-event-embed-icon" style="background-color: <?php echo $event->get_color(); ?>">
<i class="<?php echo $event->get_icon(); ?>"></i>
</div>

<h1><?php echo $event->get_title(); ?></h1>
</div>

<div class="stec-event-embed-description"><?php echo $event->get_description_short(); ?></div>

<ul class="stec-event-embed-list">
<li><i class="fas fa-clock"></i><?php echo Admin_Helper::get_the_timespan($event, $repeat_offset); ?></li>
<?php if ( $event->get_location() ) : ?>
<li><i class="fa fa-map-marker"></i><?php echo $event->get_location(); ?></li>
<?php endif; ?>
</ul>

<a target="_parent" class="stec-embed-permalink" href="<?php echo $event->get_permalink($repeat_offset); ?>"><?php _e('Learn more', 'stec'); ?></a>

</body>
</html>

94

Valentin replied

August 13, 2018 at 9:49am

Hello there,

Yes this happen sometimes unfortunately, the content wrapper is missing.

Basically you need the single page to be the same width as the front page right?

Stachethemes Support
My Time Zone is GMT+3

Envato Profile | Facebook | Twitter | Newsletter | Rate & Review

LaNeraNura replied

August 13, 2018 at 10:51am

Hello Valentin,

yes correct. I would like to use the same wrapper as on this page: https://pandabeijing.com/event-calendar-test/

94

Valentin replied

August 13, 2018 at 11:48am

Hello again

From your WordPress Dashboard go to St. Event Calendar -> Fonts & Colors open Custom Styles and paste this code:

.stec-layout-single {
  float: none !important;
  max-width: 1280px;
  margin:0 auto !important;
  overflow: hidden;
  box-shadow: 0 3px 5px 0 rgba(0,1,1,.1);
}
.stec-layout-single-button-style p {
    margin-bottom: 0 !important;
}
.stec-layout-month-daylabel p {
     margin-bottom: 0 !important;
}
.stec-top .stec-top-menu > li.active p {
     margin-bottom: 0 !important;
}
.stec-top .stec-top-menu > li p {
    margin-bottom: 0 !important;
}
.stec-layout-event-preview-left-text-title {
    margin-bottom: 0 !important;
}
.stec-layout-event .stec-layout-event-preview-left-text-title, .stec-layout-event .stec-layout-event-preview-left-text-date {
    margin-bottom: 0 !important;
}
.stec-layout-event-create-form-inner .stec-layout-event-create-form-inner-label {
    margin-bottom: 10px !important;
    margin-top: 30px !important;
}
.stec-layout-event-create-form-inner .stec-layout-event-create-form-inner-flexbox > p {
    margin: 0 !important;
    margin-left: 10px !important;
}

Save the settings and check if everything with the single page is okay.

Also notices that there is one small css conflict. Some elements have bottom spacing that is coming from this style:

body p {
    font-family: 'museosansrounded-500-webfont', sans-serif, arial !important;
    margin: 0 0 12px !important;
}

Now I don't know how is the theme developer, but I'm pretty sure this style shouldn't be like that because it's global and overwrite everything else you decide to include on the front of your theme including our plugin as you can see.

I included some fixes in the css above, but this is not really a solution. It will work for us, but if you decide to use other plugins on the front-end in the future you may experience more problems. I suggest you to contact the developer and tell him to look for more elegant solution and avoid global styles.

Let me know if I can assist you any further.

Stachethemes Support
My Time Zone is GMT+3

Envato Profile | Facebook | Twitter | Newsletter | Rate & Review

LaNeraNura replied

August 13, 2018 at 2:45pm

Hi Valentin,

thank you very much, this code works perfectly! I also deleted the unnecessary bottom margin for paragraphs thx for letting me know. Don't even remember why I added that.

Best George

94

Valentin replied

August 13, 2018 at 2:48pm

Yes if you are using Font Awsome version under 5.0 check this article:

https://stachethemes.ticksy.com/article/13467/

Stachethemes Support
My Time Zone is GMT+3

Envato Profile | Facebook | Twitter | Newsletter | Rate & Review

Comments