Joomla Templates Club 406,261 posts

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#198934

Hello,

I have duplicate the front bottom banner, I could not figure out how to change the top banner backgound color.
I would like to change the top banner with a blue color
and keep the bottom one as is green.

Please help.

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#539388

Here is what you can try . . . . .

If you have not yet done so, create a new file called “custom.css” within file path –> /templates/ja_medicare/css
(so the file path should ultimately be –>

What it looks like you will need to do is create a custom image for the background
– with the “color split” you are wanting.

Once you have created the background image, you would modify the following CSS rule
(which you should paste within your custom.css file).


.row-feature.box-background-secondary .box-background-secondary {
background: none repeat scroll 0 0 #1bbc9b
}

Make Sense?

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#539435

sorry i’m confused here.
the original one doesn’t not have any image. why I should create image, ? do you have a sample of the image?
also one i insert the code, do I need to add Module Class Suffix

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#539529

<em>@okkhalid 432924 wrote:</em><blockquote>sorry i’m confused here.
the original one doesn’t not have any image. why I should create image, ? do you have a sample of the image?
also one i insert the code, do I need to add Module Class Suffix</blockquote>

I suggested utilizing a background image because that area/element does not appear to be divided into two separate divs so as to assign two different colors for backgrounds.

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#539546

Do you mean I need to create full width image to place it in that area?
Will that effect on the downloading time?
also, what is the perfect size, for site responsive ?

Is there is any way to change just the color of it?

Thanks,

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#539547

You can actually create a “piece” of the dual color background image, and then designate it to “repeat-x” so that the image repeats/stretches along the horizontal x-axis.

Here are some informational resources to help you understand this property/function . . . .

http://www.sitepoint.com/web-foundations/background-repeat-css-property/

http://www.tutorialspoint.com/css/css_background-repeat.htm

http://www.codertools.com/css_help_guide/css_background-repeat.aspx

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#539595

Hi Tom,

I create an image and put it in the image folder, then in the custom CSS I placed this code

.row-feature.box-background-secondary2 .box-background-secondary {
background-image:url(/images/bgb.gif); background-repeat: repeat-x;
}

nothing changed

then I put this code to the Module Class Suffix: memeber:

box-background-secondary2 row-feature-full

so i rename that to: box-background-secondary2

still no success.

Thanks,

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#539668

<em>@okkhalid 433127 wrote:</em><blockquote>Hi Tom,

I create an image and put it in the image folder, then in the custom CSS I placed this code
</blockquote>

What is the file path for your custom.css file?

Also, is there a reason you added a “2” to the CSS rule? – i.e.

.row-feature.box-background-secondary2 .box-background-secondary

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#539674

Hi Tom,

The custom.css is inside the ja-medicare template css folder

“/css/custom.css” in template “ja_medicare”.

I put “2” as I thought it should be new one for this new part., also when I did without the “2” there was no effect.

Thanks,

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

#539686

I have add a class in module suffix of the Members Module as ” bgblue”

Then created a css code in this file /templates/ja_medicare/css/themes/green/template.css

.bgblue{
background:#0174DF !important;
}

you change the color coding to any color. I think the issue is fixed

1 user says Thank You to chavan for this useful post

1. TomC

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#539691

Thank you Chavan for the help. God bless 🙂

[Author]

Posts