Joomla Templates Club 406,261 posts

[christobals Friend christobalsJoin date: January 2014Posts: 24Downloads:0Uploads:3 Thanks: 4 Thanked: 2 times in 1 posts]

#198712

Howdy all,

Can anyone shoot me the info to where in the css file I can change the color of the box that the “Hi. Fixel.” text is in. I want to change that pink/orangish color to a custom color.

Thanks!
Chris

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

#538631

Hi Chris:

So that we can try to best assist you, please provide the url of the site you’re working on.

Also, please advise as to which version of JA Fixel you are using – J2.5 or J3.x

[christobals Friend christobalsJoin date: January 2014Posts: 24Downloads:0Uploads:3 Thanks: 4 Thanked: 2 times in 1 posts]

#538632

Hey Tom,

Here is the site: http://wptdeepstacks.com/newsite/.

And I’m on J3.x

Thanks!
Chris

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

#538633

I assume that you’re referring to the big orange box on your home page, correct?

This is the “Masshead” module.

To modify the text/font style, here’s what you should do . . . .

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

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


.jamasshead .jamasshead-title {
font-family: 'novecento_widedemibold',sans-serif;
font-size: 150px;
font-weight: normal;
line-height: 1;
margin: 0;
text-indent: -13px;
word-spacing: -30px;
}

.jamasshead .jamasshead-description {
font-size: 16px;
font-weight: 300;
}

.jamasshead .jamasshead-description h3 {
font-family: 'novecento_widedemibold',sans-serif;
font-size: 30px;
font-weight: normal;
line-height: 1.3;
margin: 0 0 20px;
width: 80%;
}

With this, you can now play around with/modify the text within that box (masshead) above rules how you wish – i.e. font-family, font-size, font-weight, etc. – and the customizations will be protected from any future updates/upgrades to the template core files.

Hope That Helps

🙂

[christobals Friend christobalsJoin date: January 2014Posts: 24Downloads:0Uploads:3 Thanks: 4 Thanked: 2 times in 1 posts]

#538638

Hey Tom,

Great, thank you! Is there also a way to change the color of the big orange box?

Chris

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

#538641

<em>@christobals 431852 wrote:</em><blockquote>Hey Tom,

Great, thank you! Is there also a way to change the color of the big orange box?

Chris</blockquote>

You Bet’cha . . . Simply paste the following into your custom.css file:


.t3-module.highlight .highlight, .module.hightlight .highlight {
background: none repeat scroll 0 0 #FC615D
}

Modify the [highlighted] color hex code to/for whatever color you wish.

[christobals Friend christobalsJoin date: January 2014Posts: 24Downloads:0Uploads:3 Thanks: 4 Thanked: 2 times in 1 posts]

#538643

You the man!

Thanks so much, really appreciate your help!

Chris

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

#538644

Happy to be of assistance !!!

All the best with your continuing site development. 🙂

[Author]

Posts