Socialengine Tutorial – Disable default css from being loaded

I’ve been working on creating a custom homepage which uses twitter bootstrap however I’ve found the default css being generated by the socialengine is interferring with the bootstrap css.

In order to stop socialengine from adding in the default theme css files head to

Application > Modules > Core > Layouts > Scripts > default-simple.tpl

This default simple is what is loaded on every page and then injected with the page’s content. However I didn’t want any of that to load on my landing page so I’ve done the following;

(In this file look for line 75 where the ‘linking’ of css files begins and I’ve wrapped it in an if statement which says if the current url string == the default home page (e.g. /) then don’t bother loading the rest of the php)

<?php // LINK/STYLES ?>
  <?php
  $uri = Zend_Controller_Front::getInstance()->getRequest()->getRequestUri();
  if(trim($uri, '/') !=  trim($this->baseUrl(), '/')):
  ?>
  <?php
    $this->headLink(array(
      'rel' => 'favicon',
      'href' => ( isset($this->layout()->favicon)
        ? $this->baseUrl() . $this->layout()->favicon
        : '/favicon.ico' ),
      'type' => 'image/x-icon'),
      'PREPEND');
    $themes = array();
    if( !empty($this->layout()->themes) ) {
      $themes = $this->layout()->themes;
    } else {
      $themes = array('default');
    }
    foreach( $themes as $theme ) {
      $this->headLink()
        ->prependStylesheet($this->baseUrl().'/application/css.php?request=application/themes/'.$theme.'/theme.css');
    }
    // Process
    foreach( $this->headLink()->getContainer() as $dat ) {
      if( !empty($dat->href) ) {
        if( false === strpos($dat->href, '?') ) {
          $dat->href .= '?c=' . $counter;
        } else {
          $dat->href .= '&c=' . $counter;
        }
      }
    }
  ?>
 
  <?php endif; ?>

Hope this helps 🙂

SocialEngine Tutorial – Creating your own custom theme and styles with css

Carrying on from the initial post about customisation I thought I’d add a quick overview of how on earth you go about customising your SocialEngine site with your own custom css.

One thing i would suggest about editing the SocialEngine platform is that if you can, do it through the admin interface as much as possible. The reason I say this is because as the engine is designed, quite rightly, to function in a multitude of different styles and formations it is intrinsically linked to a database backend which keeps a note of themes available and modules/widget positions etc.

So first off head to the theme editor;
Log into your network as an admin > Admin > Layout > Theme Editor

I would suggest that you hit ‘Clone’ and clone an existing theme which will bring you to the next screen;

Now you’ll be taken back to the theme editor, MAKE SURE YOU ACTIVATE YOUR THEME! Otherwise you’ll be editing the original theme. To activate just hit ‘Activate Theme’ which will then allow you to edit your theme.

Now themes are made up of two items; constant.css and theme.css.

Constants deals with all the constants which are generic for the site for example, site width will be specified in there and body background etc. This is where you’re most likely to edit items which will effect most of the site.

Inside the theme.css you’ll be able to edit other stuff like menu bars and headings etc but you will also be able to specify your own styles for your own modules or widgets that you create.

After you’ve finished editing your theme hit the save button and you’re ready to rock and roll to see what you’ve destroyed on the site 🙂

The easiest way to know what styles to edit is to use some browser debugging such as firebug (for firefox) or chrome developer tools (google chrome). Enjoy!