Joomla Templates Club 406,261 posts

[ukfraternite Friend ukfraterniteJoin date: May 2008Posts: 294Downloads:0Uploads:44 Thanks: 61 Thanked: 10 times in 1 posts]

#140600

Hello,

I am using JA OPAL in J1.5.x

I would like to change the format and layout of ja_opal to that of ja_quartz

front this 4973

to that:
4972

How do I do that please?

I like the way quartz displays the content with dates on the left and it’s very clear.

---

Attachments:

1. 
2. 

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#302528

Not easily. But here’s a look at what you’re looking at.

First go into MENUS > MAIN MENU > HOME…and change the parameters (basic) so that columns=1.
Then you are going to need to update the template.css in Opal…with those items…and there are MANY…that you like from Quartz. I won’t lie. It will be a job. It will NOT be a simple cut and paste operation.

And the exact “Do this – Do that” is way beyond the scope of this forum.

That is the least you’ll have to do. If you know your way around Firefox’s Firebug plug in…you’re well on your way. But it may be easier, if you’re not comfortable with major CSS hacks to go to Joomlancer.com and hire a guy to do it. You can probably get it done for under $100.

Good Luck.
John.
===========================================================================
If this has been of HELP to you…please click “Thank You” below.

[ukfraternite Friend ukfraterniteJoin date: May 2008Posts: 294Downloads:0Uploads:44 Thanks: 61 Thanked: 10 times in 1 posts]

#302552

I was thinking… by copying the ccs from the relavant quartz area, wouldn’t it be possible to get the same output if I paste it to Opal?

I don’t know what to copy though.

[nguyenhuu quang Friend nguyenhuu quangJoin date: September 2014Posts: 1087Downloads:0Uploads:3 Thanks: 29 Thanked: 328 times in 288 posts]

#302553

open your template and html folder
u can see com_content
copy it and replcae to ja_opal.

[ukfraternite Friend ukfraterniteJoin date: May 2008Posts: 294Downloads:0Uploads:44 Thanks: 61 Thanked: 10 times in 1 posts]

#302560

there are 7 folders in opal com_content.

And 6 folders in Quartz

What do I need to copy exactly?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#302564

You will need the frontpage folder but that is only part of it. You will also need some css from the quartz template. The frontpage folder mentioned above will do the image resizing and adjust the layout but not provide the little calender etc.

[ukfraternite Friend ukfraterniteJoin date: May 2008Posts: 294Downloads:0Uploads:44 Thanks: 61 Thanked: 10 times in 1 posts]

#302565

Cool. Thank you Phill,

Where or how do I get it to work just like Quartz with all the bits and stuff.

Just for the front page as illustrated on the picture above. I love those Quartz features (not the whole template for this purpose)

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#302566

Once you have copied over the folder mentioned above, copy the following code to the bottom of your template.css file.

/* Override fontpage */
.contentpaneopen_fp {
position: relative;
padding-left: 70px;
}

h1.componentheading_fp {
background: url(../images/h3-violet.gif) no-repeat left bottom;
color: #DD8FB1;
font-size: 100%;
text-transform: uppercase;
margin: -15px -15px 15px;
padding: 5px 0 10px 10px;
letter-spacing: 1px;
}

.contentpaneopen_fp .article-toolswrap {
position: absolute;
left: 0;
top: 0;
width: 60px;
}

.contentpaneopen_fp .article-tools {
padding: 0;
}

.contentpaneopen_fp .article-meta {
width: 100%;
}

.contentpaneopen_fp .article-content {
position: relative;
}

.contentpaneopen_fp .ja-innerpad {
padding-left: 88px;
min-height: 100px;
}

* html .contentpaneopen_fp .ja-innerpad {
height: 100px;
}

div.contentpaneopen_edit_fp {
float: none !important;
}

div.img-desc {
position: absolute;
top: 0;
left: 0;
}

div.content-desc h2.contentheading_fp {
float: left;
background: #810C46;
color: #FFFFFF;
font-size: 100%;
margin: 0 0 10px;
padding: 3px 10px;
clear: right;
text-transform: uppercase;
}

h2.contentheading_fp a {
color: #FFFFFF;
text-decoration: none;
}

div.content-desc p {
clear: both;
display: block;
margin: 0;
}

.contentpaneopen_fp .createdate {
background: none;
display: block;
font-size: 110%;
text-transform: uppercase;
text-align: center;
}

.contentpaneopen_fp .createdate span.month {
font-weight: bold;
font-size: 150%;
}

.article-toolswrap {
display: block;
margin: 0 0 10px;
padding: 0;
position: relative;
}

.article-tools {
display: block;
padding: 0 10px 0 0;
}

.article-meta {
width: 70%;
float: left;
color: #555555;
}

.createby {
}

.createdate {
padding-right: 6px;
margin-right: 5px;
background: url(../images/vline.gif) no-repeat right center;
}

.modifydate {
width: 100%;
display: block;
color: #333333;
margin: 15px 0;
}

.article-section {
padding-left: 6px;
margin-left: 5px;
background: url(../images/vline.gif) no-repeat left center;
}

.article-section a {
color: #555555;
}

.article-category a {
color: #555555;
}

