[solved] Typography: style switch not working

Hello,

the color of bullet4-class will not changed by changing the color-style (red, green, blue, neutral).

Bullet-Test

My typo.css:

Code: Select all

/*
 #------------------------------------------------------------------------
 # Party freak - March 2010 (for Joomla 1.5)
 #
 # Copyright (C) 2007-2010 Gavick.com. All Rights Reserved.
 # License: Copyrighted Commercial Software
 # Website: http://www.gavick.com
 # Support: [email protected]   
 #------------------------------------------------------------------------
 # Based on T3 Framework
 #------------------------------------------------------------------------
 # Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
 # @license - GNU/GPL, http://www.gnu.org/copyleft/gpl.html
 # Author: J.O.O.M Solutions Co., Ltd
 # Websites: http://www.joomlart.com - http://www.joomlancers.com
 #------------------------------------------------------------------------
 */
/*
 * Typography
 */
/* Code */
pre,
.code1,
.code2{margin:10px 0 15px!important; padding:10px 15px!important; font-size:0.92em!important; font-family:'Curier New',monospace!important}
.code2{padding-left:20px!important}
.code3{padding:0 0 5px 20px!important}
.code3 h4{width:35px; position:relative; top:-10px; margin:0 0 -10px 11px!important; padding:0 5px; font-size:1.17em; font-weight:normal}
/* Warnings */
p.info1,
p.info2,
p.info3,
p.info4{background:transparent url('../images/icons/info.gif') no-repeat left center}

p.warning1,
p.warning2,
p.warning3,
p.warning4{background:transparent url('../images/icons/warning.gif') no-repeat left center}

p.tips1,
p.tips2,
p.tips3,
p.tips4{background:transparent url('../images/icons/tips.gif') no-repeat left center}

p.info1,
p.info3,
p.warning1,
p.warning3,
p.tips1,
p.tips3{padding-left:30px}

