Joomla Templates Club 406,261 posts

[global21 Friend global21Join date: March 2011Posts: 134Downloads:37Uploads:43 Thanks: 31 Thanked: 5 times in 3 posts]

#167757

HI,

How do i change the colour of the outter box around the search box. as you can see from the screen shot i have changed the header to white and now this is blending in which looks odd.

thanks in advance.

---

Attachments:

1. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#408249

Hi global

Can you provide a link to your page ?

1 user says Thank You to pavit for this useful post

1. global21

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#408251

Hi,

You can find the proper code on template.css


#ja-search form {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: #0A0A0A;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
border-bottom-width: 10px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #FFFFFF;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 10px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #FFFFFF;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 10px;
border-top-color: #FFFFFF;
border-top-style: solid;
border-top-width: 10px;
height: 23px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 7px;

}

And change colors according to your needs!

Regards

Manos

1 user says Thank You to Manos for this useful post

1. global21

[pritam Friend pritamJoin date: April 2011Posts: 609Downloads:0Uploads:29 Thanks: 11 Thanked: 125 times in 113 posts]

#408306

Hello global21 ,

To Change colour of the outter box on search

Find this code at template.css

<blockquote>#ja-search form {
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-size: auto auto;
background-attachment: scroll;
background-color: #0A0A0A;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
border-bottom-width: 10px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #FFFFFF;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 10px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #FFFFFF;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 10px;
border-top-color: #FFFFFF;
border-top-style: solid;
border-top-width: 10px;
height: 23px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 7px;
}
</blockquote>

Change this Code to :-

<blockquote>#ja-search form {
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-size: auto auto;
background-attachment: scroll;
background-color: #0A0A0A;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
border-bottom-width: 10px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #FFFFFF;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 10px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #FFFFFF;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 10px;
border-top-color: #FFFFFF;
border-top-style: solid;
border-top-width: 10px;
height: 23px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 7px;
border-color:#FF0000 /*change color code as per requirement*/
}</blockquote>

1 user says Thank You to pritam for this useful post

1. global21

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#408309

<em>@global21 262229 wrote:</em><blockquote>HI,

How do i change the colour of the outter box around the search box. as you can see from the screen shot i have changed the header to white and now this is blending in which looks odd.

thanks in advance.</blockquote>
Hi,
You change this code from /templates/ja_minisite/css/template.css in the line #132

#ja-search form {
background: #0A0A0A;
border: white solid 10px; < change this line
height: 23px;
overflow: hidden;
padding: 7px 5px 0 5px;
}

1 user says Thank You to khoand for this useful post

1. global21

[Author]

Posts