Joomla Templates Club 406,261 posts

[vitweb Friend vitwebJoin date: April 2014Posts: 23Downloads:0Uploads:2 Thanks: 4]

#203747

Hi,

I would like to change the color of buttons (I am using blue theme for Uber Restaurant) from blue to gray. I would like also to change back-color for the info box (the one on the map) and other parts of the template. May I do this?

Thank you,
Vittorio

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

#559362

You absolutely can – though it will help us help you if you can specify the “other parts of the template” you want to modify as well.

As for the button background color issue . . . . .

If you haven’t yet already done so, create a new file called “custom.css” within file path –> /templates/ja_uber/css/

Within that custom.css file, paste the following CSS rule:


.btn-primary {
background-color: #039be5;
border-color: #039be5;
color: #ffffff;
}

Modify the “background-color” and “border-color” properties to whatever color hex code you wish.

Similarly, for the contact box background info (within the “map” section) . . . .

Paste the following within the custom.css file:


.uber-contact-info.style-2 .info, .uber-contact-info.style-1 .info {
background-color: #039be5;
color: #ffffff;
padding: 26px;
position: absolute;
width: auto;
}

Again, modify the “background-color” property to whatever color code you wish.

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Hope That Helps.

[vitweb Friend vitwebJoin date: April 2014Posts: 23Downloads:0Uploads:2 Thanks: 4]

#559384

Hi Tom

Thank you for so quick answer. I have followed your instructions but colors don’t change. Let resume my steps:

1- Created file custom.css (with new colors)
2- Saved it on /templates/uber/css
3- Cleared browser cache (Mozilla, IE, Chrome)
4- Refreshed page

I may wrong somewhere… but where?

I take the occasion to specify the other parts of the template I would like to modify:
– I would change main menu colors (my clients have identity and log in dark and light gray)
– I would like to use different font (google font)

Thank you for your support,
Vittorio

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

#559385

Do me a favor …. temporarily set “Optimize CSS” to “off” within your Template Manager–General settings.

Let me know when you’ve done this.

[vitweb Friend vitwebJoin date: April 2014Posts: 23Downloads:0Uploads:2 Thanks: 4]

#559386

Hi Tom,

Done. the button is now gray, hover is sttill blu andf contact is still blue.

Thank you

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

#559387

Add this to your custom.css file . . .


.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background-color: #bebebe;
border-color: #595959;
}

and the following as well . . .


.uber-contact-info.style-2 .info, .uber-contact-info.style-1 .info {
background-color: #bebebe;


SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

[vitweb Friend vitwebJoin date: April 2014Posts: 23Downloads:0Uploads:2 Thanks: 4]

#559388

Sorry, Tom, nothing changes.

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

#559389

<em>@vitweb 458540 wrote:</em><blockquote>Sorry, Tom, nothing changes.</blockquote>

Can you send me a temporary admin login – via PM ??

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

#559395

Firstly, you were missing a couple of important semi-colons after some color codes within your custom.css file.
I fixed them for you.

As for the contact box background color, here is what I did . . . . .

Within file path —> /templates/uber/acm/contact-info/css/style.css
at line 87, modified as follows:


.uber-contact-info.style-2 .info, .uber-contact-info.style-1 .info {
background-color: #bebebe
color: #ffffff
padding: 26px;
position: absolute;
width: auto;
}

Better ??

P.S. (For some annoying reason, the Forum software is removing the semi-colons from after the color codes. Always remember to include a semi-colon at the end of any CSS property)

1 user says Thank You to TomC for this useful post

1. vitweb

[vitweb Friend vitwebJoin date: April 2014Posts: 23Downloads:0Uploads:2 Thanks: 4]

#559454

Thank you Tom,

It much better now! Just I see that the button “ORDINA” on the slideshow doesn’t change hover color. How can I solve this?

I know I am asking too many questions on the same post, but I would like to take the occasion to ask how I can change the font for all the template (I want to use Google fonts).

Thank you for your support.

[vitweb Friend vitwebJoin date: April 2014Posts: 23Downloads:0Uploads:2 Thanks: 4]

#559458

I have solved the button hover issue. It was not so hard (with your advice).

Please assist an the matter of fonts.

Thank you.

[Author]

Posts