Joomla Templates Club 406,261 posts

[hbenachou Friend hbenachouJoin date: December 2009Posts: 18Downloads:0Uploads:0 Thanks: 8 Thanked: 1 times in 1 posts]

#200203

Hello,
I am using the typo in JA University template by adding the class names to the appropriate tags, but the results aren’t good : it doesn’t look like the template.
I’ve been reading other posts from people that had (about) the same problem, so I know people went through that but no one bothered to actually detail a solution to the problem in their threads.
please help!

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#544286

Hi

Could you explain in details where are you encountering problems ?

typo works in this way , css code is loaded through template.css file so if you are adding a particular css class in your content or module suffix that class should be declared before somewhere, if not then template.css should be double checked to verify why it doesn’t works.

[hbenachou Friend hbenachouJoin date: December 2009Posts: 18Downloads:0Uploads:0 Thanks: 8 Thanked: 1 times in 1 posts]

#544288

hmmm.
yes let me check template.css and get back with you.
thanks for the fast reply tho. 🙂

[hbenachou Friend hbenachouJoin date: December 2009Posts: 18Downloads:0Uploads:0 Thanks: 8 Thanked: 1 times in 1 posts]

#544290

yep! as you suspected the ja-typo-box isn’t declared in the template.css
cool we found the problem. now how do I fix it?
I need a template.css where all the JA University classes are already declared. That would be ideal.

[hbenachou Friend hbenachouJoin date: December 2009Posts: 18Downloads:0Uploads:0 Thanks: 8 Thanked: 1 times in 1 posts]

#544293

actually, it seems that those particular declarations are on another css file : typo.css. how do I get my page to use this css?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#544302

<em>@hbenachou 439235 wrote:</em><blockquote>actually, it seems that those particular declarations are on another css file : typo.css. how do I get my page to use this css?</blockquote>

You can download the quickstart version of the template , extract it and take the template.css from there and compare with your file to verify what is missing

[hbenachou Friend hbenachouJoin date: December 2009Posts: 18Downloads:0Uploads:0 Thanks: 8 Thanked: 1 times in 1 posts]

#544345

Yes! I just downloaded the quickstart and tried to compare the template.css file to the one I have. They are identical. :((
the issue is really this “ja-typo-box box-information”: it is just nowhere to be found on template.css,
on the other hand it does exist on the file typo.css but it seems that typo.css isn’t used.
suggestions? please?:((

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#544349

Hi

<blockquote>on the other hand it does exist on the file typo.css</blockquote>

On your website is installed Ja University T3 version – so i think you are checking the wrong files

Here you can find the documentation for your template version
Here you can find the typography page of your template

1 user says Thank You to pavit for this useful post

1. hbenachou

[hbenachou Friend hbenachouJoin date: December 2009Posts: 18Downloads:0Uploads:0 Thanks: 8 Thanked: 1 times in 1 posts]

#544354

Yes! you were right I was checking the wrong files, the wrong version the wrong planet :D! But! there is a solution to reconcile both worlds.
So I took the declarations that are interesting to me and pasted them to the template.css that I use and magically it somewhat worked.
So here is what I needed :
/* MESSAGE BOXES AND LEGENDS STYLE
—————————————————————–*/
/* Box style —*/
p.ja-typo-box {
border: 1px solid #ddd
padding: 10px 10px 10px 50px;
text-shadow: 1px 1px 0 rgba(255,255,255, .5);
}

/* Box with icons */
p.box-download, p.box-sticky, p.box-confirmation, p.box-error, p.box-warning, p.box-information, p.box-system {
background-repeat: no-repeat;
background-position: 10px 15px;
}

p.box-confirmation {
background-color: #e4f2d4
background-image: url(../images/icons/message/icon-tick.png);
border-color: #b8d199
color: #4e8904
}

p.box-error {
background-color: #f2dbd4
background-image: url(../images/icons/message/icon-error.png);
border-color: #f6a992
color: #be4b22
}

p.box-warning {
background-color: #fbebc1
background-image: url(../images/icons/message/icon-warning.png);
border-color: #e1bc88
color: #ca7326
}

p.box-information {
background-color: #d4e6f2
background-image: url(../images/icons/message/icon-information.png);
border-color: #98c1de
color: #1e81af
}

p.box-download {
background-image: url(../images/icons/message/icon-download.png);
}

p.box-sticky {
background-color: #ffffcc
background-image: url(../images/icons/message/icon-sticky.png);
border-color: #e1bc88
}

p.box-system {
background-color: #ccd4fa
background-image: url(../images/icons/message/icon-system.png);
border-color: #a4b1ed
color: #626ccb
}

I pasted this code in template.css and now I can use the classes easily.
Thanks a bunch for your help moderators, Being pointed to the right direction is priceless 🙂

[hbenachou Friend hbenachouJoin date: December 2009Posts: 18Downloads:0Uploads:0 Thanks: 8 Thanked: 1 times in 1 posts]

#544355

Yes! you were right I was checking the wrong files, the wrong version the wrong planet :D! But! there is a solution to reconcile both worlds.
So I took the declarations that are interesting to me and pasted them to the template.css that I use and magically it somewhat worked.
So here is what I needed :
/* MESSAGE BOXES AND LEGENDS STYLE
—————————————————————–*/
/* Box style —*/
p.ja-typo-box {
border: 1px solid #ddd
padding: 10px 10px 10px 50px;
text-shadow: 1px 1px 0 rgba(255,255,255, .5);
}

/* Box with icons */
p.box-download, p.box-sticky, p.box-confirmation, p.box-error, p.box-warning, p.box-information, p.box-system {
background-repeat: no-repeat;
background-position: 10px 15px;
}

p.box-confirmation {
background-color: #e4f2d4
background-image: url(../images/icons/message/icon-tick.png);
border-color: #b8d199
color: #4e8904
}

p.box-error {
background-color: #f2dbd4
background-image: url(../images/icons/message/icon-error.png);
border-color: #f6a992
color: #be4b22
}

p.box-warning {
background-color: #fbebc1
background-image: url(../images/icons/message/icon-warning.png);
border-color: #e1bc88
color: #ca7326
}

p.box-information {
background-color: #d4e6f2
background-image: url(../images/icons/message/icon-information.png);
border-color: #98c1de
color: #1e81af
}

p.box-download {
background-image: url(../images/icons/message/icon-download.png);
}

p.box-sticky {
background-color: #ffffcc
background-image: url(../images/icons/message/icon-sticky.png);
border-color: #e1bc88
}

p.box-system {
background-color: #ccd4fa
background-image: url(../images/icons/message/icon-system.png);
border-color: #a4b1ed
color: #626ccb
}

I pasted this code in template.css and now I can use the classes easily.
Thanks a bunch for your help moderators, Being pointed to the right direction is priceless 🙂

[Author]

Posts