URGENT HELP: Customize Blog Layout

Hello there,

I have a problem customizing the blog post pages.
For example: https://ucscgenomics.soe.ucsc.edu/events/

I just joined the team as the new web admin, and I am not sure where the pages calling the custom style code from.

What we wanted is having something similar to the Agency News section like this:
http://demo.theme.co/agency/news/

Also, is it possible if I can get the css style for agency? I don’t want to do the one on the dashboard that overwrites the whole custom setting. I will be in big trouble.

Please help how we can achieve that? Thank you

Hi There,

Thank you for writing in, it seems like the “events” and “publications” page is using a custom template. This are the templates that is default to the theme, other than that is either a custom or is from a plugin.

The http://demo.theme.co/agency/news/ page is a blog index page, it automatically populates your latest posts. You can assign a page as your blog index page by navigating to Settings > Reading and set the page as Posts page. However, you won’t get the same design as the Agency demo because that is using the Ethos stack, while your site is currently in Integrity. Stacks can be change under X > Launch > Theme Options > Stack

Cheers!

Hi there,
Can’t really use Ethos stack because it didn’t fit the website since it has been styled with Integrity.
I just want the blog layout of Ethos to Integrity.
I looked through the form here:


I would have done to the post page, but I have to do it with three other post page by category. If you understand? You can see how there is one blog post for events, publications, and news. Therefore, I might as well do the shortcode for the individual pages.
I tried looking at this forum, but it didn’t work for me:

Here’s our php from our template (if you’re curious):
<?php

// =============================================================================
// TEMPLATE NAME: Events Category Page
// -----------------------------------------------------------------------------
// A blank page for creating unique layouts.
//
// Content is output based on which Stack has been selected in the Customizer.
// To view and/or edit the markup of your Stack's index, first go to "views"
// inside the "framework" subdirectory. Once inside, find your Stack's folder
// and look for a file called "template-blank-1.php," where you'll be able to
// find the appropriate output.
// =============================================================================

?>

<?php get_header(); ?>

<div class="x-container max width offset">
  <div class="<?php x_main_content_class(); ?>" role="main">
    <div class="cursive"> <h2><?php echo get_cat_name(2118);?></h2></div>
    <p><?php echo category_description(2118); ?> </p>
            <?php // Display blog posts 
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('cat=2118&showposts=4&paged=' . $paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
        <?php x_get_view( 'integrity', 'content', 'page' ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>

    </div>
  </div>

<?php get_footer(); ?>

This is the CSS correspond this layout and the other layout(same structure, but different categories).

.page-template-template-categorynews .x-main,
.page-template-template-categorypublications .x-main
.page-template-template-categoryevents .x-main{
	width: 100%;
}
.page-template-template-categorynews .entry-featured,
.page-template-template-categorypublications .entry-featured
.page-template-template-categoryevents .entry-featured{
	border-bottom: none;
	box-shadow: none;
    float: left;
    width: 38%;
    margin:2%;
}
.page-template-template-categorynews .entry-wrap,
.page-template-template-categorypublications .entry-wrap
.page-template-template-categoryevents .entry-wrap{
	display: block;
	background-color: rgba(224,226,225,0.08);
	box-shadow: none;
}
.page-template-template-categorynews .entry-thumb,
.page-template-template-categorypublications .entry-thumb
.page-template-template-categoryevents .entry-thumb{
	width: 34%;
	float: left;
	overflow: hidden;
	background-color: transparent;
}
.page-template-template-categorynews .entry-thumb img,
.page-template-template-categorypublications .entry-thumb img
.page-template-template-categoryevents .entry-thumb img{
	max-width: 210px;
    float:left;
    padding-right: 20px;
}
.page-template-template-categorynews article header,
.page-template-template-categorypublications article header
.page-template-template-categoryevents article header{
	display: inline;
}
.page-template-template-categorynews .entry-title,
.page-template-template-categorypublications .entry-title
.page-template-template-categoryevents .entry-title{
	font-size: 120%;
}
.page-template-template-categorynews .entry-content,
.page-template-template-categorypublications .entry-content
.page-template-template-categoryevents .entry-content{
	font-size: 5%;
    width:60%;
	float: right;
}
.page-template-template-categoryevents .x-recent-posts-date{
	display: none !important;
}

.entry-wrap p{
	color: #ffffff !important;
}
.entry-title a{
	color: #546A76 !important;
}
.entry-title a:hover{
	color:  #BB9934 !important;
}

.single-format-standard .entry-wrap{
	background-color: transparent;
	box-shadow: none;
	padding: 0;
	padding-top: 60px;
}
.x-sidebar .widget{
	text-shadow: none;
}
.x-sidebar .widget ul, .widget ol{
	border: none;
	box-shadow: none;
}
.x-sidebar .widget ul li:hover, .widget ol li:hover{
	background-color: transparent;
}
.entry-footer a{color: #FFF;}
1 Like

Hi There,

I understand that you’re after the Ethos blog layout while using the Integrity stack. Regretfully this would require a custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

I figured it out…
Everything was based on css.
I just asked for the format, but I figured out the bug because the previous developer wrote another class at the way bottom that overwritten in the section. I was able to get the image to the left and text to the right.
oi, some kind of support.

Glad you sorted things out,

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.