Joomla Templates Club 406,261 posts

[kevinburk Friend kevinburkJoin date: January 2014Posts: 46Downloads:47Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#194255

Can anyone provide clear, accurate documentation on how to customize the look and styles of the JA Masshead module? I’m at my wits end here. I’ve tried to follow the “documentation” provided here, and nothing works.

I want to be able to customize the background color, change fonts, and select a background image. Apparently, the only way to do this is to modify either the component or the related css files, but I can’t find any of them.

I added the extra php line to the component in the templates, and it still won’t display a background image.

I can’t find the CSS files associated with any of the styles of the FIXEL template (which is what I’m trying to figure out). I assume that it’s template-specific CSS that is overriding everything style-wise with the Masshead module, but after three hours of searching, I can’t find those CSS files or any guidance on how to edit them.

1 user says Thank You to kevinburk for this useful post

1. regeneron

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

#520442

Hi Kevin:

It would be helpful if you could provide the url of the site you’re working on – so we can try to take a look and see if we can help you out with suggestions/recommendations.

[kevinburk Friend kevinburkJoin date: January 2014Posts: 46Downloads:47Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#520445

Tom,

I’m working on a FIXEL quickstart site from a clean install. It’s not a site-specific issue, it’s a “I can’t get this to work or figure out how to alter anything here” issue.

The url is http://burkdesigngroup.com/fixel/ but it’s only got the sample data installed.

I did figure out a few things, however. The module class “highlight” seems to be what prevents the images from showing in the background, and in some way seems to control the color of the big Masshead square in the template. But I can’t figure out how to just set the background color of the Masshead. I can get rid of the highlight class in the module settings (and then my background image(s) show), but I can’t set a background image or color that takes up the entire box area. No matter what I do, the lower third of the box is always white.

I assume that whatever I have to do to customize the styles in the FIXEL template will also apply to any other template that uses this module.

As far as I can tell, almost all of the Masshead module settings are controlled by adding module class suffixes in the “advanced” tag, and I’ve been able to find most of those in the template.css file — although I can’t seem to get the level of control that I’m looking for.

So is there a way to define a css class or module suffix that will override all of the template-based settings and provide one-stop control over the following:

• module background color (for the full size of the Masshead module)
• font selection and formatting for the module
• background image for the module

Obviously, for the FIXEL template, it needs to allow the big-padding css and the grid size css to stay in place.

I’m assuming that a well-placed css module suffix would take care of all of these issues? Although I’m at a loss for how to write it, or where to place it in the template.css file.

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

#520545

<em>@kevinburk 408450 wrote:</em><blockquote>Can anyone provide clear, accurate documentation on how to customize the look and styles of the JA Masshead module? I’m at my wits end here. I’ve tried to follow the “documentation” provided here, and nothing works.

I want to be able to customize the background color, change fonts, and select a background image. Apparently, the only way to do this is to modify either the component or the related css files, but I can’t find any of them.

I can’t find the CSS files associated with any of the styles of the FIXEL template (which is what I’m trying to figure out). I assume that it’s template-specific CSS that is overriding everything style-wise with the Masshead module, but after three hours of searching, I can’t find those CSS files or any guidance on how to edit them.</blockquote>

Kevin:

It’s actually a realtively simple process – especially with the assistance of

Click the link above and take a look at the tutorial – I think you’ll find it’s easier than you think.

😎

[kevinburk Friend kevinburkJoin date: January 2014Posts: 46Downloads:47Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#520590

Tom,

It’s not simple at all. I’m well-versed in Firebug, and I was STILL not able to figure out exactly what CSS controls the module.

There are multiple class levels —*all of which seem, fundamentally, to alter and override the .highlight class —*and only after extensive trial, error, and revisions to the CSS file, was I able to set the background color of the module by overriding cascaded .highlight classes in no fewer than four different places.

Is it not possible to set a new class description that, when called, can override ALL of the other CSS and allow you to set a background color (or image), and control the font and typography of the Masshead module?

Obviously, the answer is “of course it’s possible.” I’m asking for some help on how to do that and where it would have to show up in the cascade so that it overrides all of the previous style settings. It seems like a “hack” like this would be of immense value to users of the plug-in, on whatever template they use it, since the plug-in itself does not provide full documentation or control over the styles. Ideally, it should be a class that can get called at the end of the module class suffix list.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#520771

Hi Kevin,

In order to display the Masshead module with a background image, you can extract my attached folder to templates/ja_fixel/html/ path. Then input the same content format of Masshead description as we guided inside the documentation.

On JA Fixel template, you can change the styles of Masshead with fonts, background color by creating a custom.css file at templates/ja_fixel/css/ path and insert the css rules into such file:

.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;
}

.t3-module.highlight .highlight,
.module.hightlight .highlight {
background: #3a51a3
font-weight: 300;
}

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

Change to the font, background styles you want.

---

Attachments:

1. mod_jamasshead.zip

1 user says Thank You to phong nam for this useful post

1. kevinburk

[phoenix28 Friend phoenix28Join date: March 2012Posts: 190Downloads:331Uploads:16 Thanks: 29 Thanked: 1 times in 1 posts]

#521588

does this module and css apply to anyone?:)

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#521590

@phoenix28: The answer is yes. However, you will need to adjust the background image size of Masshead module to fit your Fixel Homepage layout.

[phoenix28 Friend phoenix28Join date: March 2012Posts: 190Downloads:331Uploads:16 Thanks: 29 Thanked: 1 times in 1 posts]

#521598

thanks! i tried it and it works.

however, it’s still different with what i wanted to do. i’m currently using orange theme, i want to change the entire orange colors in the entire website to another color. in which css do i need to change it? can’t seem to find it yet :-[

thanks!

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#521606

@phoenix28: An easy approach is to use available themes we created for JA Fixel template. Just go to Template Manager >> JA_Fixel_Styles >> Theme tab >> Select the available theme you want. Then assign this template style to Home menu item.

If you want to change the specific color of the entire Fixel site, you can modify the /templates/ja_fixel/css/themes/your_theme/template.css file.The separated color of this theme will be defined for links, navigation, buttons and evene Masshead module.

---

Attachments:

1. 

[phoenix28 Friend phoenix28Join date: March 2012Posts: 190Downloads:331Uploads:16 Thanks: 29 Thanked: 1 times in 1 posts]

#521613

i would love to try changing the css files however i’m facing a new problem. after i upgraded joomla, the template page is now giving me blank page. any fix on this?:((

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#521711

@phoenix28: The best solution in this case is to roll back to previous Joomla version by extracting the site’s backup.

However, if you forgot to take a site’s backup before upgrading Joomla. There is another potential solution with 2 steps that may help your template load the layout properly again:

– Backup your template modifications, especially templates/ja_fixel/ folder.

– Try to update the latest version of this template. I strongly suggest you try this step because the recent JA Fixel update is completely compatible with even Joomla 3.2.2.

Updated: There is a small bug of our T3 system plugin on new Joomla 3.2.2 that you can find the fix at http://www.joomlart.com/forums/topic/white-screen/

Note: In case, if the suggestions above do not work, you can send me PM with both admin login and FTP credentials. I will be happy to take a closer look.

[Author]

Posts