pixellove | Module Class Suffix " lines color"

Since J1.6 the css code for <h3> in Module Class Suffix " lines color" has changed.
You can see immediately in the pics below what I mean:

01_original_style.jpg

J1.5 | color lines before and after the title

02_style_changed.jpg

J1.6/J1.7 | color lines before and after the title are missing

Please could you change this in the new pixellove template files?

Thank you!

Hi

Can You please show me an example of page where You have this issue ?

Hi

Can You please show me an example of page where You have this issue ?

The best example is shown here: pixellove demo site

On the left side you have the module "SKILLS" where the module class suffix " lines color" works fine.

At the bottom of the page TEMPLATES > MODULE VARIATIONS you see two modules: SUFFIX " LINES" and SUFFIX " LINES COLOR" where the module class suffix dont work correctly. There you cant see the lines in the title bar completely!

As mentioned in me previos post this CSS behavior changed from J15 to J16 and above.

Thanks for supporting,
macjaguar

Hi

Ok. But on the page You've shown this is working fine. Please show me a site where I can see a problem so I'll be able to check it and tell what is missing.

Hi teitbite

Ok. But on the page You've shown this is working fine. Please show me a site where I can see a problem so I'll be able to check it and tell what is missing.

Please try the J1.7 pixellove demo with some other web browsers and operating systems.
E.g. Apple OSX: You'l see different "picturing" with Safari and Google Chrome – Opera and Firefox are fine.

The point ist, pixellove J1.5 template works fine with all browsers and systems.

So something has to be changed in pixellove templates since J1.6

I've tried to solve this problem. But I would need some help to get this beautyfull template working fine again for all systems and web browsers.

Kind regards,
macjaguar

Hi

Sorry I still do not understand. Here are screens from my browsers on osx. Can You please show me this error on live site so I will be able to check what's going on ?

Yes!

Module SKILLS on the left position works fine.

But at the bottom of the demo both modules SUFFIX " lines" and SUFFIX " lines color" does'nt
The headlines don't have lines like in module SKILLS below.

screen1_2.jpg

screen2_2.jpg

screen1_1.jpg

Kind regards,
macjaguar

Hi teitbite!

Could you verify what the problem is?

Kind regards, macjaguar

I tried the latest version of pixellove template and the problem still isn't solved.

See the screenshots of the demo below, taken on Apple Mac OS X 10.7.2

pixellove01.jpg

the title lines are shown

pixellove03.jpg

the title lines are not shown

Can anybody else verify this behavior with different web browsers on Mac OS X?

Hi

I believe it's fixed now. Please check the last version available.

its possible to use the skills graphic from pixel love in th etemplate MYFOLIO. It looks fine.

Hi

Skills graphic is just a regular html code with some custom css code:

Code: Select all

<div class="moduletable_content">
<div class="skill"><span class="bar w50 color1">50</span>Adobe Photoshop</div>
<div class="skill"><span class="bar w20 color3">20</span>Flash</div>
<div class="skill"><span class="bar w30 color2">30</span>XHTML &amp; CSS3</div>
<div class="skill"><span class="bar w40 color4">40</span>Print Illustration</div>            </div>


Code: Select all

.skill {
    color: #3F3F3F;
    cursor: default;
    font-size: 11px;
    line-height: 11px;
    padding: 3px 0;
}
.skill > .bar {
    display: block;
    float: left;
    height: 11px;
    margin-right: 10px;
    text-indent: -999em;
}
.skill, .skill > .bar {
    -moz-transition: color 1s linear 0s;
}
.skill > .bar.w5 {
    width: 5%;
}
.skill > .bar.w10 {
    width: 10%;
}
.skill > .bar.w15 {
    width: 15%;
}
.skill > .bar.w20 {
    width: 20%;
}
.skill > .bar.w25 {
    width: 25%;
}
.skill > .bar.w30 {
    width: 30%;
}
.skill > .bar.w35 {
    width: 35%;
}
.skill > .bar.w40 {
    width: 40%;
}
.skill > .bar.w45 {
    width: 45%;
}
.skill > .bar.w50 {
    width: 50%;
}
.skill > .bar.color1 {
    background: none repeat scroll 0 0 #6B9CCF;
}
.skill > .bar.color2 {
    background: none repeat scroll 0 0 #777777;
}
.skill > .bar.color3 {
    background: none repeat scroll 0 0 #FFFFFF;
}
.skill > .bar.color4 {
    background: none repeat scroll 0 0 #333333;
}
.skill:hover {
    color: #FFFFFF;
}


Please just copy it, use Your required percentage, fix classes so it displays right width and that's all.

thanks for the fast answer

HI

No problem. But I'm just not sure if You were asking about this graph bars or about lines on the header. Just to inform You this is a code for bars only. Header is a different part of it.

I mean the bars.
But it's possible to get the code for the lines on the Header ?

Hi

Ok. Header lines are a little more complicated, because a HTML for it needs to be set into core files. So please copy file /html/modules.php form pixellove template to the one You are using now and add this code to css:

Code: Select all

.moduletable.lines > div > h3 {
    display: table;
    height: 1px;
    line-height: 1px;
}
.moduletable.lines > div > h3 > span, .moduletable.lines > div > h3 > strong {
    display: table-cell;
    height: 1px;
    line-height: 1px;
}
.moduletable.lines > div > h3 > span {
    border-right: 1px solid #777777;
    border-top: 1px solid #777777;
    font-size: 1px;
    line-height: 1px;
    text-indent: -999em;
    width: 50%;
}
.moduletable.lines > div > h3 > span:first-child {
    border-left: 1px solid #777777;
    border-right: medium none;
}
.moduletable.lines > div > h3 > strong {
    font-size: 18px;
    font-weight: normal;
    line-height: 1px;
    padding: 0 15px;
    white-space: pre;
}
.moduletable.lines.color > div > h3 > span {
    border-right: 1px solid #6B9CCF;
    border-top: 1px solid #6B9CCF;
}
.moduletable.lines.color > div > h3 > span:first-child {
    border-left: 1px solid #6B9CCF;
    border-right: medium none;
}
.moduletable.lines.color > div > h3 > strong {
    color: #FFFFFF;
}


It's possible that some more css will be require to fix headers which will not be using " lines" suffix, but this I can tell when You show me such prepared website.