This forum post can be a place to share thoughts and experiences or to discuss the alek 2.0 theme in general.
Here is a showcase if you want other users let know how you integrate alek 2.0 theme into your own website.
As I am building my first Community Site (the owner have not yet an idea what kind of community to target)
you may have a look at e-kontakt.at .

Also I cannot figure out how to move the Logo floating to the extreme left of the header.

Any suggestion are very much appreciate

Comments

chadchandler’s picture

Fantastic Idea. To get the logo to the "extreme" left of the header? Not sure what you mean, perhaps draw it in photoshop or gimp and post what you're trying to do.

Wolfflow’s picture

Hallo, Thanks Prodigy for your Acks.
Sorry for my very late answer but I wanted to have a little more clue concerning the style.css of Alek 2.0 and
about Theme Templates. As you can see the overall Analise of this Theme take some time. Appreciate your
offer of help but maybe I formulate the first Post a bit confusing. As you can see on Drupal Themes Developing a lot of pre-online-themes-testing-site
is done, and will further be much better.

Thanks
;-)

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

LisaW-1’s picture

sorry

Wolfflow’s picture

Hi,

Here my first patch for the Theme Alek 2.0 for Drupal 6.1.

It toke me some efforts to find out what not worked with the "primary links" on a Drupal 6.x
but finally i found a solution.

    Change in styles.css file
    ( You will find this in /your drupal istall folder/ site / themes / alek_2_0)
  • Open styles.css file with a txt editor and find following lines:

    notice that the code below might not look exactly formatted like here

        
        /* navigation links */
    
        #navigation{position:absolute;right:0;top:0px;}
        #navigation li a{background:#fff url(img/menu.gif) no-repeat 0
        100%;color:#2d373f;display:block;font-weight:700;margin:0
        3px;padding:5px 0;text-align:center;width:90px;}
        #navigation li.active a,#navigation li a:hover{color:#2b76af;padding-top:12px;text-decoration:none;}
        #navigation li{float:left; list-style:none;}
    
        

    delete.

  • Insert this in place of the deleted code:
        
        /*---Start -------primary links---located in header----------*/
        #menu
        {
      position: 0 0 0 0;
      display:block;
      color:#fff;
      font-size:1.2em;
      font-weight:normal;
      height:20px;
      line-height:1.3em;
      letter-spacing:1px;
      margin: 0;
      padding:0;
      white-space:nowrap;
    }
    
    #menu ul
    {
      float:right;
      list-style:none;
      list-style-image:none;
      margin:0;
      padding:0;
    }
    
    #menu li
    {
      background:#fff url(img/menu.gif) no-repeat 0 100%;
      margin:0;
      padding:0;
    }
    
    #menu li a
    {
      border:medium none;
      color:#ccc;
      font-weight:normal;
      padding:1px 10px;
      text-decoration:none;
    }
    
    #menu li a:hover, #menu li a.active
    {
      background:#fff url(img/menua.gif) no-repeat 0 100%;
      border:medium none;
      border-left:0px solid #ddd;
      border-right:0px solid #ddd;
      color:#33C6F4;
      padding-left:9px;
      padding-right:9px;
    }
    
    /*-- END --------primary links---located in header----------*/
    
    

    save the file and upload to your test Site or your Host overwriting the old one.

  • Adjust the menu.gif like your wish, i have just copied for further change as menua.gif
    in the img folder of the Alek_2_0 Theme.
  • Now you have to edit the page.tpl.php file and find following lines:
      <div id="navigation">
            <?php print theme('menu_links', $primary_links) ?> 
          </div>	
          
          

    change the id="navigation" in id="menu"

  • That's It enjoy

Back to Drupal as Newby Second Level. There is nothing better then Drupal.
First Production Site Theme Developing Test Site

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

zilla’s picture

so i did the cut and paste, and changed the id=navigation to id=menu - but still no primary links! any other ideas?

Wolfflow’s picture

Tell me more ...

I used it on my Alek 2.0 Test Site Alek 2.0 Themed Site, maybe you may adjust following:

/* header span*/

#header {
  width:100%;       <------------------I
  height:180px;      <------------------I
}

#headerInner {
  position: relative;
  width: 100%;  /* original set 950px; */
  height:180px;
  margin: 0 auto;
}

/* logo, text logo, and slogan */

#siteName {
  font-family:"trebuchet ms", helvetica, sans-serif ;
  margin:100px 0 0 0;
  color: #fff;
  font-size: 38px;
  text-transform: none; /* options = lowercase */
  display: inline;
  line-height: 30px;
}

