I am writing this post primarily to record my progress, as someone who knows next to nothing about php, in adding certain elements to the interlace themes. I will post all my frustrations and solutions here, and if you have any ideas, that would be very much appreciated!
I like the interlace themes because they are simple and come in four flavors. I wanted to give my users a choice between themes that were similar. However, now I run into problems because they are too simple, I want to add more options.
Namely, I want to add:
- A search box in the header
- User pictures in posts
- User pictures in comments
- Maybe a mission statement or slogan.
By default, you can only choose one out of the four interlace themes. So that I could have all four I:
- created four sub-folders, interlaced1, interlaced2, interlaced3, interlaced4
- copied all the interlaced files into each subfolder. I wasn't sure which theme used which images, so I left all the images there.
- changed every reference to 'interlaced' to match the foldername, including the .theme file. Ex. interlaced.theme > interlaced1.theme, function_interlaced > function_interlaced1
- changed the style sheet reference according to the install.txt file.
- uploaded everything and enabled.
I found that the screenshots were too big, so I made them smaller.
It worked pretty well, although perhaps because they are in the same folder, they are strangely dependant on each other (block settings apply to all... conveinant for me!).
Possible other method: I think it could have also worked if I just made four seperate folders and put only the style sheets in them. Not sure though. If someone else knows, please post here.
Anyway, reading http://drupal.org/node/11795, I know that to do what I want, I first have to put it in the array, and then position it somewhere on the page. I created copied my interlaced4 theme into a test folder so I would still have the original files if I broke something.
The array is:
function interlaced4_features() {
return array('toggle_name', 'toggle_favicon');
}
I want to change it to:
<?php
function interlaced4_features() {
return array(
'logo',
'toggle_name',
'toggle_search',
'toggle_node_user_picture',
'toggle_comment_user_picture',
'toggle_favicon');
}
?>
But you have to walk before you crawl, so I will just change it to:
<?php
function interlaced4_features() {
return array(
'toggle_name',
'toggle_search',
'toggle_favicon');
}
?>
I need to add some code somewhere in here:
<?php
function interlaced4_page($content) {
if (theme_get_setting('toggle_favicon')) {
drupal_set_html_head('<link rel="shortcut icon" href="'. check_url(theme_get_setting('favicon')) .'" type="image/x-icon" />');
}
$output = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n";
$output .= "<html xmlns=\"http://www.w3.org/1999/xhtml\">\n";
$output .= "<head>\n";
$output .= drupal_get_html_head();
$output .= " <title>";
if ($title = drupal_get_title()) {
$output .= strip_tags($title) .' - '. variable_get("site_name", "drupal");
}
else {
$output .= variable_get("site_name", "drupal");
$output .= ($slogan = variable_get("site_slogan", "")) ? " - $slogan" : "";
}
$output .= "</title>\n";
$output .= ' <link href="'. base_path() . path_to_theme() .'/default.css" rel="stylesheet" type="text/css" />
<link title="one" href="'. base_path() . path_to_theme() .'/styles4.css" rel="stylesheet" type="text/css" />
<link title="two" href="'. base_path() . path_to_theme() .'/styles1.css" rel="alternate stylesheet" type="text/css" />
<link title="three" href="'. base_path() . path_to_theme() .'/styles2.css" rel="alternate stylesheet" type="text/css" />
<link title="four" href="'. base_path() . path_to_theme() .'/styles3.css" rel="alternate stylesheet" type="text/css" />';
$output .= "</head>\n";
$output .= "<body>\n";
$output .= '<table style="width: 100%; vertical-align: top;" cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align: top;" class="headersitename">
';
$output .= theme_get_setting('toggle_name') ? variable_get("site_name", "drupal") : '';
$output .= '
</td>
</tr>
';
$primary_links = theme('links', menu_primary_links());
if ($primary_links) {
$output .= '<tr>
<td class="headerlinks">
'. $primary_links .'
</td>
</tr>
';
}
$output .= '<tr>
<td class="headerspace"> </td>
</tr>
</table>
<table style="width: 100%" cellspacing="0" cellpadding="0">
<tr>
';
?>
hmmm....
Comments
step 2!
^ this is where the favicon (the icon in the browser tab) is displayed. nope.
The head of the document. not toooooo useful. Wonder what drupal_get_html_head does.
I don't quite understand what this is doing.... Oh, wait, maybe this is for the Site Title that you see in the top of your browser (not displayed on the page). For example, in drupal.org, this is 'drupal.org | Community plumbing'. Still no.
OK, this choose the style sheet, easy stuff. I don't know why the rest of the stylesheets are needed, though
OK! Here is where the actual site name you see is displayed (css class headersitename). This looks very likely. The primary links are displayed below the main header, so the search box must be before it.
Now I know where to put the code... what do I put??
-----------------------------------------------------------
Kindness builds stronger bonds than necessity.
www.animecards.org - 16,000 card scans and counting!
-----------------------------------------------------------
Looking at the code, I would
Looking at the code, I would think the obvious answer is something like
theme_get_setting, but searching the drupal API (api.drupal.org), http://api.drupal.org/api/4.7/function/theme_get_setting, this function doesn't seem to handle the search function.HMmmmm. but
theme_get_settingsis not the answer. I searched for toggle_search using the api.drupal.org search, but it didn't work. Instead, I googled it (site:api.drupal.org toggle_search). Oh, well, maybe it will work anyway!So I should have some code that looks like this:
$output .= theme_get_setting('toggle_search')I'll just stick it in and see!
Now it looks like this:
I think some punctuation is missing, but I'll try it anyway.
........ yeah, so that didn't work. Now there is a 1 next to my site name, though. Must mean that search has been activated (0 deactived, 1 activated). Time to search for variables!
-----------------------------------------------------------
Kindness builds stronger bonds than necessity.
www.animecards.org - 16,000 card scans and counting!
-----------------------------------------------------------
inserting the search box code
Hunt, hunt. I don't have too many clues, since most themes are phptemplate, and those that aren't don't include a search thingy.
However, from the fancy theme (a phptemplate), I see
<?php print $search_box ?>. Hm.http://api.drupal.org/api/4.7/function/search_box
I have no idea what I'm doing, I'm just going to guess. I probably won't break my site by doing this. I will try:
$output .= theme_get_setting('toggle_search') ? search_box() : '';Wooooooow, it worked! Except that the search box is now between the main header and the primary links, when I want it to be next to the header. Well, on the right side, anyway.
I am also curious, so I will try:
$output .= $search_box;Alas, that got me nothing. No error, but no search box.
Now my problem is position.
Hm.
-----------------------------------------------------------
Kindness builds stronger bonds than necessity.
www.animecards.org - 16,000 card scans and counting!
-----------------------------------------------------------
positioning the search box
The interlaced theme is a tables based template, so I thought I would just try adding another cell in the header, and aligning it to the right (handy css reference: http://www.htmlhelp.com/reference/css/properties.html)
Ara, ara, I broke my site.
Parse error: parse error, unexpected '<' in .../animecards.org/themes/interlaced/interlaced4/interlaced4.theme on line 52Hmmm... Not sure what is going on, but
$output .= 'looked funny, so I try adding it in.Yay, my site is fixed. It appears that all the html code must be enclosed in '. Why, no clue, but there you go.
My search form is back, and it is on the right side. But it is floating in the middle of the header bar, pushed all the way to the side, like a loser at a school dance (sigh, that was me ^.^;). I have declared a css class, so instead of fixing it in the theme, I will try some CSS magic.
Not quite. I removed the td style from the theme. The box is now on the right, but too low, and still on the side.
Top right corner. Why, oh why.
Now it's moved over a little, still in the top.
Removing the TD in the theme only made the search box go back under the site name.
Put the td back, tried padding.
Looks MUCH better but still too much on the right side.
With more tweaking, this:
got me the box where I wanted. However, the search button was underneath the box, I wanted it next to the box.
I looked at the friendselectric css, and the fancy css. Just for kicks, I tried adding the fancy css code for search straight to the interlace css.
OK, all that did was make my search box big and ugly. No change in position. Searching drupal.
Similar unanswered post: http://drupal.org/node/56272
...
Well, I give. Anyone have any ideas as to how to adjust this, I welcome them!
Anisa.
-----------------------------------------------------------
Kindness builds stronger bonds than necessity.
www.animecards.org - 16,000 card scans and counting!
-----------------------------------------------------------
Digging around didn't give
Digging around didn't give me anything but more information.
The search box is not defined in the interlace themes.
The search module itself gives the search box an ID of 'search' and class 'container-inline'
http://api.drupal.org/api/4.7/file/modules/search.module/source
While the Drupal.Css itself has some more classes, like .form-text.
It also has
.container-inline div {
display: inline;
}
Changing that to block did nothing at all.
sigh.
Anisa.
-----------------------------------------------------------
Kindness builds stronger bonds than necessity.
www.animecards.org - 16,000 card scans and counting!
-----------------------------------------------------------