Joomla Templates Club 406,261 posts

[scotttomlinson Friend scotttomlinsonJoin date: November 2011Posts: 5Downloads:0Uploads:0 Thanks: 2]

#171125

I understand how to add a custom module, as solved here: http://www.joomlart.com/forums/topic/how-to-add-a-new-module-position-2/

What I’m unsure of is how to style it. Do I add a custom CSS file? Is there a programmatic way of adding the file from the module folder?
What are the ideal solutions for styling a custom module? Thanks!

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#426592

Hi,
In T3 you have some choice to add your custom css.
– In T3 template options: Add your own css file. So T3 will load it. Don’t need any core hacking
– CSS used for whole site ( which page css loaded ). It’s no css for only a module.
– You can apply css for specific module by use module id. In T3 it’s often like #modxxx

Thank you,
Viet Vu

[scotttomlinson Friend scotttomlinsonJoin date: November 2011Posts: 5Downloads:0Uploads:0 Thanks: 2]

#426596

<em>@jooservices 285176 wrote:</em><blockquote>Hi,
In T3 you have some choice to add your custom css.
– In T3 template options: Add your own css file. So T3 will load it. Don’t need any core hacking
– CSS used for whole site ( which page css loaded ). It’s no css for only a module.
– You can apply css for specific module by use module id. In T3 it’s often like #modxxx

Thank you,
Viet Vu</blockquote>

Hi Viet –

Ok … Trying to understand your solution. I can create a custom CSS file for the module. Just don’t quite understand where I put it on the server and how it gets added to the page. Is it as simple as adding to the … /JA_ores/css folder?

I created CSS (below), under a CustomModule.css file. Put it under /JA_ores/css. See that I can edit it in Ores template. But… the CSS file doesn’t seem to style. If I add the same styling to the Layout.css file, it works. So, I’m a bit confused. Any thoughts?

#ja-FlashLoad {
}
ja-FlashLoad.wrap, ja-FlashLoad.wrap main.clearfix {
height: 200px;
margin-top: 0px;
}

#Mod99 {
margin-bottom: 0px;
padding-bottom:0px;
height:200px;
padding-top:0px;
margin-top: 0px;
margin-left: 10px;
display: block;
width: 880px;
padding-left: 5px;
}
#Mod99 .clearfix {
height:200px;

}

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

#426599

Did you add your new position to your templatedetails.xml file?

[scotttomlinson Friend scotttomlinsonJoin date: November 2011Posts: 5Downloads:0Uploads:0 Thanks: 2]

#426600

Hey Tom –

the module displays, I just need to style it. If I edit the layout.css file, it works. If I create a new CSS file, and put it in the CSS folder under within the template structure, it does not work.

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#427070

Hi
You also need put a bit code into T3 Template backend. Please check my screenshot.

Thank you,

---

Attachments:

1. 

[Author]

Posts