Help re-build my theme

blue22deep

Hi again

Have had a look at the links provided now..

The first one i didn't know, but the last two i knew, and maybe what i seek is in there, i just don't understand it, cause it has bin a long time since i last tweaked around DF Confused

The style.css i'll get around, but how to get different colors on the topics in my main menu, i don't know how, i'm not a shark at php, and the new code does not make sence to me Sad

This is how i got around coloring the menu in 9.1.2.1

PHP:

<?php
function themesidebox($title, $content, $bid=0) {
	global $cpgtpl, $themeblockside, $CPG_SESS;
	
/*	  if ($bid==1) {
    $colour = '#fb0030';
  } else if ($bid==2) {
    $colour = '#f99800';
  } else if ($bid==3) {
    $colour = '#f7fa27';
  } else if ($bid==4) {
    $colour = '#60c802';
  } else if ($bid==7) {
    $colour = '#0098f6';
  } else if ($bid==6) {
    $colour = '#a8bcbb';
  } */
	
	if ($bid==1) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-red.gif';
	}
  elseif ($bid==2) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-orange.gif';
	}
  elseif ($bid==4) {
  $blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-yellow.gif';
  }
  elseif ($bid==7) {
  $blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-green.gif';
  }
  elseif ($bid==10) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-blue.gif';
	}
  elseif ($bid==13) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-indigo.gif';
	}
  elseif ($bid) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-purple.gif';
	}

But the function themesidebox is gone now, in the new 9.2.0RC0, and i have no clue what so ever, where to go look for the the topics in the main menu Sad

Is there a guide somewhere, on "how to" tweak the new theme ?

NanoCaiordo

you are able to, and always been able to, achieve the same result by working on your header.html

blue22deep

Thanks Nano

I wasn't aware of that, i'll have a look at it right away Smile

Thanks again

blue22deep

Hi again

Now i've tryed for some time now to get this to work, but i can't figure out why i doesn't Confused

PHP:

<?php
	$cpgtpl->assign_vars(array(
		'IMPORTANT_MESSAGE' => $message,
		'S_BLOCKHEADCOLOR'	=> $blockheadcolor,
		'S_TEXTDIR'	 => _TEXT_DIR,
		'S_LANGCODE'	=> _BROWSER_LANGCODE,
		'S_HEADER_TAGS' => $header,
		'S_LEFTBLOCKS'  => ($Blocks->showblocks & 1),
		'S_RIGHTBLOCKS' => ($Blocks->showblocks & 2),
		'I18N'		  => 'enctype="multipart/form-data" accept-charset="utf-8"'
	));
	if (!$home) {
		if (defined('ADMIN_PAGES') && is_admin() && !(isset($_GET['op']) && $_GET['op'] == 'logout')) {
			require_once('includes/classes/cpg_adminmenu.php');
			$adminmenuitems = $CLASS['adminmenu']->display('all', 'jsmenu');
			$admincssmenuitems = ($MAIN_CFG['global']['admingraphic'] & 4);
		}
	}

  if (leftblock.S_bid==1) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-red.gif';
	}
  elseif (leftblock.S_bid==2) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-orange.gif';
	}
  elseif (leftblock.S_bid==4) {
  $blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-yellow.gif';
  }
  elseif (leftblock.S_bid==7) {
  $blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-green.gif';
  }
  elseif (leftblock.S_bid==10) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-blue.gif';
	}
  elseif (leftblock.S_bid==13) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-indigo.gif';
	}
  elseif (leftblock.S_bid) {
	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-purple.gif';
	}

If i do as Nano wrote, i get a blank screen, my site does not start...

It only starts with ( and ) around leftblock.S_bid and without endif...

Have i don it completely wrong, or is it just not the right place, or is there something else ??

NanoCaiordo

What i meant is header.html located in themes/yourtheme/template

Code::

# find 
<!-- BEGIN leftblock -->
# the above is where the loop starts

# then use the following where you think its appropriate to
<!-- IF leftblock.S_BID == 1 -->
<img src="path/to/image.jpg" alt="" />
<!-- ELSEIF leftblock.S_BID == 2 -->
<img src="path/to/another_image.jpg" alt="" />
<!-- ENDIF -->

blue22deep

Hi Nano

Thanks for the reply Smile

It just didn't do the trick Sad

I put the coloring of the titelbars of the main menu here

Code::

  <!-- BEGIN leftblock -->
  <div class="blockhead">
    <img alt="{S_TOGGLE}" title="{S_TOGGLE}" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer; float:right;" />
    {leftblock.S_TITLE}
  </div>
  <div class="blockcontent" id="pe{leftblock.S_BID}" {leftblock.S_VISIBLE}>
      {leftblock.S_CONTENT}
  </div>
    <!-- then use the following where you think its appropriate to -->