div.buttonheading {
position: absolute;
top: 4px;
right: 10px;
}

.buttonheading img {
margin: 0 0 0 5px;
border: 0;
float: right;
}


Once you have done that, go into menus>main menu>home

Select 1 intro, and change no of columns to 1.

Then go into Parameters (system) and add the page class suffix _fp

Hopefully, that should do the trick though you may need to as a seperator and some padding as the articles are a bit close together that way. Some extra styling behind the dates would be good too.

[ukfraternite Friend ukfraterniteJoin date: May 2008Posts: 294Downloads:0Uploads:44 Thanks: 61 Thanked: 10 times in 1 posts]

#302665

Hello,

I have performed these changes but NOTHING has occured.

live site: mafraternite.com (a community website)

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#302682

It doesn’t look like you have replaced the frontpage folder properly.

On your homepage you have some images with huge filesizes. This is bad news for the speed of loading in your site and you really need to optomize them.

[ukfraternite Friend ukfraterniteJoin date: May 2008Posts: 294Downloads:0Uploads:44 Thanks: 61 Thanked: 10 times in 1 posts]

#302704

The state of the pictures on the Frontpage started fading when I implemented the changes. Sure I would need uptimization.

The way I changed the Frontpage:
I copied the content into a new folder I created. Then I deleted the content in Opal Frontpage.

Then I went to Frontpage Quartz and copied the files from Frontpage to Opal Frontpage.

Finally, I changed the parameters (basic and system) in Menu>Home.

Before all this, I had copied the code to template.ccs at the bottom.

Have I missed something?

[ukfraternite Friend ukfraterniteJoin date: May 2008Posts: 294Downloads:0Uploads:44 Thanks: 61 Thanked: 10 times in 1 posts]

#302707

I have gone back to the steps and I now realised that I did not copy the code correctly.

However, the new look is somehow disorganised. The title is not well positioned, the image is more blurier than ever and it’s hiding some parts of the title.

And there is not enough space between the articles.

Thank you in advance for all your assistance.

mafraternite.com

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#302722

Try changing the css I provide first time for this as I am not sure I pasted it correctly first time.

You also need to check that the images folder is writable by the script as it needs to resize the images there.

/* Override fontpage */
.contentpaneopen_fp {
position: relative;
padding-left: 70px;
}

h1.componentheading_fp {
background: url(../images/h3-violet.gif) no-repeat left bottom;
color: #DD8FB1;
font-size: 100%;
text-transform: uppercase;
margin: -15px -15px 15px;
padding: 5px 0 10px 10px;
letter-spacing: 1px;
}

.contentpaneopen_fp .article-toolswrap {
position: absolute;
left: 0;
top: 0;
width: 60px;
}

.contentpaneopen_fp .article-tools {
padding: 0;
}

.contentpaneopen_fp .article-meta {
width: 100%;
}

.contentpaneopen_fp .article-content {
position: relative;
}

.contentpaneopen_fp .ja-innerpad {
padding-left: 88px;
min-height: 100px;
}

* html .contentpaneopen_fp .ja-innerpad {
height: 100px;
}

div.contentpaneopen_edit_fp {
float: none !important;
}

div.img-desc {
position: absolute;
top: 0;
left: 0;
}

div.content-desc h2.contentheading_fp {
float: left;
background: #810C46;
color: #FFFFFF;
font-size: 100%;
margin: 0 0 10px;
padding: 3px 10px;
clear: right;
text-transform: uppercase;
}

h2.contentheading_fp a {
color: #FFFFFF;
text-decoration: none;
}

div.content-desc p {
clear: both;
display: block;
margin: 0;
}

.contentpaneopen_fp .createdate {
background: none;
display: block;
font-size: 110%;
text-transform: uppercase;
text-align: center;
}

.contentpaneopen_fp .createdate span.month {
font-weight: bold;
font-size: 150%;
}

.article-toolswrap {
display: block;
margin: 0 0 10px;
padding: 0;
position: relative;
}

.article-tools {
display: block;
padding: 0 10px 0 0;
}

.article-meta {
width: 70%;
float: left;
color: #555555;
}

.createby {
}

.createdate {
padding-right: 6px;
margin-right: 5px;
background: url(../images/vline.gif) no-repeat right center;
}

.modifydate {
width: 100%;
display: block;
color: #333333;
margin: 15px 0;
}

.article-section {
padding-left: 6px;
margin-left: 5px;
background: url(../images/vline.gif) no-repeat left center;
}

.article-section a {
color: #555555;
}

.article-category a {
color: #555555;
}

div.buttonheading {
position: absolute;
top: 4px;
right: 10px;
}

.buttonheading img {
margin: 0 0 0 5px;
border: 0;
float: right;
}

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#302726

To prove the concept I have uploaded the demo here.

http://speedsailingblog.com.testing.windsurf.vm.bytemark.co.uk/

[ukfraternite Friend ukfraterniteJoin date: May 2008Posts: 294Downloads:0Uploads:44 Thanks: 61 Thanked: 10 times in 1 posts]

#302812

Hello Phill,

I have copied the new code and it has worked half way.

check it out. mafraternite.com

[Author]

Posts