Joomla Templates Club 406,261 posts

[Tech-xml Friend Tech-xmlJoin date: October 2010Posts: 765Downloads:39Uploads:140 Thanks: 106 Thanked: 5 times in 2 posts]

#204677

It is possible to set up a section in the Uber as the same style used in teplate Ja_Medicare?
http://ja-medicare.demo.joomlart.com/index.php/en/bonus-page/departments

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#563238

I would like to clarify that for heavy customization, you should hire a developer to carry out such work, customization support is out of JA support scope.

If you are a developer you can try to do this way

+ Download JA Medicare template and copy three file: department_item.php, department.php and department.xml files from templates/ja_medicare/html/com_content/category/ folder

+ Paste them into templates/uber/html/com_content/category/ folder

+ Create templates/uber/css/custom.css file and add new snippet css style below


.grid-view hr {
border: 0;
}
.grid-view .items-row article {
padding: 0;
border: 0;
margin: 0;
}
.grid-view .item {
text-align: center;
padding: 25px;
background: #ffffff
margin: -1px -21px;
border: 2px solid #e7e7e7
-webkit-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
transition: background 0.1s linear;
}
@media screen and (max-width: 979px) {
.grid-view .item {
padding: 25px 12.5px;
}
}
.grid-view .item .article-title {
font-size: 15px;
text-transform: uppercase;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@media screen and (max-width: 979px) {
.grid-view .item .article-title {
font-size: 13px;
}
}
.grid-view .item .article-aside .icons {
position: absolute;
top: 10px;
right: 10px;
}
.grid-view .item .article-aside .icons .dropdown-menu li > a {
color: #3498db
}
.grid-view .item .article-aside .icons .dropdown-menu li > a:hover {
color: #217dbb
}
.grid-view .item .article-intro .item-image.pull-left {
float: none !important;
margin-right: 0;
text-align: center;
}
.grid-view .item .article-intro .item-image.pull-left > img {
display: inline-block;
background: #3498db
padding: 25px;
}
.grid-view .item .article-intro .content_rating {
display: block;
margin-bottom: 12.5px;
}
.grid-view .item .article-intro .content_rating img {
display: inline;
margin: 2px;
}
.grid-view .item .article-aside .article-info {
float: none;
text-align: center;
}
.grid-view .item .article-info {
width: auto;
}
.grid-view .item .readmore .btn {
border-width: 2px;
background: none;
border-radius: 30px;
}
.grid-view .item:hover {
background: #3498db
border-color: #3498db
}
.grid-view .item:hover .article-info dd .sub-text,
.grid-view .item:hover .article-info dd,
.grid-view .item:hover .article-info dd a,
.grid-view .item:hover .article-intro,
.grid-view .item:hover .article-title a,
.grid-view .item:hover a {
color: #ffffff
}
.grid-view .item:hover .readmore .btn {
background: none;
color: #ffffff
border-color: #ffffff
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.grid-view .item:hover .readmore .btn:hover {
background: #217dbb
border-color: #217dbb
color: #ffffff
}
.grid-view .item:hover .icons .dropdown-menu a {
color: #333333
}
.grid-view .item:hover .icons .dropdown-menu a:hover,
.grid-view .item:hover .icons .dropdown-menu a:active,
.grid-view .item:hover .icons .dropdown-menu a:focus {
color: #3498db
}


+ And you compare the configuration of Departments page under Menu Item Type: xLayout – Departments as JA Medicare template

1 user says Thank You to Ninja Lead for this useful post

1. Tech-xml

[Author]

Posts