p.info2,
p.info4{padding:3px 3px 3px 30px; border-top:#39f solid 1px; border-bottom:#39f solid 1px; background-position:3px center}

p.info3,
p.info4{background-color:#f0f6fe; background-position:7px center; min-height:14px; padding:12px 0 14px 30px}

p.warning2,
p.warning4{border-top:#f71212 solid 1px; border-bottom:#f71212 solid 1px; padding:3px 3px 3px 30px; background-position:3px center}

p.warning3,
p.warning4{background-color:#ffeeea; background-position:7px center; min-height:14px; width:auto; padding:12px 0 14px 30px}

p.warning4{border-top:#f71212 solid 1px; border-bottom:#f71212 solid 1px}

p.tips2,
p.tips4{border-top:#fde647 solid 1px; border-bottom:#fde647 solid 1px; padding:3px 3px 3px 30px; background-position:3px center}

p.tips3,
p.tips4{display:block; background-color:#fdffca; background-position:7px center; min-height:14px; padding:12px 0 14px 30px}

p.tips4{border-top:#fde647 solid 1px; border-bottom:#fde647 solid 1px}

/* Dropcaps */
span.Dropcap1,
span.Dropcap2,
span.Dropcap3{font-size:5.0em; display:block; float:left; line-height:1.0em; font-family:'Times New Roman',serif}

span.Dropcap1{height:61px; margin:-4px 5px -3px 0}

p.Dropcap2{padding:0 0 0 50px}

span.Dropcap2{height:61px; margin:-4px 0 0 -50px}

p.Dropcap3{margin-top:32px}

span.Dropcap3{height:61px; margin:-32px 5px 0 0}

/* Blockquotes */
blockquote{font-style:italic; margin:20px 0; float:left}

blockquote div.blockquote1 div{padding:0 17px}

blockquote div.blockquote2 div{padding:0 17px}

blockquote div.blockquote3{padding-bottom:5px}

blockquote div.blockquote3 div{padding:5px 27px 0 27px}

blockquote div.blockquote4{padding-top:2px}

blockquote div.blockquote4 div{padding:5px 27px 0 27px}

/* Floated blocks */
.blockTextLeft,
.blockTextRight,
.blockTextCenter{display:block; width:30%; padding:15px; font-style:italic;color:#aaa;}

.blockTextLeft{float:left; text-align:left}

.blockTextRight{float:right; text-align:right}

.blockTextCenter{margin:0 auto; text-align:center}

/* Legends */
div.legend1 h4,
div.legend2 h4,
div.legend3 h4,
div.legend4 h4,
div.legend5 h4,
div.legend6 h4{width:auto; float:left; background:#fff; position:relative; top:-9px; left:11px; margin:0 0 -9px 0!important; padding:0 3px; font-size:1.17em; font-weight:normal}

div.legend3 h4:first-child,
div.legend5 h4:first-child{background:#e7e7e7}

div.legend4 h4:first-child,
div.legend6 h4:first-child{border:solid 1px #666}

div.legend1,
div.legend5,
div.legend6{border:solid 1px #666; margin:25px 0}

div.legend2,
div.legend3,
div.legend4{border-top:solid 1px #666; border-bottom:solid 1px #666; margin:25px 0}

div.legend1 p,
div.legend2 p,
div.legend3 p,
div.legend4 p,
div.legend5 p,
div.legend6 p{margin:7px; clear:both}

/* icons */
.audio, .creditcard, .feed, .help, .webcam, .images, .lock, .printer, .report, .script, .time, .user, .world, .camera, .brick, .box, .cart, .cd, .chart_bar, .chart_line, .chart_pie, .clock, .cog, .coins, .compress, .computer, .cross, .disk, .error, .email, .accept, .add, .calendar, .group, .exclamation, .film, .folder, .heart, .house, .image, .information, .magnifier, .money, .new, .note, .page, .page_white, .plugin{padding:0 0 2px 30px!important}
.audio{background:transparent url('../images/icons/audio.gif') no-repeat left top}
.creditcard{background:transparent url('../images/icons/credit.gif') no-repeat left top}
.feed{background:transparent url('../images/icons/feed.gif') no-repeat left top}
.help{background:transparent url('../images/icons/help.gif') no-repeat left top}
.webcam{background:transparent url('../images/icons/webcam.gif') no-repeat left top}
.images{background:transparent url('../images/icons/images.png') no-repeat left top}
.lock{background:transparent url('../images/icons/lock.png') no-repeat left top}
.printer{background:transparent url('../images/icons/printer.png') no-repeat left top}
.report{background:transparent url('../images/icons/report.png') no-repeat left top}
.script{background:transparent url('../images/icons/script.png') no-repeat left top}
.time{background:transparent url('../images/icons/time.png') no-repeat left top}
.user{background:transparent url('../images/icons/user.png') no-repeat left top}
.world{background:transparent url('../images/icons/world.png') no-repeat left top}
.cart{background:transparent url('../images/icons/cart.png') no-repeat left top}
.cd{background:transparent url('../images/icons/cd.png') no-repeat left top}
.chart_bar{background:transparent url('../images/icons/chart_bar.png') no-repeat left top}
.chart_line{background:transparent url('../images/icons/chart_line.png') no-repeat left top}
.chart_pie{background:transparent url('../images/icons/chart_pie.png') no-repeat left top}
.clock{background:transparent url('../images/icons/clock.png') no-repeat left top}
.cog{background:transparent url('../images/icons/cog.png') no-repeat left top}
.coins{background:transparent url('../images/icons/coins.png') no-repeat left top}
.compress{background:transparent url('../images/icons/compress.png') no-repeat left top}
.computer{background:transparent url('../images/icons/computer.png') no-repeat left top}
.cross{background:transparent url('../images/icons/cross.png') no-repeat left top}
.disk{background:transparent url('../images/icons/disk.png') no-repeat left top}
.error{background:transparent url('../images/icons/error.png') no-repeat left top}
.email{background:transparent url('../images/icons/email.gif') no-repeat left top}
.exclamation{background:transparent url('../images/icons/exclamation.png') no-repeat left top}
.film{background:transparent url('../images/icons/film.png') no-repeat left top}
.folder{background:transparent url('../images/icons/folder.png') no-repeat left top}
.group{background:transparent url('../images/icons/group.png') no-repeat left top}
.heart{background:transparent url('../images/icons/heart.png') no-repeat left top}
.house{background:transparent url('../images/icons/house.png') no-repeat left top}
.image{background:transparent url('../images/icons/image.png') no-repeat left top}
.information{background:transparent url('../images/icons/information.png') no-repeat left top}
.magnifier{background:transparent url('../images/icons/magnifier.png') no-repeat left top}
.money{background:transparent url('../images/icons/money.png') no-repeat left top}
.new{background:transparent url('../images/icons/new.png') no-repeat left top}
.note{background:transparent url('../images/icons/note.png') no-repeat left top}
.page{background:transparent url('../images/icons/page.png') no-repeat left top}
.page_white{background:transparent url('../images/icons/page_white.png') no-repeat left top}
.plugin{background:transparent url('../images/icons/plugin.png') no-repeat left top}
.accept{background:transparent url('../images/icons/accept.png') no-repeat left top}
.add{background:transparent url('../images/icons/add.png') no-repeat left top}
.camera{background:transparent url('../images/icons/camera.png') no-repeat left top}
.brick{background:transparent url('../images/icons/brick.png') no-repeat left top}
.box{background:transparent url('../images/icons/box.png') no-repeat left top}
.calendar{background:transparent url('../images/icons/calendar.png') no-repeat left top}

/* Highlights */
.highlight-1,
.highlight-2,
.highlight-3,
.highlight-4{padding:1px 5px}

/* Colors for spans */
span.clear,
span.clear-1,
span.clear-2,
span.color,
span.color-1,
span.color-2,
span.color-3,
span.color-4,
span.color-5,
span.color-6,
span.color-7{display:block; padding:5px 10px; margin-bottom:10px}

/* ordered lists */
ol{padding-left:28px; list-style-position:inside}

ol.dec{list-style-type:decimal; list-style-position:inside}

ol.roman{list-style-type:upper-roman; list-style-position:inside}

ol.alpha{list-style-type:lower-alpha; list-style-position:inside}

ol.decimalLeadingZero{list-style-type:decimal-leading-zero; list-style-position:inside}

/* unordered lists */
ul.bullet1,
ul.bullet2,
ul.bullet3,
ul.bullet4,
ul.circle1,
ul.circle2,
ul.square1,
ul.square2,
ul.square3{padding-left:18px}

ul.bullet1 li,
ul.bullet2 li,
ul.bullet3 li,
ul.bullet4 li,
ul.circle1 li,
ul.circle2 li,
ul.square1 li,
ul.square2 li,
ul.square3 li{margin:10px 0!important; line-height:0.83em!important; list-style-position:inside; overflow:inherit}

ul.circle2{list-style-type:circle}

ul.square1{list-style-type:square}

/* Numbers */
div.number1 span{padding:4px}

div.number2 span{padding:4px; color:#fff}

/* Definition lists */
dl.def1 dt,
dl.def2 dt,
dl.def3 dt{margin:10px 0 5px 0}

dl.def1 dd,
dl.def2 dd,
dl.def3 dd{padding-left:25px}

dl.def2 dt{text-decoration:underline}

dl.def3 dt{font-weight:bold}

/* acronyms and abbrs */
acronym,
abbr{border-bottom-width:1px; border-bottom-style:dotted}

acronym:hover,
abbr:hover{border-bottom-style:solid; cursor:pointer}

/*
 * typography.css
 */
 
pre,
.code1,
.code2{background:#f7f7f7;color:#000;}

pre,
.code1{border-left:5px solid #ffae00!important}

.code2{border-top:5px solid #ffae00; border-bottom:5px solid #ffae00}

.code3{border-top:1px solid #ffae00; border-bottom:1px solid #ffae00}

.code3 h4{background:#ffae00;color:#fff;font-weight:bold}

p.info1,
p.info2,
p.info3,
p.info4{background:transparent url('../images/icons/info.gif') no-repeat left center}

p.warning1,
p.warning2,
p.warning3,
p.warning4{background:transparent url('../images/icons/warning.gif') no-repeat left center}

p.tips1,
p.tips2,
p.tips3,
p.tips4{background:transparent url('../images/icons/tips.gif') no-repeat left center}

p.info2,
p.info4{border-top:#d1e8f5 solid 1px; border-bottom:#d1e8f5 solid 1px; background-position:3px center}

p.info3,
p.info4{background-color:#f4fbff; background-position:7px center}

p.warning2,
p.warning4{border-top:#f5d1d1 solid 1px; border-bottom:#f5d1d1 solid 1px; background-position:3px center}

p.warning3,
p.warning4{background-color:#f6eeee; background-position:7px center}

p.tips2,
p.tips4{border-top:#f5f4aa solid 1px; border-bottom:#f5f4aa solid 1px; background-position:3px center}

p.tips3,
p.tips4{background-color:#fffff3; background-position:7px center}
blockquote div.blockquote1{background:transparent url(../images/style1/typography/open1.png) no-repeat left bottom}
blockquote div.blockquote1 div{background:transparent url(../images/style1/typography/close1.png) no-repeat right top}
blockquote div.blockquote2{background:transparent url(../images/style1/typography/open1.png) no-repeat left top}
blockquote div.blockquote2 div{background:transparent url(../images/style1/typography/close1.png) no-repeat right top}
blockquote div.blockquote3{background:transparent url(../images/style1/typography/open2.png) no-repeat left bottom}
blockquote div.blockquote3 div{background:transparent url(../images/style1/typography/close2.png) no-repeat right top}
blockquote div.blockquote4{background:transparent url(../images/style1/typography/open2.png) no-repeat left top}
blockquote div.blockquote4 div{background:transparent url(../images/style1/typography/close2.png) no-repeat right top}

div.legend1 h4,
div.legend2 h4,
div.legend3 h4,
div.legend4 h4,
div.legend5 h4,
div.legend6 h4{background:#767676;color:#fff}

div.legend3 h4:first-child,
div.legend5 h4:first-child{background:#fff;color:#767676}

div.legend4 h4:first-child,
div.legend6 h4:first-child{border:solid 1px #767676!important;background:#fff;color:#767676}

div.legend1,
div.legend5,
div.legend6{border:solid 1px #767676}

div.legend2,
div.legend3,
div.legend4{border-top:solid 1px #767676; border-bottom:solid 1px #767676}

.highlight-1{background:#ffffda}
.highlight-2{background:#767676; color:#fff}
.highlight-3{background:#ffae00; color:#fff}
.highlight-4{background:#0d0d0d; color:#fff}
span.clear{border-top:1px solid #767676; border-bottom:1px solid #767676; color:#767676}
span.clear-1{border-top:1px solid #ffae00; border-bottom:1px solid #ffae00; color:#767676}
span.clear-2{border-top:1px solid #ccc; border-bottom:1px solid #ccc; color:#ccc}
span.color{color:#767676}
span.color-1{color:#ffae00}
span.color-2{color:#767676; border-left:2px solid #767676}
span.color-3{color:#ccc; border-left:2px solid #ccc}
span.color-4{color:#767676; background:#eee}
span.color-5{color:#fff; background:#ffae00}
span.color-6{color:#d48d1c; background:#ffe; border-top:1px solid #e9e9a1; border-bottom:1px solid #e9e9a1}
span.color-7{background:#0d0d0d; color:#fff}
ul.circle1{list-style-image:url(../images/style1/typography/bullet3ul.png)!important}
ul.circle2{list-style-type:circle}
ul.bullet1{list-style-image:url(../images/style1/typography/bullet_ol_1_dark.png)!important}
ul.bullet2{list-style-image:url(../images/style1/typography/bullet1ul.png)!important}
ul.bullet3{list-style-image:url(../images/style1/typography/bullet2ul.png)!important}
ul.bullet4{list-style-image:url(../images/style1/typography/bullet_ol_1_color.png)!important}
ul.square1{list-style-type:square}
ul.square2{list-style-image:url(../images/style1/typography/bullet_squ1_dark.png)!important}
ul.square3{list-style-image:url(../images/style1/typography/bullet_squ1_color.png)!important}
div.number1 span{background:transparent url(../images/style1/typography/bullet_ol_2.png) no-repeat center center; color:#fff}

div.number2 span{background:transparent url(../images/style1/typography/bullet_ol_2_color.png) no-repeat center center; color:#fff}


Can You help me?

Regards, Thomas.

PS: The typography from update-package isn't working for me. There isn't showing any formattings.

Hi

Are You sure You did used GK Typography inside article? The fix file is not so good because of the fact that it's not working only for article content but globaly on the site. So basicly when You have used the style class for typography it must work.

Hello teitbite,

thanks for your feedback!

I have the article changed. That show different formats from typography.

Test-Article

Only the fix file show typography. When I use the typography file from template update - not typography is showing.

Sorry for my english. Hope you can understand me

Regards, Thomas.

Hello,

I have on a test-installation remove the old template and install the new template version 1.1.0.

The typography ist not showing.

Test

Regards, Thomas.

PS: <div class="code1"> works and change the color (color of template style) too

But only <div class="code1">

Hi

Are You sure? I can see more styles than just "code1" works

teitbite wrote:

Hi

Are You sure? I can see more styles than just "code1" works

1)

You are right! BUT in this example I used the fix file. There works typography BUT "code1" or "Bullet4" etc. NOT change the color, when I change the template color at the footer (red, green, blue, neutral). Here the link:

Typo ok with fix file, but no change the color

2)

The template update (version 1.1.0) show nothing typography. I have deinstall the template and install the new version. You can see this here:

New version 1.1.0 - typo complete not working, only "code1", and code1 change the color

Attention: That are different domains:

www.kinderhilfe-netzwerk.de and
www.demo.kinderhilfe-netzwerk.de

Regards, Thomas.

Hello!

OK, since yesterday (afternoon) the gavick demo site isn't showing typography.

Demo-Site

Template-Update?

Where the most styles are not showing too. Pictures for messages etc. are not showing.

Styles with color changing are showing e.g. gk_highlight-2 / gk_code2 / gk_code3 / gk_bullet4 / gk_square3 / gk_number2 / gk_color-5.

BUT "gk_code1" is only showing the blue color.

Regards, Thomas.

Hi

Ok so I'm sending this back to our programmer. Thanks.

teitbite wrote:

Hi

Ok so I'm sending this back to our programmer. Thanks.

Hello teitbite,

thanks for your feedback.

I think the fix file was on the right way !!!

See here.

Regards, Thomas.

Hi

I've just talked to the programmer. Typography works ok even on demo site (please clear browser's cache - worked for me ).

The problem now is that the last fix changed the names of the classes so if You used to add typography into article before the update it will gone. To fix it please copy the old typo.css into the new one and use both at the same time. Or edit every article with typo and add it one more time.

teitbite wrote:

Hi

I've just talked to the programmer. Typography works ok even on demo site (please clear browser's cache - worked for me ).

The problem now is that the last fix changed the names of the classes so if You used to add typography into article before the update it will gone. To fix it please copy the old typo.css into the new one and use both at the same time. Or edit every article with typo and add it one more time.

Now is all ok. Many thanks for the great support and a nice weekend.

Regards, Thgomas.