#siteSlogan {  
  font-family:"trebuchet ms", helvetica, sans-serif;
  float:left;
  margin:40px 0 0 10px;   <-------------------------I
  color: #eee;
  font-size: 32px;
  white-space:nowrap;
  text-transform: lowercase;
}

#siteName a {
  color:#fff;
  text-decoration:bold;
}

#siteName a:hover {
  color:#FAA604;
  text-decoration:bold;
}

#logo {
  float: left;
  margin:2px 2px 2px 2px;     <-----------------------------I
}

#logo img {
  float: left;
  border: 2;
}

#logowrapper {
position: absolute;
}
#logowrapper p{
color:#fff;
float:left;
font-size:1.5em;
height:80px;
line-height:1.3;
padding-left:10px;        <-------------------------------I
padding-top:10px;        <-------------------------------I
width:210px;
}
#logowrapper p a{
color:#fff;
text-decoration:underline;
}

It's a guess, if you tell me the link i can have a look at ;-)

Cheers

Back to Drupal as Newby Second Level. There is nothing better then Drupal.
First Production Site Theme Developing Test Site

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

Winterkind’s picture

This has nothing to do with the css at all. Theming has changed a little, so the primary links are not in the page at all if you look at the source file the browser receives. Fixing is easy:

Replace this code in the page.tpl.php file:
<?php print theme('menu_links', $primary_links) ?> .

With this one
<?php print theme('links', $primary_links) ?>

Or even better (it allows to deactivate the primary links too):

<?php if (isset($primary_links)) : ?>
          <?php print theme('links', $primary_links) ?>
<?php endif; ?>
Wolfflow’s picture

Hi, Winterkind
as I suppose you are relating to D6.x Theme developing. Correct me if I mistake.
The post started when D6 was not issued, so it was relating to D5.x at the beginning.
But anyway i will give your suggestion a try and let you know.
Cheers

P.S. Bist Du Deutsch ? wenn : LG

There is nothing better then Drupal. Please contribute
Drupal Themes Developing

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

Winterkind’s picture

Hi,
I was was revering to zilla's post in the first place, but I thought that your fix was supposed to fix zilla's problem in the first place. Your first post "Patch for alek 2.0 theme for Drupal 6.1" is missing a description what didn't work in the first place.

I made a fresh drupal 6.1 install yesterday with the newest Alek 2.0 6.x-1.x-dev snapshot. Since the primary links didn't show up I checked the Alek template and the bluemarine template, which uses the code quoted above. It seems a little strange, but the working code I posted was already used by the bluemarine template back in drupal 4.7. I couldn't find the right documentation for that function, but it works fine for my setup.

And yes, I'm from Germany. Although I'd rather live in Austria at the moment, since a lot of new snow seems to be coming next week ;)

Cheers
Hendrik

Wolfflow’s picture

Hi again,
Thank you very much for your details. It help me and others to understand better the Alek 2.0 dev. ;-)
I too leave in Austria --> Vienna. In fact I'm Austrian.

Cheers

There is nothing better then Drupal. Please contribute
Alek Theme Developing
Drupal Themes Developing

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

zilla’s picture

thank you for resolving this. i'm actually developing a more customized theme on framework (a theme for d6 called 'framework' - a great skeletal structure of sorts) - not sure that i can get enough change in alek's color theme to handle what i'd like to do - perhaps they'll add color module support one day so users can flip a switch from gray to some other color...

chadchandler’s picture

We should try to get the Tabs that the zen theme uses into the Alek theme. Thats the main thing the Alek theme is missing.

mach5_kel’s picture

For some reason my site only collapses with one custom content node type called "Articles", even though I have lots of custom content types working just fine on the site. Ie, Links, etc.

And to boot, it only does it in IE7 (which we all hate, but people use). I am assuming this is a CSS problem, but I cannot seem to nail it down.

Any advice would be greatly appriciated.

www.bodawellness.ca

an example of a collapsing custom content type node:

http://www.bodawellness.ca/myths-about-acupuncture

Thanks again,
Eric

Wolfflow’s picture

Hi Erik,

I toke a look on your HP. Yes You are right IE is always making Troubles. I use mostly FireFox and really your Visitors
should too. The bugs are 99% in IE(what so ever version!) so the best thing I can suggest you meantime is to
advise your user with something small advise on frontpage (i.e) Please using FireFox you get more out on my HomePage!

have found some issues related with the use of collapsiblock:

