Joomla Templates Club 406,261 posts

[cybernun Friend cybernunJoin date: July 2009Posts: 226Downloads:0Uploads:16 Thanks: 111 Thanked: 6 times in 1 posts]

#172684

SOLVED!

I have posted and searched for a week now and, at this point, will pay for somebody’s time because I need the answer.

Working with Ja Kranos 1.7 for an artist website.
http://siteground281.com/~donnafor/draft/

HOME PAGE | Artist only wants the text “floating” over the Mass image background but the color of the Home page article is obscuring the background image. There will only be one article, no modules however, if I have to use a module to get transparency I will but then How do I get the page to fully open to any size browser?

This is a very aesthetic request and it is an urgent one.

PLEASE tell where to look, where to go, who to ask, what to do.

This is the best Forum and usually I get a quick response but none is answering.

Gratefully Yours,
Sandra

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#433413

Need to kill, edit or replace with a slightly transparent image the background: and border: found in http://siteground281.com/~donnafor/draft/templates/ja_kranos/css/template.css

LINE 586:
#ja-container .main {
background: whiteSmoke;
padding: 30px 0 10px;
}

and

LINE 716:
#ja-contentwrap {
border: 1px solid #DDD;
background: white;
margin: 0 0 20px;
padding: 20px 20px 0;
border-image: initial;
}

1 user says Thank You to jesflow for this useful post

1. cybernun

[cybernun Friend cybernunJoin date: July 2009Posts: 226Downloads:0Uploads:16 Thanks: 111 Thanked: 6 times in 1 posts]

#433416

THANK YOU SO MUCH!!!!!
I shall replace the code in template.css but not sure what “whiteSmoke” is…
Will let you know.

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#433418

white smoke – it’s the off white grayish color, the bigger box.. 🙂

1 user says Thank You to jesflow for this useful post

1. cybernun

[cybernun Friend cybernunJoin date: July 2009Posts: 226Downloads:0Uploads:16 Thanks: 111 Thanked: 6 times in 1 posts]

#433419

Nope. It’s having no effect.
#ja-container .main { background: whiteSmoke; padding: 30px 0 10px; }
#ja-contentwrap { border: 1px solid #ddd; background: white; margin: 0 0 20px; padding: 20px 20px 0; border-image: initial;}

What am I doing wrong?

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#433421

what did you change? i don’t see it edited at all. code still looks the same. you need to edit the background for the first, and remove background and change border to 0px for the second. either set to none, add transparency via css or change to a slightly transparent png if you’re wanting the box to have a see through effect…

ONE POSSIBLE OPTION WHICH WILL REMOVE THE COLOR ALTOGETHER:

LINE 586:
#ja-container .main {
background: none;
padding: 30px 0 10px;
}

and

LINE 716:
#ja-contentwrap {
border: 0px solid #DDD;
background: none;
margin: 0 0 20px;
padding: 20px 20px 0;
border-image: initial;
}

1 user says Thank You to jesflow for this useful post

1. cybernun

[cybernun Friend cybernunJoin date: July 2009Posts: 226Downloads:0Uploads:16 Thanks: 111 Thanked: 6 times in 1 posts]

#433423

WOW.
It works! I removed all color and it works! 🙂
http://siteground281.com/~donnafor/draft/

JUST ONE SMALL PROBLEM.
Because there is no color it is hard to read the text. If I could lift up the text more, I could make text white over the image
OR
get the background to be more transparent. “WhiteSmoke” is F5F5F5 and is not transparent.
Is there a way to code it with a percentage of F5F5F5?

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#433424

That’s why I mentioned… 🙂

google css transparency to learn more but one option is adding the two lines to the code

opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */

EXAMPLE:

LINE 586:
#ja-container .main {
background: none;
padding: 30px 0 10px;
}

and

LINE 716:
#ja-contentwrap {
border: 0px solid #DDD;
background: white;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
margin: 0 0 20px;
padding: 20px 20px 0;
border-image: initial;
}