<!-- IF leftblock.S_BID == 1 -->
<img src="themes/default/images/blockhead-red.gif" alt="" />
<!-- ELSEIF leftblock.S_BID == 2 -->
<img src="themes/default/images/blockhead-orange.gif" alt="" />
<!-- ELSEIF leftblock.S_BID == 4 -->
<img src="themes/default/images/blockhead-yellow.gif" alt="" />
<!-- ELSEIF leftblock.S_BID == 7 -->
<img src="themes/default/images/blockhead-green.gif" alt="" />
<!-- ELSEIF leftblock.S_BID == 10 -->
<img src="themes/default/images/blockhead-blue.gif" alt="" />
<!-- ELSEIF leftblock.S_BID == 13 -->
<img src="themes/default/images/blockhead-indigo.gif" alt="" />
<!-- ELSEIF leftblock.S_BID -->
<img src="themes/default/images/blockhead-purple.gif" alt="" />
<!-- ENDIF -->
  <br/>
  <!-- END leftblock -->

It does bring my colors to the page, but not in the titelbars of the menu Sad

It puts the color-pic above the titelbar, not in it...

You can see the result on www.kosmologinet.dk

Are you sure i don't need to use this var 'S_BLOCKHEADCOLOR' => $blockheadcolor, as i did in 9.1.2.1 ??

NanoCaiordo

in style.css copy "blockhead" to "blockhead1", "blockhead2", but adapt the background image with your own ... blockhead1 is for block id 1, blockhead2 is for block id 2 etc etc

Code::

### replace ###
<!-- BEGIN leftblock -->
  <div class="blockhead">

### with ###
<!-- BEGIN leftblock -->
  <div class="blockhead{leftblock.S_BID}">

I personally dont like this way since it miss an ELSE statement for a default value, but i see that you never used anyway.
However, now you know different ways to play with images, style sheet, and templates in general, try to walk on your own.
If you are not able to adapt your customizations, then post back with your progresses and your questions.

P.S.: delete themesidebox() functions it doesn't exists anymore, anything you try to do within the function will be totally ignored by the template engine.

blue22deep

Hi again Nano

And thanks for the reply Smile

Regarding the ELSE statement, if you look back at the first code, you'll see that i have in the last lines, code that gives the header a standard color, if not given a specific color..