http://drupal.org/node/166339
http://drupal.org/node/152860

Cheers

There is nothing better then Drupal. Please contribute
Wolfflow's Blog

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

luckysmack’s picture

Does anyone know what and where to edit to move the black left sidebar (on the right side of the page) to the left side?

Wolfflow’s picture

Hi bigmack83

this is the code you may modify in page.tlp.php page that is in the
Alek Theme folder:


<!-- sidebars -->
      <div id="secondaryContent">
        <?php if ($sidebar_left) { ?>
		      <div id="sidebarLeft">
			      <span id="topspan"></span>
            <div class="sidebarLeft-content">
				      <?php print $sidebar_left ?>
				    </div>
			      <span id="bottomspan"></span>
		      </div>
		    <?php } ?>
        <?php if ($sidebar_right) { ?>
          <div id="sidebarRight">
            <?php print $sidebar_right ?>
          </div>
        <?php } ?>
      </div>
    </div>
  </div>

I'm not proof on PHP but I guess that is sure a start. Look also at

Using Theme Override Functions

Cheers

There is nothing better then Drupal. Please contribute
Wolfflow's Blog

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

LisaW-1’s picture

Love this theme! I'm using 5.x, and have made a few minor changes.

I know it's backwards, but I am now trying to get the (far) right sidebar to display on the screen left, leaving the (middle) left sidebar displaying on the right. That part is working, and I don't care about the sidebars being reversed labeled, I can live with it.

What I can't seem to figure out is how to change the topspan so that the content is between the sidebars. I know I am missing something simple, but can't for the life of me figure it out. Any help would be greatly appreciated.

You can see where I am here:
LINK

here is the relevant code

Style.css

/* secondary content */
	
#secondaryContent {
  float: right;
}

/* begin sidebarLeft */

#sidebarLeft {
width: 230px;
background: #31363E;
float: right;
margin: 0em 1em 0.5em 1em;
color: #B9B9B9;
}

#sidebarLeft .title {
  margin:0;
  padding: 0;
}

.sidebarLeft-content {
padding: 0 15px 0 15px;
text-align: justify;
}

#sidebarLeft span#topspan {
display: block;
height: 60px;
width: 230px;
margin: 0;
padding: 0;
background: #fff url(img/top.gif) no-repeat top left;
}
#sidebarLeft span#bottomspan {
display: block;
height: 60px;
width: 230px;
margin: 0;
padding: 0;
background: #fff url(img/bottom.gif) no-repeat top left;
}
	
#sidebarRight {
  width: 13em;
  float: left;
  margin: 4.5em 0em 0.5em 0.5em;
}
	
#sidebarRight .title {
  margin:0;  
  background: url('img/leafh2.gif') top left no-repeat;
  padding:0 0 3px 18px;   
  border-bottom:1px solid #e9e6d8; 
}

#sidebarRight h3 {
  border:none;
}

page.tpl.php:

      <!-- sidebars -->
      <div id="secondaryContent">
        <?php if ($sidebar_left) { ?>
		      <div id="sidebarLeft">
			      <span id="topspan"></span>
            <div class="sidebarLeft-content">
				      <?php print $sidebar_left ?>
				    </div>
			      <span id="bottomspan"></span>
		      </div>
		    <?php } ?>
        <?php if ($sidebar_right) { ?>
          <div id="sidebarRight">
            <?php print $sidebar_right ?>
          </div>
        <?php } ?>
      </div>
    </div>
  </div>
LisaW-1’s picture

I had to move the sidebar calls above the main content call in the page.tpl.php.

Then had to give the column div (in the main content) fixed left and right margins.

That last little bit is hosing the dynamic margins in the page.tpl.php:

<div id="columns" style="width: <?php print alek_2_0_get_primaryContent_width( $sidebar_left, $sidebar_right) ?>%;">

If you make the browser window smaller than 2 x the sum of the 2 sidebars, the black sidebar on the screen right bleeds into the content - or the content bleeds into it. Not sure which.

Input/advice welcomed lol

LisaW-1’s picture

The changes I made to move the sidebars around worked ok in Firefox, not at all in Safari, and weirded out in IE.

Wolfflow’s picture

Hi Lisa

Just have see your posting, wanted to see your LINK but maybe you forgot to insert one.
Very interesting what you did. Yes in fact, I also use Safari but surely not IE, (I know we must take care of it), Lt me Know!!
Cheers

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

chadchandler’s picture

Anyone interested in getting some nicer tabs into this theme? i.e the tabs from the zen theme?