I am new in drupal. I want to customize and style my login or my registration form.
There are some predefined blocks in Admin|Structure|Blocks. Login form is one of these predefined blocks and I want to show it in a specific region in my page.tpl.php page. the following code in page.tpl.php shows a login form. I want to style it with bootstrap css. How can I do that?
I have searched a lot and found some code in template.php and so on. But none of them worked. :(
Thank You For Your Help!
<?php if($page['login_region'])
print render($page['login_region']);
?>
You can do like this, just typing html and printing the region, then you can add css with your classes, or you can install Block Class Module to add classes to blocks:
<div class="row">
<div class="col-sm-3 customclass"?
<?php if($page['login_region'])
print render($page['login_region']);
?>
</div>
</div>
Related
I currently building a mobile hybrid application using Material Design Lite but I've encountered a slight issue. When I'm adding input field elements to my pages, the floating text or even the placeholder does not work correctly.
I'm using $stateProvider and $urlRouterProvider in my application for page navigation. Inside my index.html I have <div ui-view></div> in which I inject my views when my states change using <a ui-sref="home">Home</a> for example.
The problem I'm having is that if insert the following code into index.html outside of the ui-view of course:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
The floating label works no problem. However, if I place the same code inside a view (external page that is later injected inside the ui-view element after page navigation occurs), the floating label does not work correctly. The label does not float up, and the text entered is unreadable.
There are no errors displayed in my console and I can't seem to figure out why it won't work. The JS files and CSS are loaded in correctly.
Hopefully someone can help me out with this.
Thanks everyone!
You have to upgrade the elements using "componentHandler.upgradeElements()"
In my main layout we got this
<div id="myContent">
<?php echo $this->fetch('content'); ?>
</div>
to render the different views on my app. Also, at /View/Pages/ I have static pages like 'About us', 'Contact', etc.
I would like to know if there is any way to insert the static pages in this place when I do click on the appropriate links.
I think it could be done with JQuery, but the question is if there is any magic in cakePHP to do it. Thanks.
I am trying to override the front page node, however after following the guide from the official site, it's not working.
Guide: https://www.drupal.org/node/1585528
I have taken node.tpl.php and renamed it to node--front.tpl.php and made changes to the layout, saved and cleared cache. The changes are not being displayed.
Now if I edit node.tpl.php directly it shows the changes, anyone know what I am doing wrong to override specific node templates?
EDIT:
I want to move the title below the image being displayed in the front page.
See below: Moving the title block under the content block, moves the title down as I want it to do, however how do I specify this for just the front page and not all nodes? (renaming node.tpl.php to node--front.tpl.php does not work as mentioned above)
In node.tpl.php: (title block)
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>>
<?php print $title; ?>
</h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
(content block)
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
// We hide the comments and links now so that we can render them later.
hide($content['comments']);
hide($content['links']);
print render($content);
?>
To override the node template for particular node, you need to override the default node.tpl.php. For this copy the existing node.tpl.php file to node--{node_id}.tpl.php.
If you want to override the page template only for front page then you can create page--front.tpl.php file and copy the page.tpl.php file and then modify it as per your requirement.
Still you have issues, then use hook_preprocess_page() in template.php and use dpm() function to find the theme_suggestions that will give the sequence of execution of templates file.
you can use node-{nodeid}.tpl.php
It may help you.
Source: https://drupal.stackexchange.com/questions/39710/how-do-i-define-a-template-file-for-a-specific-node-id
Thanks
Samit K
samitkhulve.com
I'm still using 4.1 and I'm trying to center a form content on screen.
When I add a new form it stays on the "left" of the screen.
I've tried to change form.html (temmplates/shared) adding a div with a style like this:
margin-left : 10%; margin-right : 10%;
up next to the form tag and closing it at the bottom.
The form goes to the right but not centered at all.
Anyone has any clue to help with this ?
Here is a screenshot of a simple Form (it's not basec on models)
thanks
Alejandro
Ok - i've gone to a default of atk4.2 to demonstrate.
If you add a new page with defaults as follows
<?php
class page_test extends Page {
function init() {
parent::init();
$p=$this;
$f=$p->add('MVCForm')->setModel('Customer');
}
}
?>
I get the following and the fields extend across the whole width of the page.
This is because the default page template takes the whole width and is expected.
In order to adjust the form, you can use view functionality so create a view under the /lib/View directory called Centre.php and put the following code in it
<?php
class View_Centre extends View {
function init(){
parent::init();
}
function defaultTemplate() {
return array('view/centre');
}
}
?>
Then create a new template for the view in yoursite/templates/default/view called centre.html and insert the following html code
<div style='width:50%; margin: auto;'>
<?$Content?>
</div>
and then in the page, we add the view first and the form into the view rather than straight into the page.
<?php
class page_test extends Page {
function init() {
parent::init();
$p=$this;
$v=$p->add('View_Centre');
$f=$v->add('MVCForm')->setModel('Customer');
}
}
?>
and this results in the following web page
The base ATK4 form is itself a view which means you can style the form however you want so if you get for example use a different style of form such as the one described here you can do this by copying yoursite/atk4/atk4/templates/shared/form.html to yoursite/atk4/templates/shared.form.html and changing the second line from
<?form?>
<div id="<?$_name?>" class="atk-form <?$class?>" style="<?$style?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset class="<?$fieldset?>">
to
<?form?>
<div id="stylized>" class="myform <?$class?>" style="<?$style?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset class="<?$fieldset?>">
Create a new form.css file in yoursite/templates/default/css which contains the styling
Copy yoursite/atk4/templates/shared/shared.html to yoursite/templates/shared/shared.html and add an extra tag
<?$css_include?>
just above the existing
<?$js_include?>
and in Frontend.php, let every page find the new css file.
$this->addLocation('templates',array(
'css'=>array(
'default/css',
),
));
$this->template->appendHTML('css_include','<link type="text/css" href="'.$this->api->locateURL('css','form.css').'" rel="stylesheet">');
which results in a styled form like this
There are some examples of different form layouts here that you can use to adjust the form layout itself. Not sure from your question if you want to center the form in the page or centre the fields.
If you just want to centre the Form within the webpage, you want to use margin: auto for centering css rather than setting a percentage on each side as shown here
Also note, if you amend files from the atk4 directory, you should make a copy into yoursite/templates/shared and amend it there so you can upgrade by overwriting the atk4 directory later without losing anything.
If i use the default form template (in this case in a CRUD), i get the following
If i make your change to the atk4/templates/form.html by adding
<div style="width: 50%; margin: 0 auto;">
as the second line in form.html and adding the corresponding
</div>
one line from the bottom, it shifts everything slightly to the right as follows
What is unclear in your question is what you are trying to achieve - do you want to move the fields within the form or do you want to centre the whole form on the page ?
I think the reason for the shifting is because of setting the width to 50% but I dont know what layout you are trying to obtain - do you just want to right align the labels to the fields maybe ? Please post screenshots in the original question of what you are getting and try to describe what you want to achieve.
I'm new to Drupal theming and am attempting to create a custom theme template for a specific content type I have.
I am attempting the following:
<div<?php print $content_attributes; ?>>
<?php print render($content['field_property_media']); ?>
<div class="field-label-above property-information">
<div class="field-label">Property Information</div>
<?php print render($content['address']); ?>
</div>
</div>
However, when the content actually render the address portion gets booted out of its parent div and looks like this:
<div class="field-label-above property-information">
<div class="field-label">Property Information</div>
</div>
<div class="field field-name-field-property-address field-type-addressfield field-label-inline clearfix"><div class="field-label">Address: </div><div class="field-items"><div class="field-item even"><div class="street-block"><div class="thoroughfare">55 Duchess Ave</div></div><div class="addressfield-container-inline locality-block"><span class="locality">London</span> <span class="state">Ontario</span> <span class="postal-code">N6C 1N3</span></div><span class="country">Canada</span></div></div></div>
I can't figure out why this is happening or what the solution is to keep the address within the div I manually created.
Thoughts?
The only possible way this could happen is if you've got a custom or contributed module intercepting your template file and changing it, or if you have some javascript enabled that's moving the <div> out of it's container. Drupal does absolutely no re-ordering of content when it processes a template file so it can't be anything in Drupal core that's causing the problem.
If the <div> is just displaying outside the container (i.e. it's inside when you inspect the source code) then you're probably just facing a floating issue; just add the clearfix class to the containing element.
EDIT
Just a thought, have you cleared your cache since you added the template file? If not, do that, it won't be picked up until the caches are cleared.
Also if this is a custom node template (i.e. node--page.tpl.php), make sure you've also copied node.tpl.php to your theme's folder. Then clear your cache again.