1 user says Thank You to jesflow for this useful post

1. cybernun

[cybernun Friend cybernunJoin date: July 2009Posts: 226Downloads:0Uploads:16 Thanks: 111 Thanked: 6 times in 1 posts]

#433427

Brilliant. It works perfectly. :D:D
And I apologize for not understanding what you were saying.

I think however, that there are some folks out there who have older versions of IE so that will inevitably create a problem where the text cannot be read without the background.
May I impose upon you to ask this:

1. If I create a transparent .png and upload it, do I upload it to “stories” or does it need to be somewhere else?
2. Is there a way to raise the height of the Home page article (only) so that there would be no scrolling?

You are quite wonderful to help like this so I thank you.

[cybernun Friend cybernunJoin date: July 2009Posts: 226Downloads:0Uploads:16 Thanks: 111 Thanked: 6 times in 1 posts]

#433433

I UPLOADED A TRANSPARENT .png

I cannot tell if this is working with the uploaded transparent .png? Does it look right to you? 😮

THIS IS THE CODE NOW:

#ja-container .main
{ background: url(stories/bio/forma_transparent.png) no-repeat; padding: 30px 0 10px; }

#ja-contentwrap {
border: 1px solid #DDD;
background: white;
margin: 0 0 20px;
padding: 20px 20px 0;
border-image: initial;
}

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#433436

upload image to the template’s main images folder. /templates/ja_kranos/images/

code for the new bg line would be like:
background: url(“../images/MYTRANSPARENTBG.png”) repeat scroll 0 0 transparent;

NEW EXAMPLE:

#ja-contentwrap {
border: 0px solid #DDD;
background: url(“../images/MYTRANSPARENTBG.png”) repeat;
margin: 0 0 20px;
padding: 20px 20px 0;
border-image: initial;
}

1 user says Thank You to jesflow for this useful post

1. cybernun

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#433438

oh, and to kill scroll, a fast but not so pretty way of doing it would be to edit the margin..

#ja-contentwrap {
border: 0px solid #DDD;
background: url(“../images/MYTRANSPARENTBG.png”) repeat;
margin: -250px 0 20px;
padding: 20px 20px 0;
border-image: initial;
}

1 user says Thank You to jesflow for this useful post

1. cybernun

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#433440

so final example would be:

LINE 586:
#ja-container .main {
background: none;
padding: 30px 0 10px;
}

and

LINE 716:
#ja-contentwrap {
border: 0px solid #DDD;
background: url(“../images/MYTRANSPARENTBG.png”) repeat;
margin: -250px 0 20px;
padding: 20px 20px 0;
border-image: initial;
}

1 user says Thank You to jesflow for this useful post

1. cybernun

[cybernun Friend cybernunJoin date: July 2009Posts: 226Downloads:0Uploads:16 Thanks: 111 Thanked: 6 times in 1 posts]

#433442

jesflow–sorry but it does not seem to be recognizing the transparent png I uploaded.:((

http://siteground281.com/~donnafor/draft/

The code is now:

#ja-container .main { background: url(stories/bio/forma_transparent1.png) no-repeat; padding: 10px 0 10px; }

#ja-contentwrap {
border: 1px solid #DDD;
background: url(stories/bio/forma_transparent1.png) no-repeat;
margin: 0 0 20px;
padding: 20px 20px 0;
border-image: initial;
}

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#433443

see post 11: upload image to the template’s main images folder. /templates/ja_kranos/images/

the image is not uploaded, upload it. you have it elsewhere…

http://siteground281.com/~donnafor/draft/templates/ja_kranos/css/stories/bio/forma_transparent1.png

see? file not found error

then, change image to repeat

no repeat won’t do boo

and the margin thing mentioned above will kill your scroll.

1 user says Thank You to jesflow for this useful post

1. cybernun

[Author]

Posts