Category Blog Template Layout Issues

[Desteria]

Good Morning,

I am having issues in utilizing the category blog template with my current template (or at least I think it's the coding of the template in use). This is the current layout of the page in question - http://www.theworldofroleplay.com/thefa ... ayout=blog

This is how I'd like it to look - http://www.theworldofroleplay.com/charsdead.html

I'm having trouble getting the images to link directly to the article, so I don't have to have the title to link to the article. Also, the setup isn't right... I'd like it to just list the intro for all entries, not have the "More Articles..." and link list below.

My current blog layout settings that I think apply are:
If a field is left blank, global settings will be used.
# Leading Articles - 0
# Intro Articles - 100
# Columns - 2
# Links - 0
Multi Column Order - Global


The template itself I already had to edit - blog_item.php because this template wasn't pulling in the intro images at all to begin with. Any help anyone can provide would be greatly appreciated!

[Desteria]

Well I was able to figure out how to get the layout right, but now I'd like to just make the font of the title/links a bit smaller so they're not so huge. I've adjusted the <h2> tag in blog_item.php but it doesn't seem to be making any change. Is there another place where I need to adjust the coding that's overriding it?

[Desteria]

No one has any clue?

My images are also all wonky when I set them to display just the intro images & the title link. The alignment is off in both my current template, and default template when I test it and I just can't figure it http://www.theworldofroleplay.com/thefa ... ayout=blog

Anyone have any ideas?

[jbuzzeo]

What do you mean when you say:

I've adjusted the <h2> tag in blog_item.php

have you changed it to an <h3>? Added a class name? Added inline styling?

Best practice would dictate that you use whatever <Hn> best fits the structure of the page and change the way it looks with either css or inline styling.

Add a class="title" to your heading tag and then in your css you can apply whatever styiling you want with

Code: Select all

h2 .title {
     //enter your styling attributes here
}

if you feel like your styles are not being applied, most modern browsers have built in developers tools that can help you figure out why. In Chrome you can right click on your title and select "Inspect Element" and you'll see all the styles that are applied to it as well as which ones are being overridden and which ones are actually active. IE and Firefox have the option too, but I don't remember what they're called.

[Desteria]

Thank you for your response! I tried what you said, but it doesn't seem to be making a change.

What I've done in blog_item.php is adjust the default <h2> to various options including <h1> <h2 class='content heading'> <h3> and nothing seems to take when I refresh. I have chrome, but I'm not sure what I'm looking for when I use "inspect element". All I know, is it's not showing my changes on the display even though the text looks changed using the inspect element.

This is what my blog_item.php looks like:

Code: Select all

<?php
/**
 * @package		Joomla.Site
 * @subpackage	Templates.beez5
 * @copyright	Copyright (C) 2005 - 2009 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
$params =& $this->item->params;
$images = json_decode($this->item->images);
$app = JFactory::getApplication();
$templateparams =$app->getTemplate(true)->params;
$canEdit	= $this->item->params->get('access-edit');

if ($templateparams->get('html5')!=1)
{
	require JPATH_BASE.'/components/com_content/views/category/tmpl/blog_item.php';
	//evtl. ersetzen durch JPATH_COMPONENT.'/views/...'
} else {
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
?>


<?php if ($this->item->state == 0 || strtotime($this->item->publish_up) > strtotime(JFactory::getDate())) : ?>
<div class="system-unpublished">
<?php endif; ?>
<?php if ($params->get('show_title')) : ?>
	h2 .title { class="contentheading">}
		<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
			<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language)); ?>">
			<?php echo $this->escape($this->item->title); ?></a>
		<?php else : ?>
			<?php echo $this->escape($this->item->title); ?>
		<?php endif; ?>
	
<?php endif; ?>

<?php if ($params->get('show_print_icon') || $params->get('show_email_icon') || $canEdit) : ?>
	<ul class="actions">
		<?php if ($params->get('show_print_icon')) : ?>
		<li class="print-icon">
			<?php echo JHtml::_('icon.print_popup', $this->item, $params); ?>
		</li>
		<?php endif; ?>
		<?php if ($params->get('show_email_icon')) : ?>
		<li class="email-icon">
			<?php echo JHtml::_('icon.email', $this->item, $params); ?>
		</li>
		<?php endif; ?>
		<?php if ($canEdit) : ?>
		<li class="edit-icon">
			<?php echo JHtml::_('icon.edit', $this->item, $params); ?>
		</li>
		<?php endif; ?>
	</ul>
<?php endif; ?>

<?php if (!$params->get('show_intro')) : ?>
	<?php echo $this->item->event->afterDisplayTitle; ?>
<?php endif; ?>

<?php echo $this->item->event->beforeDisplayContent; ?>

<?php // to do not that elegant would be nice to group the params ?>

<?php if (($params->get('show_author')) or ($params->get('show_category')) or ($params->get('show_create_date')) or ($params->get('show_modify_date')) or ($params->get('show_publish_date')) or ($params->get('show_parent_category')) or ($params->get('show_hits'))) : ?>
 <dl class="article-info">
 <dt class="article-info-term"><?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?></dt>
<?php endif; ?>
<?php if ($params->get('show_parent_category') && $this->item->parent_id != 1) : ?>
		<dd class="parent-category-name">
			<?php $title = $this->escape($this->item->parent_title);
				$url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_id)) . '">' . $title . '</a>'; ?>
			<?php if ($params->get('link_parent_category')) : ?>
				<?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
				<?php else : ?>
				<?php echo JText::sprintf('COM_CONTENT_PARENT', $title); ?>
			<?php endif; ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_category')) : ?>
		<dd class="category-name">
			<?php $title = $this->escape($this->item->category_title);
					$url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catid)) . '">' . $title . '</a>'; ?>
			<?php if ($params->get('link_category')) : ?>
				<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $url); ?>
				<?php else : ?>
				<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $title); ?>
			<?php endif; ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_create_date')) : ?>
		<dd class="create">
		<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC2'))); ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_modify_date')) : ?>
		<dd class="modified">
		<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC2'))); ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_publish_date')) : ?>
		<dd class="published">
		<?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC2'))); ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
	<dd class="createdby">
		<?php $author =  $this->item->author; ?>
		<?php $author = ($this->item->created_by_alias ? $this->item->created_by_alias : $author);?>

			<?php if (!empty($this->item->contactid ) &&  $params->get('link_author') == true):?>
				<?php 	echo JText::sprintf('COM_CONTENT_WRITTEN_BY' ,
				 JHtml::_('link', JRoute::_('index.php?option=com_contact&view=contact&id='.$this->item->contactid), $author)); ?>

			<?php else :?>
				<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
			<?php endif; ?>
	</dd>
<?php endif; ?>
<?php if ($params->get('show_hits')) : ?>
		<dd class="hits">
		<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
		</dd>
<?php endif; ?>
<?php if (($params->get('show_author')) or ($params->get('show_category')) or ($params->get('show_create_date')) or ($params->get('show_modify_date')) or ($params->get('show_publish_date')) or ($params->get('show_parent_category')) or ($params->get('show_hits'))) :?>
 	</dl>
<?php endif; ?>
        <a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>">

    <?php
        $images = json_decode($item->images);
        if (isset($images->image_intro) and !empty($images->image_intro)) {
            $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro;
            $class = (htmlspecialchars($imgfloat) != 'none') ? ' class="size-auto align-'.htmlspecialchars($imgfloat).'"' : ' class="size-auto"';
            $title = ($images->image_intro_caption) ? ' title="'.htmlspecialchars($images->image_intro_caption).'"' : '';
            echo '<img'.$class.$title.' src="'.htmlspecialchars($images->image_intro).'" alt="'.htmlspecialchars($images->image_intro_alt).'" />';
        }

        echo $this->item->introtext;

    ?>

    </a>
<?php if ($params->get('show_readmore') && $this->item->readmore) :
	if ($params->get('access-view')) :
		$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));
	else :
		$menu = JFactory::getApplication()->getMenu();
		$active = $menu->getActive();
		$itemId = $active->id;
		$link1 = JRoute::_('index.php?option=com_users&view=login&Itemid=' . $itemId);
		$returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));
		$link = new JURI($link1);
		$link->setVar('return', base64_encode(urlencode($returnURL)));
	endif;
?>
		<p class="readmore">
				<a href="<?php echo $link; ?>">
					<?php if (!$params->get('access-view')) :
						echo JText::_('COM_CONTENT_REGISTER_TO_READ_MORE');
					elseif ($readmore = $this->item->alternative_readmore) :
						echo $readmore;
						if ($params->get('show_readmore_title', 0) != 0) :
						    echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
						endif;
					elseif ($params->get('show_readmore_title', 0) == 0) :
						echo JText::sprintf('COM_CONTENT_READ_MORE_TITLE');
					else :
						echo JText::_('COM_CONTENT_READ_MORE');
						echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
					endif; ?></a>
		</p>
<?php endif; ?>

<?php if ($this->item->state == 0 || strtotime($this->item->publish_up) > strtotime(JFactory::getDate())) : ?>
</div>
<?php endif; ?>

<div class="item-separator"></div>
<?php echo $this->item->event->afterDisplayContent; ?>

<?php } ?>

[jbuzzeo]

changing the tag to <h2 class='content heading'> is not going to do anything by itself. Also every space in the class element is treated as a new value, so in the example above you giving the <h2> the classes 'content' AND 'heading' you want to either use a hyphen 'content-heading' or use a one word description.

That being said, when you all a class to an element, what you're really doing is telling the browser to go to the css file, find the definition for this class and apply it to everything inside.

See my first answer for how to edit both files so that they will work together.

[Desteria]

Thank you so much. I think I'm getting the idea. I see what the element is pointing to that might be overriding it and I think I figured out where it is to work as I was able to make the font size smaller I think. I'll tinker around a bit more and see if I can figure out the sizing.

Any clue if this has to do with the image alignment issue that's going on with that page?

[jbuzzeo]

I'm assuming that you want the images to be centered under their titles. If so, they're already inside a div with the class 'img-intro-none and this class doesn't appear to have a definition in your css file, but that's ok. try adding this to your css

Code: Select all

.img-intro-none {
    text-align: center;
}

[Desteria]

Just added that, but doesn't seem to be helping the issue.

What I'm referring to actually is it's supposed to be set to 2 columns, but right around the 3rd row the images start bunching up toward the right and overlapping if I use more than 2 columns. It does this in both the current template, and the default Beez template.

[jbuzzeo]

ok, I see what you mean, and I think I see the problem. I'm not sure how your output is being generated but it not well formed.

Code: Select all

<div class="items-row cols-2 row-2">

should be:

Code: Select all

<div class="items-row cols-3 row-2">

the next div is good "item column-1", but where you should have "item column-2" and "item column-3" your creating a new 2 column container again I don't know what you're using to create the output, but you need to remove the container and change the next two items from "column-1" and "column-2" to "column-2" and "column-3"

[Desteria]

Yeah I'm starting to realize this template isn't the best built it would appear.

Which file would I find this line in to fix? I don't see it in the blog_item.php file.

[jbuzzeo]

Without knowing your template and the way your site is set up, that not really a question I can answer.

It could be in a php file that's building the page somewhere or it might be a setting for the individual blog post that's causing the problem. You're going to need to do some digging to figure it out or hire a developer to do the digging for you.

[Desteria]

I figured it out... It was actually an article itself that was messing up the alignment. There was a bunch of extra <div> codings in it.

Thank you for all your help jbuzzeo!

[jbuzzeo]

Excellent! Glad you found it