CiviCRM Community Forums (archive)

I just installed Joomla and CiviCRM (I'm new to both).  I created a custom template for my Joomla site as seen in my attached photo of my homepage.  I have created a test event.  What I'd like to know how to do, is to have my next 2-3 events show up on the Events section on my homepage, and when clicked on, go to the details of that event.  Also, if a user clicks on the Events Tab at the top, go to a listing of all events.  Does CiviCRM display events in a calendar format, or just a listing?

Thanks!!

ok, that looks fine for the Events page, but how do I get the next 2-3 event titles to show up on my homepage?  also, where would I get the link for where my Events tab should link to to display all my events like the page you showed me?

thanks

Ok, when using the link from clicking on the globe, and if this is the link I'm suppossed to use in my page, it appears that CiviCRM generates invalid code.  It has <link> tags that point to css files in the body of the code.  There is also a ton of javascript includes in the body.  Is this correct?

I'm not sure about line numbers, but here is the code that gets rendered when I create an event:
<div id="content_joomla" >
                   
<div id="crm-container" lang="en" xml:lang="en">
   

    <link rel="stylesheet" href="/joomla15/administrator/components/com_civicrm/civicrm/css/joomla_frontend.css" type="text/css" />
       
            <link rel="stylesheet" href="/joomla15/administrator/components/com_civicrm/civicrm/css/civicrm.css" type="text/css" />
   
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/jquery.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/jquery-ui.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/themes/smoothness/jquery-ui.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/flexigrid.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/flexigrid.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.autocomplete.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/jquery.autocomplete.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/tree_component.min.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/css.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/tree_component.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.menu.pack.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.dimensions.js"></script>
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/menu.css);</style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.chainedSelects.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.treeview.min.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.bgiframe.pack.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.contextMenu.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.tableHeader.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.tablednd.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/checkboxselect.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.textarearesizer.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.progressbar.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.form.js"></script>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.tokeninput.js"></script>

<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/css/token-input-facebook.css);></style>

<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/plugins/jquery.toolTip.js"></script>

<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/css/skins/aqua/theme.css);</style>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/js/calendar.js"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/js/lang/calendar-lang.php?en_GB"></script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/js/calendar-setup.js"></script>

<script type="text/javascript">var cj = jQuery.noConflict(); $ = cj;</script>

<script type="text/javascript">

cj( function( ) {
    var funVariable = 'bind';
   
       
    var currentId  = null;
    var hideAction = false;
   
     // Hiding action menu while clicking outside
    cj(document).click(function( ) {
     if ( !hideAction ) {
           cj(".btn-slide").each(function( ) {
                 cj(this).find("ul").hide( );
            });
        }
        hideAction = false;
    });
 
    eval('cj(".btn-slide").'+ funVariable +'( "click", function( ) {currentId = cj(this).find("ul").attr("id");cj(".btn-slide").each(function( ) {if ( currentId == cj(this).find("ul").attr("id") ) {cj(this).find("ul").show( );hideAction = true;} else {cj(this).find("ul").hide( );}});});');

});
</script>

    <div id="menu-container" style="display:none;">
    <ul id="civicrm-menu">
        <li id="crm-qsearch" class="menumain">
            <form action="/joomla15/index.php?option=com_civicrm&task=civicrm/contact/search/basic&" name="search_block" id="id_search_block" method="post" onsubmit="getSearchURLValue( );">
                <input type="text" class="form-text" id="sort_name" name="sort_name" style="width: 12em;"/>
                <input type="hidden" id="sort_contact_id" value="">
                <input type="submit" value="Go" name="_qf_Basic_refresh" class="form-submit default" style="display: none;"/>

            </form>
        </li>
       
    </ul>
</div>

<script type="text/javascript">
function getSearchURLValue( )
{
    var contactId =  cj( '#sort_contact_id' ).val();
    if ( ! contactId || isNaN( contactId ) ) {
        var sortValue = cj( '#sort_name' ).val();
        if ( sortValue ) {
            //using xmlhttprequest check if there is only one contact and redirect to view page
            var dataUrl = "/joomla15/index.php?option=com_civicrm&task=civicrm/ajax/contact&name=" + sortValue;

            var response = cj.ajax({
                url: dataUrl,
                async: false
                }).responseText;

            contactId = response;
        }
    }
   
    if ( contactId ) {
        var url = "/joomla15/index.php?option=com_civicrm&task=civicrm/contact/view&reset=1&cid=" + contactId;
        document.getElementById('id_search_block').action = url;
    }
}

