Joomla Templates Club 406,261 posts

[midsomer Friend midsomerJoin date: February 2010Posts: 82Downloads:0Uploads:13 Thanks: 27 Thanked: 5 times in 1 posts]

#149469

I want to use custom images (web buttons) for the Search button on the front page of Teline III. I edited the template.css as below, but it still uses the but-bg.gif button image. Any tips on how I can do this?

template.css code edits

#ja-search .button {
margin-left: 5px;
font-size: 105%;
font-weight: bold;
text-transform: none;
background: url(../images/but-out.png) repeat-none bottom #fff !important;
color: #fff;
}

#ja-search .button:hover, #ja-search .button:focus {
margin-left: 5px;
font-size: 105%;
font-weight: bold;
text-transform: none;
background: url(../images/but-in.png) repeat-none bottom #fff !important;
color: #fff;
}

In Firebug I see the background being applied is from the .button css class instead of being overridden by my edits, despite try to use !important to force it.

.button {
font-size: 92%;
background: url(../images/but-bg.gif) repeat-x bottom #fff; this is what is used
color: #666;
border: 1px solid #ddd;
padding-top: 1px;
padding-bottom: 1px;
cursor: pointer;
text-transform: uppercase;
}

Hopefully someone has done this already.

I searched the forum without luck, but I’m wondering if the code needs changed in templatesja_teline_iiihtmlmod_searchdefault.php. If so, I could do with some help on the php, rather than hacking around.

TIA

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#336056

hi you

try to change repeat-none to no-repeat and try to see your page again

if not, send me your live url for checking.

1 user says Thank You to JA Developer for this useful post

1. midsomer

[midsomer Friend midsomerJoin date: February 2010Posts: 82Downloads:0Uploads:13 Thanks: 27 Thanked: 5 times in 1 posts]

#336086

Hi Developer,

That fixed it. My stupid error not editing correctly :-[

Thanks a bunch.

[midsomer Friend midsomerJoin date: February 2010Posts: 82Downloads:0Uploads:13 Thanks: 27 Thanked: 5 times in 1 posts]

#336095

I thought this may be of use to others, so here is my final working edits.

template.css

#ja-search .button {
margin-left: 5px;
padding-bottom: 5px; /* needed to align button with input box */
font-size: 105%;
font-weight: bold;
text-transform: none;
background: url(../images/but-out.png) no-repeat;
color: #060;
width: 72px; /* button image 70px wide */
height: 24px; /* button image 22px high */
border: none; /* disable, not needed */
}

#ja-search .button:hover, #ja-search .button:focus {
background: url(../images/but-in.png) no-repeat;
color: #FFF;
}

---

Attachments:

1. 

1 user says Thank You to midsomer for this useful post

1. bluefcnet

[Author]

Posts