By appraveen on

People,

I plan to create a custom Front page for my new drupal site. Tried searching for this in the archieves, google.... NO LUCK

I did get suggestions to use views, panels ....

That doesn't give me the perfect control over the FP (Front page) as I need it.

I want to be able to completely change the FP not only the content part(the middle part of the page where content is displayed).

I am good with HTML and CSS. However, dont know PHP that well.

Can anybody point me to a tutorial/documentation, that would tell me more about stuff like how to decide and display the log-in box, menu depending on the role type and all that...

I can do the styling but not really sure of How to get content.

Praveen

⋅ Categories: Drupal 6.x

Comments

kkinfy’s picture

kkinfy commented

If you need complete control over front page, copy page.tpl.php to page-node.tpl.php. The new file will affect only the front page. Here you can customize the elements and their positioning to any extent.

appraveen’s picture

appraveen commented

Thanks Kamala,

But what about the log-in block and that stuff. Is there any tutorial where I can know more about it? Not only log-in module, different parts of the the application.

scoutbaker’s picture

scoutbaker commented

Start by looking at the Theming Guide. It can be found in the documentation.

There are also books available that cover theming.

kkinfy’s picture

kkinfy commented

You can apply specific styles to blocks as well. You will have to find block's id ( you can find the block id by hovering over edit option under admin blocks ) and the module responsible for the block. Then you can copy paste block.tpl.php to block-module-blockid.tpl.php, which would affect only the block of interest.

Other simple alternative is to alter CSS for the specific blocks which should be very easy but not as flexible as the above method.

appraveen’s picture

appraveen commented

Thanks ScoutBaker for the suggestion. I need to look at the theming guide.

Kamala,

I think I understand what you wanna say. However, What I wanna be able to do is this.

I already have a Page design laid out in HTML and CSS. Next, I want to be able to put in PHP code at right places by doing so the page would become functional. If you understand what I mean.

Example:

There is a part of the page where I have the HTML elements for log-in designed (ie 2 text boxes and a submit button). Now, what I want to do is throw in some php code in between the HTML code that would integrate the 2 text boxes and a submit button to the drupal core.

Also if you could point me to a tutorial or any link that would be great

Thanks for understanding my issue

Praveen

kkinfy’s picture

kkinfy commented

For example, the HTML source for the login block for my website is 

<div class="art-Block-body">

	<div class="art-BlockHeader">
		    <div class="l"></div>
		    <div class="r"></div>
		    <div class="art-header-tag-icon">
		        <div class="t">	
			<h2 class="subject">User login</h2>
</div>
		    </div>

		</div>    
	<div class="art-BlockContent content">
	    <div class="art-BlockContent-body">
	
		<form action="/node?destination=node" accept-charset="UTF-8" method="post" id="user-login-form">
<div><div class="form-item" id="edit-name-wrapper">
 <label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
 <input maxlength="60" name="name" id="edit-name" size="15" value="" class="form-text required" type="text">
</div>
<div class="form-item" id="edit-pass-wrapper">
 <label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>

 <input name="pass" id="edit-pass" maxlength="60" size="15" class="form-text required" type="password">
</div>
<span class="art-button-wrapper"><span class="l"></span><span class="r"></span><input name="op" id="edit-submit" value="Log in" class="form-submit art-button" type="submit"></span><div class="item-list"><ul><li class="first"><a href="/user/register" title="Create a new user account.">Create new account</a></li>
<li class="last"><a href="/user/password" title="Request new password via e-mail.">Request new password</a></li>
</ul></div><input name="form_build_id" id="form-a6f5494fa947c1d03ad5136dd15c3824" value="form-a6f5494fa947c1d03ad5136dd15c3824" type="hidden">
<input name="form_id" id="edit-user-login-block" value="user_login_block" type="hidden">

</div></form>

	    </div>
	</div>

	

    </div>

Having the above code, what I would do is

1) Copy paste the code in my custom block with input format set to FULL HTML
2) The above step would render the functional login form for the site
3) Then I would strip off the unwanted DIVs , styles and attributes. The only important thing is to retain the element ids as such.
4) The above step would give you a clean three element form for login
In my case the clean code will look like

 <form action="/node?destination=node" accept-charset="UTF-8" method="post" id="user-login-form">
 <input maxlength="60" name="name" id="edit-name" size="15" value="" class="form-text required" type="text">
 <input name="pass" id="edit-pass" maxlength="60" size="15" class="form-text required" type="password">
 <input name="op" id="edit-submit" value="Log in" class="form-submit art-button" type="submit">
 <a href="/user/register" title="Create a new user account.">Create new account</a>
 <a href="/user/password" title="Request new password via e-mail.">Request new password</a>\
 <input name="form_build_id" id="form-a6f5494fa947c1d03ad5136dd15c3824" value="form-a6f5494fa947c1d03ad5136dd15c3824" type="hidden">
 <input name="form_id" id="edit-user-login-block" value="user_login_block" type="hidden">
 </form>

5) On the clean form (form with two input boxes and a submit button) got from above step you can superimpose your HTML + CSS to get desired effect.

appraveen’s picture

appraveen commented

Hey Thanks alot kkinfy,

This is what I had been looking for exactly. Thanks alot for being generous and sharing the code. OK got that.

Now what I can do is replace the input tag attributes with the one in here.

I even tried it but could not succeed.

OK, let me try once more and if I dont solve it. I'll put up the code here.

Thanks again kkinfy.

Praveen