I write to ask advice on how to put a border around our front page's main feature, which we created using a Joomla module. The site is chigov.com .

Formerly, in Responsive v 2.2.3, we used this custom CSS to cause a border to surround our front page's main feature:

div.grid_1 {
border: 6px solid white;outline: 2px solid #165397; overflow:visible; margin-left:3px;
}

We can't divine how to do this with custom CSS in Responsive2.

For now, our workaround has been to insert this HTML at the top of each main-feature module:

<div style="border: 6px solid white; outline: 2px solid #165397; overflow: visible; margin-left: 3px;">

We have the module assigned to only the Main Menu's Home page, and its position is grid1.

Here's how we have the relevant layout set up in the template:



Can you recommend custom CSS we can use instead of module HTML?

Jim

Hi Jim,

What is the url again for the development site?

Cheers
Paul

Sorry, Paul, we made the development site live, and nuked the J2.5 site.

So the front page of chigov.com has the featured-item module containing the border styling I described.

Jim

Hi Jim,

No problem

I can see you have added as inline styling

To add it via an external css file (custom.css) you would need to add a module suffix / class to the custom html module and target that in the custom.css

Cheers
Paul

For the class/suffix you will need to add a space before the class name

Cheers
Paul

Paul, what class/suffix should we use?

Why this is not obvious to us: We have the "main feature" module and the module that follows it, the "subfeatures" module, both assigned to the grid1 position.

We want the border only around the "main feature" module. So we can't apply the style to grid1.

Jim

Hi Jim,

You would add your own unique class name - something not used elsewhere on the sites code

In any module it will have the option of adding a class name

With adding a class name you can target it using custom.css

This means you could target it as a grid1 module

e.g

.moduletable.firstArticle {border: 1px solid #000; padding:1em;}

and adding the class firstArticle (added a space first)

Cheers
Paul

So, Paul, using your example:

1. In the module's "Module Class Suffix" field I'd enter firstArticle.

2. I'd add this to custom.css:
.moduletable.firstArticle {border: 1px solid #000; padding:1em;}

Do I have this right? Nothing else added to custom.css?

Jim

Hi Jim

Yes that would be correct

Cheers

and removing the added inline styling you have - and also include a space when adding the module class suffix

Cheers

Paul,
Here's the line I put in custom.css:
.moduletable.mainFeat {border: 2px solid #165397; padding: .25em;}

I removed the border HTML from the module code.

This had the following effect.

On chigov.com we have a couple of modules in position grid2 that formerly displayed to the right of the main-feature module. After I implemented the CSS shown above, it caused the grid2 modules to appear *below* grid1:



Any idea why?

Jim

Hi Jim,

It looks like there may be an html error thats causing the skewed display. You will need to check the markup in that module to see what's causing that. Looks like an extra closing div from here.

Thanks

Anthony, I checked the module's HTML and didn't spot any extraneous tags.

Here's a comparison of the markup using Firebug:



Everything looks symmetrical to me. What do you think?

Jim

This is what I see

Are you still seeing the same problem?

What browser are you using?

Cheers
Paul

Sorry, Paul, you saw the correct display because I deactivated the module that displays incorrectly, and activated the one that displays correctly. (We don't wanna leave the malfunctioning one active for long periods.)

Can you tell anything from looking at the Firebug output I posted earlier?

If not, I can reactivate the malfunctioning module.

Jim

Its pretty hard to troubleshoot from a screenshot

If I add the class name in Chrome web developer tools then it seems to work

Are you able to add it to the development site?

Cheers
Paul

Sorry, Paul, we no longer have a development site--just the live site.

I've reactivated the malfunctioning module, does that help?

Jim

Hi Jim,

I can see a html error with the image alt tag merged with the inline styling on the image - - I'm not sure if this is the problem but is an issue