CODEWITHSUNDEEP
htmlcssjoomlastylingsubclass
user2800008
user2800008

Reputation: 11

Problems Styling Sub-class styling on a Joomla website

I have medium knowledge of CSS although I am using a predefined Joomla template that I have being restyling. My issue exist where I wish to restyle modules that I have applied a Module Class Suffix to. I am able to make changes to the overall module, although I am having major issuing trying to style sub-class elements within this. For example on the page -

http://kcrarea.com/index.php/about/getlisted/basic-listing

I wish to restyle Social Login only in this instance, therefore I applied the class REQ to the module.

How can I go about styling the sub-class that will control this. For instance I was trying to move the SOCIAL LOGIN icon down, so I created the style:

#interfacecontainerdiv .REQ

This is not working so what do I need to do?

Your help is appreciated.

Thank You

Upvotes: 1

Views: 84

Answers (3)

Far
Far

Reputation: 147

Maybe you could try to add a space before entering the "Module Class Suffix" from the "Module Manager" in Joomla . Check the Joomla manual

Then in your css file

div.req{}

or

div#content-bottom.req

Upvotes: 1

elk
elk

Reputation: 687

Well to me it looks like REQ currently is only applied to the block module which has the login in it. Putting #interfacecontainerdiv .REQ in your .css file will not add the styles of .REQ to your interfacecontainerdiv, if that is what you are trying to do. You would have to either change the css settings for the interfacecontainerdiv directly, or else append the REQ class to the div in your code.

Have a look at line 264 of your template.css, that is where things seem to be arranged for the interfacecontainerdiv. You'll find that the top margin has a negative value, which could be, amongst other things, one indicator why the div is being displayed in this strange position. Are you using Firefox? It has a great tool, if you perform a right click on an item and select "inspect element" it will open a wide range of tools at the bottom of your screen. There you can change the css settings and see the effect immediately.

BTW: #interfacecontainerdiv .REQ means "apply the following settings to an element with class "REQ" which can be found inside of the element with id "interfacecontainerdiv"" ;-)

Upvotes: 1

Neil Robertson
Neil Robertson

Reputation: 3345

I can't see the #interfacecontainerdiv id?

Maybe try:

#content-bottom .REQ

or simply:

.REQ

Upvotes: 0

Related Questions