/* Need to fix this properly*/
cj( function() {
    cj("#admin-menu").find("li :contains('CiviCRM')").click(function() {
        cj("#civicrm-menu").toggle();
        return false;
    });

    var contactUrl = "/joomla15/index.php?option=com_civicrm&task=civicrm/ajax/contactlist&context=navigation";

    cj( '#sort_name' ).autocomplete( contactUrl, {
        width: 200,
        selectFirst: false,
        matchContains: true
    }).result(function(event, data, formatted) {
        cj("#sort_contact_id").val(data[1]);
    });   
});

var framework = "Joomla";
if( framework != 'Joomla') {
cj('body').prepend( cj("#menu-container").html() );

//Track Scrolling
cj(window).scroll( function () {
   var scroll = document.documentElement.scrollTop || document.body.scrollTop;
   cj('#civicrm-menu').css({top: "scroll", position: "fixed", top: "0px"});
   cj('div.sticky-header').css({ 'top' : "23px", position: "fixed" });
});
} else {
   cj('div#toolbar-box div.m').html(cj("#menu-container").html());
   cj('#civicrm-menu').ready( function(){
cj('.outerbox').css({ 'margin-top': '6px'});
cj('#root-menu-div .menu-ul li').css({ 'padding-bottom' : '2px', 'margin-top' : '2px' });
cj('img.menu-item-arrow').css({ 'top' : '4px' });
});
}
var resourceBase   = "/joomla15/administrator/components/com_civicrm/civicrm/";
cj('#civicrm-menu').menu( {arrowSrc: resourceBase + 'packages/jquery/css/images/arrow.png'} );
</script>
<script type="text/javascript" src="/joomla15/administrator/components/com_civicrm/civicrm/js/Common.js"></script>

<table border="0" cellpadding="0" cellspacing="0" id="content">
  <tr>
    <td valign="top">

   
            <h1 class="title">Upcoming Events</h1>
     
<div id="printer-friendly"><a href="/joomla15/index.php?option=com_civicrm&amp;task=civicrm/event/ical&amp;option=com_civicrm&amp;task=civicrm/event/ical&amp;page=1&amp;html=1&amp;snippet=2" title="Printer-friendly view of this page."><img src="/joomla15/administrator/components/com_civicrm/civicrm/i/print-icon.png" alt="Printer-friendly view of this page." /></a></div>


    <div class="spacer"></div>

   
   

    <!-- .tpl file invoked: CRM\Event\Page\ICalendar.tpl. Call via form.tpl if we have a form in the page. -->
            <table>
<tr class="columnheader">
<th>Event</th>

<th>&nbsp;</th>
<th>When</th>
<th>Location</th>
<th>Category</th>
<th>Email</th>
</tr>
<tr class="odd-row ">
    <td><a href="/joomla15/index.php?option=com_civicrm&amp;task=civicrm/event/info&amp;reset=1&amp;id=1" title="read more"><strong>Test Event</strong></a></td>
    <td>Testing CiviCRM Events (<a href="/joomla15/index.php?option=com_civicrm&amp;task=civicrm/event/info&amp;reset=1&amp;id=1" title="details...">read more...</a>)</td>

    <td class="nowrap">
        October 25th, 2009  7:00 PM<br /><em>through</em><br />October 28th, 2009  8:00 PM            </td>
    <td>563 Randall Circle
Hummelstown, PA 17036
United States
</td>
    <td>Fundraiser</td>
    <td><a href="mailto:jroscoe10@comcast.net">jroscoe10@comcast.net</a></td>
</tr>

</table>   
   
    </td>

  </tr>
</table>


It's incorrect because you have
<link rel="stylesheet" href="/joomla15/administrator/components/com_civicrm/civicrm/css/joomla_frontend.css" type="text/css" />
<style type="text/css">@import url(/joomla15/administrator/components/com_civicrm/civicrm/packages/jquery/themes/smoothness/jquery-ui.css);</style>
in the middle of the body tag.  This is not valid code.