PHP:

  elseif ($bid) {	$blockheadcolor = 'themes/'.$CPG_SESS['theme'].'/images/blockhead-purple.gif';

But i guess, if i can't use an ELSE statement to give a standard color, the easiest way is to replace the standard pic ??

Just for the record, i use only files from 9.2.0RC0, no old files from 9.1.2.1, so themesidebox() is long gone Wink

NanoCaiordo

php.net/elseif
php.net/else

blue22deep

NanoCaiordo wrote:

http://php.net/elseif
php.net/else

Well, i'm not sure whether what i did under 9.1.2.1 should work at all when reading the links you supplyed Confused

But i got it working tweaking style.css, but it's very not a good way to do it, i then need to declare every single block that could ever pop up in the left side Shocked

There must be a way like the one used under 9.1.2.1, where i declare a variable, and DF then gets the picture according to leftblock.S_BID, but i'm not sure where to put the code, since themeblockside is gone now, and i don't know what took its place..

NanoCaiordo

blue22deep wrote:

There must be a way like the one used under 9.1.2.1

Yes I've posted already, you only need to understand where to use it.

blue22deep

Hi again

Yep, that's exactly my problem Confused

Well, that i just can't figure out, but i found some solutions, that can do the trick, coloring the headers in the menu, in one way or the other..

The first one does not color the entire header, but the style.css don't grow that much..

[img]http://img182.imageshack.us/my.php?image=menuheadercoloringsmallho3.jpg[/img]

This is style.css

Code::

.blockhead {
  color: #000;
  font-size: 10px;
  font-weight: bold;
  height: 14px;
  width: 154px;
  border: 1px solid #ffffff;
  padding: 3px;
  vertical-align: middle;
  background: url(../images/blockhead-purple.gif);
}

.blockheadcolor1 {
  height: 100%;
  background: url(../images/blockhead-red.gif);
}

.blockheadcolor2 {
  height: 100%;
  background: url(../images/blockhead-orange.gif);
}

.blockheadcolor4 {
  height: 100%;
  background: url(../images/blockhead-yellow.gif);
}

.blockheadcolor7 {
  height: 100%;
  background: url(../images/blockhead-green.gif);
}

.blockheadcolor10 {
  height: 100%;
  background: url(../images/blockhead-blue.gif);
}

.blockheadcolor13 {
  height: 100%;
  background: url(../images/blockhead-indigo.gif);
}

The first one, .blockhead gives the standard color for the header, and defines the text aso. for all the headers, so don't mess that one up, it's also the orig one i style.css, you just need to change the background picture to the standard one you want.

If you need more different colors than i, 6 and a standard, you need to add more .blockheadcolor## to you style.css

The number for the .blockheadcolor##, you get from your MySQL database, it's the Blocks field.

In your header.html under your theme folder, you need to do this.. look for <div class="blockhead"> in header.html in the theme folder

The 1. line is the orig one, and the one that gives the standard color, the 2. one is the IF selector for coloring the other headers, the 3. is the coloring of the first header according to the IF sentence above, line 4. and 5. are the orig ones.

Then you just start over again, just remember that it has to be ELSEIF this time, and then just copy/paste, and change the leftblock.S_BID == ## and blockheadcolor## numbers to the correct ones..

The last section of the code that colors the rest of the headers with the standard color is a little different, the leftblock.S_BID in  don't have a number attached to it, that way it takes care of all the headers that you didn't specify a different color for, and since it's the standard coloring, you don't need to get blockheadcolor## from style.css either for it, and therefor no </div> too Smile

And remember the ENDIF at the end Smile

Code::

  <div class="blockhead">
      <!-- IF leftblock.S_BID == 1 -->
      <div class="blockheadcolor1" >
      <img alt="{S_TOGGLE}" title="{S_TOGGLE}" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer; float:right;"/>
    {leftblock.S_TITLE}
     </div>
      <!-- ELSEIF leftblock.S_BID == 2 -->
      <div class="blockheadcolor2" >
      <img alt="{S_TOGGLE}" title="{S_TOGGLE}" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer; float:right;"/>
    {leftblock.S_TITLE}
     </div>
      <!-- ELSEIF leftblock.S_BID == 4 -->
      <div class="blockheadcolor4" >
      <img alt="{S_TOGGLE}" title="{S_TOGGLE}" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer; float:right;"/>
    {leftblock.S_TITLE}
     </div>
      <!-- ELSEIF leftblock.S_BID == 7 -->
      <div class="blockheadcolor7" >
      <img alt="{S_TOGGLE}" title="{S_TOGGLE}" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer; float:right;"/>
    {leftblock.S_TITLE}
     </div>
      <!-- ELSEIF leftblock.S_BID == 10 -->
      <div class="blockheadcolor10" >
      <img alt="{S_TOGGLE}" title="{S_TOGGLE}" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer; float:right;"/>
    {leftblock.S_TITLE}
     </div>
      <!-- ELSEIF leftblock.S_BID == 13 -->
      <div class="blockheadcolor13" >
      <img alt="{S_TOGGLE}" title="{S_TOGGLE}" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer; float:right;"/>
    {leftblock.S_TITLE}
     </div>
      <!-- ELSEIF leftblock.S_BID -->
      <img alt="{S_TOGGLE}" title="{S_TOGGLE}" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer; float:right;"/>
    {leftblock.S_TITLE}
    <!-- ENDIF -->
  </div>

NanoCaiordo

can just be


but its ok like this Applause

[edit]
if you properly read the code and note just the differences between each block then you might be able to make your header.html lot shorter then this.

just noticed that you have a bug, right after

you are missing the <div> tag
[/edit]

blue22deep

Well

The second solution colors the whole header, but gives a lager style.css, cause every .blockheadercolor## needs to hold all the information for the text aso. too..

[img]http://img185.imageshack.us/my.php?image=menuheadercoloringbiggeko8.jpg[/img]

It goes like this..

In style.css find .blockhead, copy the whole section as many times as you need a different color for your header..

Code::

.blockhead {
  color: #000;
  font-size: 10px;
  font-weight: bold;
  height: 14px;
  width: 154px;
  border: 1px solid #ffffff;
  padding: 3px;
  vertical-align: middle;
  background: url(../images/blockhead-purple.gif);
}

Change .blockhead to .blockheadcolor##, or what ever you wanna call it, and remember to add a number, and ofcourse the main point for all this, the background picture...

In header.html from the theme folder you just need to move one line <div class="blockhead"> in the first shown solution..

It was put here..

Code::

  <!-- BEGIN leftblock -->
      <div class="blockhead">
      <!-- IF leftblock.S_BID == 1 -->

It now needs to be moved to the last section that handles the standard coloring instead, like this..

Code::

      <!-- ELSEIF leftblock.S_BID -->
      <div class="blockhead">

blue22deep

Hi again

Nano is right about the </div> at the last section of the code Embarassed

Thanks

I'll have a look at it, cause i want the changes need to be made as small as possible, so the risk of errors is as small as possible too..

I still would like a variable to take care of the coloring, then you only would need tho have one .blockheader and no .blockheadercoler's, and could erease the background picture from style.css too...

I'm absolutely no shark in programming, so i need to figure out that too when trying to tweak the code Laughing

So it will take me a little, but i will get it Very Happy

Take care