Joomla Templates Club 406,261 posts

[willxiao Friend willxiaoJoin date: August 2014Posts: 7Downloads:0Uploads:3 Thanks: 4]

#200527

Hi,

I create a login page and set it as the landing page for all visitors. As I want all visitor to login first to see contents of the website. Like the picture below.

I have changed the accessing level for all menus from ‘public’ to ‘register’. So if a visitor click the ‘home’ button on login form they would be redirected to the default login page which in a different template and also with the Biz logo like below.

So if there any way I can replace the default login form with the one I created?

Thanks in advance.

---

Attachments:

1. 
2. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#546093

@willxiao,

I am bit confused. There is not much difference between the two screenshots. Where is the default login form and what changes you want to add?

[willxiao Friend willxiaoJoin date: August 2014Posts: 7Downloads:0Uploads:3 Thanks: 4]

#546311

Sorry about the confusion. However, I have worked out.

However, I have got another question for you. Is there any way I can use the department-list module with the logo from JA University template?

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#546513

@willxiao,

This is Custom HTML module. If you want to use it into JA Biz template, you can do as following:

– Create a new Custom HTML then add this rule into the content:

<div class=”department-list”>
<ul class=”department-list”>
<li class=”icon-1″><a title=”Sample” href=”your_article_link”>Management</a> <span class=”department-name”>Management</span></li>
<li class=”icon-2″><a title=”Sample” href=”your_article_link”>Accounting</a> <span class=”department-name”>Accounting</span></li>
<li class=”icon-3″><a title=”Sample” href=”your_article_link”>Economics</a> <span class=”department-name”>Economics</span></li>
<li class=”icon-4″><a title=”Sample” href=”your_article_link”>Technology</a> <span class=”department-name”>Technology</span></li>
<li class=”icon-5″><a title=”Sample” href=”your_article_link”>Finance</a> <span class=”department-name”>Finance</span></li>
<li class=”icon-6″><a title=”Sample” href=”your_article_link”>Officer</a> <span class=”department-name”>Officer</span></li>
<li class=”icon-7″><a title=”Sample” href=”your_article_link”>Humanities</a> <span class=”department-name”>Humanities</span></li>
<li class=”icon-8″><a title=”Sample” href=”your_article_link”>Geography</a> <span class=”department-name”>Geography</span></li>
</ul>
</div>

– Assign this module to the position as you wish.

– Open file: /templates/ja_biz/css/custom.css (if not exists, pls create new one) then add this rule:

/* Start - Custom Department List */
.department-list ul.department-list {
display: block;
float: left;
margin: 0;
padding: 0;
} @media screen and (max-width: 992px) {
.department-list ul.department-list {
text-align: center;
}
} @media (min-width: 992px) and (max-width: 1200px) {
.department-list ul.department-list {
margin: 0 -10px;
}
}
.department-list ul.department-list li {
background: none;
display: inline-block;
float: none;
height: 110px;
margin: 0 0 10px;
padding: 0;
position: relative;
text-align: center;
width: 120px;
} @media screen and (min-width: 992px) {
.department-list ul.department-list li {
display: block;
float: left;
margin-bottom: 0;
}
}
.department-list ul.department-list li a {
background: #f7f5e9
border-radius: 50%;
color: #494949
display: block;
height: 90px;
margin: 0 auto;
position: relative;
text-indent: -999em;
width: 90px;
}
.department-list ul.department-list li a:before {
font-family: FontAwesome;
font-size: 30px;
left: 50%;
margin: -17% 0 0 -15%;
position: absolute;
text-indent: 0;
top: 50%;
}
.department-list ul.department-list li a:hover,
.department-list ul.department-list li a:active,
.department-list ul.department-list li a:focus {
color: #ffffff
}
.department-list ul.department-list li span {
bottom: 0px;
display: none;
font-size: 14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
left: 0;
padding-top: 5px;
position: absolute;
text-align: center;
width: 100%;
}
.department-list ul.department-list li:hover span {
display: block;
}
.department-list ul.department-list li.icon-1 a:before {
content: "f0c8";
}
.department-list ul.department-list li.icon-1 a:hover,
.department-list ul.department-list li.icon-1 a:active,
.department-list ul.department-list li.icon-1 a:focus {
background: #d2644e
}
.department-list ul.department-list li.icon-2 a:before {
content: "f0d6";
}
.department-list ul.department-list li.icon-2 a:hover,
.department-list ul.department-list li.icon-2 a:active,
.department-list ul.department-list li.icon-2 a:focus {
background: #eda89a
}
.department-list ul.department-list li.icon-3 a:before {
content: "f07a";
}
.department-list ul.department-list li.icon-3 a:hover,
.department-list ul.department-list li.icon-3 a:active,
.department-list ul.department-list li.icon-3 a:focus {
background: #a6d4dd
}
.department-list ul.department-list li.icon-4 a:before {
content: "f108";
}
.department-list ul.department-list li.icon-4 a:hover,
.department-list ul.department-list li.icon-4 a:active,
.department-list ul.department-list li.icon-4 a:focus {
background: #d8c3a0
}
.department-list ul.department-list li.icon-5 a:before {
content: "f044";
}
.department-list ul.department-list li.icon-5 a:hover,
.department-list ul.department-list li.icon-5 a:active,
.department-list ul.department-list li.icon-5 a:focus {
background: #9abb90
}
.department-list ul.department-list li.icon-6 a:before {
content: "f0f6";
}
.department-list ul.department-list li.icon-6 a:hover,
.department-list ul.department-list li.icon-6 a:active,
.department-list ul.department-list li.icon-6 a:focus {
background: #b4b4b4
}
.department-list ul.department-list li.icon-7 a:before {
content: "f0c0";
}
.department-list ul.department-list li.icon-7 a:hover,
.department-list ul.department-list li.icon-7 a:active,
.department-list ul.department-list li.icon-7 a:focus {
background: #cea4b9
}
.department-list ul.department-list li.icon-8 a:before {
content: "f0ac";
}
.department-list ul.department-list li.icon-8 a:hover,
.department-list ul.department-list li.icon-8 a:active,
.department-list ul.department-list li.icon-8 a:focus {
background: #7ac2c5
}
/* End - Custom Department List */

* NOTE *
– If you want to change the icon, you need to go to this link then select an icon and copy the code of this icon.

– Open file: /template/ja_biz/css/custom.css then find code of the icon which you want to change (ex: icon-1):

.department-list ul.department-list li.icon-1 a:before {
content: "f0c8";
}

Replace the redwith the code of new icon.

Here is result:

Let me know if this helps

---

Attachments:

1. 
2. 
3. 

1 user says Thank You to Nazario A for this useful post

1. willxiao

[willxiao Friend willxiaoJoin date: August 2014Posts: 7Downloads:0Uploads:3 Thanks: 4]

#553340

Sorry about the late reply. Thanks so much for that.

[Author]

Posts