Joomla Templates Club 406,261 posts

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#134442

Hi,

I like Rutile a lot and I’ve been messing around with the CSS a bit. I’d love to change the background color into something else but since the strokes around the modules are a dropshadow without transparency, the will always appear as white strokes.

Is it possible to get all the gif images like box-bl.gif in png format with transparency, or do I have to do it manually?

I hope some one can help me with this.

Thanks in advance!

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#275396

Can you give us your live URL, any screenshot or more details of the problem will be helpful

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#275398

Sure. The url is: http://nvandijk.com/skillsmasters/

Screenshot:

As you can see now when I change the default background color there are white strokes around the boxes.

Is it possible to get those images with transperency?

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#276224

Any news on this topic?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#276227

<blockquote>Is it possible to get those images with transperency?</blockquote>
I don’t understand your question
Css for white strokes around:
1.template.css (line 694)

div.module, div.module_text, div.module_menu, div.module_hilite, div.ja-box-br {
background:#FFFFFF url(../images/box-br.gif) no-repeat scroll right bottom;
clear:both;
float:left;
overflow:hidden;
padding:0;
width:100%;
}
2.template.css (line 707)

div.module div, div.module_text div, div.module_menu div, div.module_hilite div, div.ja-box-bl {
background:transparent url(../images/box-bl.gif) no-repeat scroll left bottom;
padding:0;
}
3.template.css (line 716)

div.module div div, div.module_text div div, div.module_menu div div, div.module_hilite div div, div.ja-box-tr {
background:transparent url(../images/box-tr.gif) no-repeat scroll right top;
padding:0;
}
4.template.css (line 725)

div.module div div div, div.module_text div div div, div.module_menu div div div, div.module_hilite div div div, div.ja-box-tl {
background:transparent url(../images/box-tl.gif) no-repeat scroll left top;
padding:4px 3px 4px 4px;
}

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#276443

The modules have a drop shadow around them. These drop shadows are gif files. Do you have those gif files with transperency?

I hope this image explains what I want to do.

Thanks!

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#277270

I made transparent PNG files of the border gif files and now it looks like this: http://nvandijk.com/skillsmasters/

any ideas?

thanks!

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#277410

I seem to get closer and closer.
I checked your code and I replaced the your code:

<em>@nguoiabcd 87032 wrote:</em><blockquote>

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.ja-box-br {
background:#FFFFFF url(../images/box-br.gif) no-repeat scroll right bottom;
clear:both;
float:left;
overflow:hidden;
padding:0;
width:100%;
}

</blockquote>

With this one.

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.ja-box-br {
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/box-br.png) no-repeat bottom right;
overflow: hidden;

Now I achieved my goal on the right and bottom side of the modules.
Can you help me getting it like this on all the sides?

http://nvandijk.com/skillsmasters/

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#277489

you can edit
1.template.css (line 530)

#ja-content-top {
background:transparent url(../images/content-top.gif) no-repeat scroll center top;
}

2.template.css (line 534)

#ja-content-bot {
background:transparent url(../images/content-bot.gif) no-repeat scroll center bottom;
}

you can change content-top.gif and content-bot.gif by your images

1 user says Thank You to Sherlock for this useful post

1. peterva

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#277501

Thanks nguoiabcd, I’m getting there!

But the transparent in the code doesn’t seem to be working..

#ja-content-top {
background:transparent url(../images/content-top.png) no-repeat scroll center top;
}

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#277503

I have seen those changes on your website
please clear cookie, refresh your browser

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#277507

ctrl+F5 refreshes your browsers with a new cache right?
I always refresh like that.

The sides of the main column are ok, but the top and bottom aren’t, but I did the same thing.
The same goes fot the side modules. the right an bottom sides are ok, but the upper and left side are not.

Thanks for your patience and kind help!

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#277588

Width bottom left and bottom right, you aslo must to change like as top left and top right

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#277906

I can’t get it to work.

Should I paste my whole css script? Maybe that helps..

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#278141

I modified the following files and added transparency;

box-bl.png
box-br.png
box-tl.png
box-tr.png
content-bot.png
content-center-n.png
content-center.png
content-top.png

I changed it in the css too. Are there any more files that have to be changed?

I’m doing my best to figure this out for myself, but Ican’t get it to work :((

[Author]

Posts