Joomla Templates Club 406,261 posts

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#163261

I am trying to change the background color of my my JA Methys template – but I am having SOO much problems. I have HEAVILY modified the template so that might be why, I could have a deleted some code or something. (Its Joomla 1.6)

When I go to my template.css file and change this:

body#bd { background: #fff; color: #000; }

to

body#bd { background: #000; color: #000; }

It changes ALL the background colors, including the background of articles, all I want to change is the background of the website.

I also would like to know how to add a shaddow around the edges of the website.

Thanks.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#388469

This won’t work.
body#bd { background: #000; color: #000; }

The following would work

File: templates/ja_methys/css/template.css

For Home Page & inner page content change here :

Replace this

#ja-container .main {
background: #FFFFFF;
}


with

#ja-container .main {
background: #FF0000 !important;
}


For Home Page Right Column, Remove the image and apply the color code:

Replace this With

#ja-right {
background: url("../images/dot.gif") repeat-y scroll left top #F5F5F5;
}


With

#ja-right {
background: #FF0000;
}


Note: If you Find my Post useful please click on the Thanks Icon

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#388472

Thanks for the help! but I actually found out what I deleted and got that corrected.

Do you have any idea how to create the shadow effect around the website edges?

Thanks!

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#388478

Check this link for shadow effect. This is CSS3 format. http://css-tricks.com/snippets/css/css-box-shadow/
and
Check this for making it compatible with all IE browsers http://fetchak.com/ie-css3/

Note: If you Find my Post useful please click on the Thanks Icon

1 user says Thank You to chavan for this useful post

1. 0dass0a9d-asd

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#388576

Hey thanks for the help Chavan,

But I am not super familiar with CSS where would I implement this code?

Thanks.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#388578

please provide your site Url and also Need a picture how and where do you need the shadow

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#388589

Hey Chavan,

The link is http://www.hevula.com/testsite

And I want the shadow just on the edges of the side (Like a drop shaddow effect)

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#388602

you should add a another wrapper DIV just below the exiting wrapper DIV tag And end it before the start of Footer DIV tag

And then you should apply the shadow as suggested . then only you can view the shadow on both sides.

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#388620

Sorry, but I just can’t figure out where to implement that code.

.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}

Can you give me more directions?

I have attached a picture of where I want the shadow.

Thanks!

---

Attachments:

1. 

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#388624

As it is just the left and right sides of your overall site it would probably be simpler for you to just do it with a background image.

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#388630

Ahh yes this is the last thing and then I am done, So I am hoping to get this done quickly.

Should I just create a .png thats the same width as the page (little bigger) but only like 10px tall? with the shadow on the edges?

I can make this image, but can you explain how I will implement it?

Thanks

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#388640

The easiest way to explain it is to give you an example of a page that does the same. Take a look at the JA Cooper demo. Click on the styles button then select in the right menu the carbon style. You will see it has a nice image generated shadow effect. take a look at the code of carbon.css line 1 and the image it uses.


body#bd {
background: url("../../images/carbon/body-bg.gif") repeat-y scroll center top #F5F5F5;
color: #AAAAAA;

}

Simple really.

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#388652

Ah, its just not working.

I implemted this code in my template.css file and it is not showing the image. I made sure the image is the right size and all. If I change the color in that line of code it does change the color in my website, so I am sure I am in the correct css file. But that code jus doesnt show my image (I have the right link too).

Any ideas?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#388656

What is the url of your image?

I know images are working because if I put the following in your template.css at line 10 using firebug I see what I would expect, the default logo tiled accross the background.


body#bd {
background: url("../images/logo.png") repeat scroll 0 0 transparent;
color: #000000;

}

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#388658

Hey Phil,

Ok I have been working on my development server on my pc so I uploaded the site back to the site http://www.hevula.com/testsite

And the border I am trying to use is at http://www.hevula.com/testsite/images/body-bg.png – this is the first one I have ever made, so if it doesnt look good I will be changing it.

But yes can you try to get it to work? because its not working at all for me.

Thanks allot!

[Author]

Posts