Help with linking css with custom module position

cloudten10

Ive created my custom module position it now shows up.
I coped everything from t3-section-top and named mine t3-section-top2

but on frontend on css it says

templates/ja_sensei/local/css/template.css line 5264

.t3-section {
padding-bottom: 144px;
padding-top: 144px;
position: relative;
}

So how do i link and create my own css code which i will use .t3-section2 to my cloned module t3-section-top2?

Can anyone help please

pavit

Hi cloudten10

You can add your custom css code to the custom.css file in this folder /templates/ja_sensei/css/

Hope it helps

cloudten10

pavit yes but how do i link it with the module position ?

defined('JEXEC') or die;
?>
<?php if ($this->countModules('section-top2')) : ?>
<div id="t3-section-top2" class="t3-section-wrap wrap">
<jdoc:include type="modules" name="<?php $this->p('section-top2') ?>" style="T3Section" />
</div>
<?php endif ?>

style="T3Section - is this the stylesheet to put the code if so where is the t3section file i cant find it

pavit

Hi cloudten10

I cannot follow you sorry, if you added a new position and you want to use different classes to style them in a custom way, then you should use/create new classes in custom.css file

example :

<div id="t3-section-top" class="t3-section-wrap wrap">

Id will be the same , but you will need to add a different class - you can change the class to t3-sectiontop2-wrap wrap in custom.css file.

Hope it helps.

cloudten10

I have this but i don't know how what to write in custom.css so it becomes t3-sectiontop2-wrap wrap
can i not find where t3-section-wrap wrap is in the files and just copy and paste it and put t3-sectiontop2-wrap wrap? would be a lot easier for me

pavit

Hi cloudten10

If you can describe or post a screenshot with annotations of your desired changes to the module i can be of better help i think. you can use the chrome inspector to see css code after you disabled any optimization feature on your website from backend -

Regards

cloudten10

Ill try and explain a bit better of what im trying to do.
I wanted to keep module "section-top" as i use that.
So i decided to clone it and call it "section-top2" thats all complete.

the reason why i want to do this is so i can change this .t3-section
padding-bottom: 144px; to 10px and padding-top: 144px; to 10px
which is located here: templates/ja_sensei/local/css/template.css line 5264

obviously if i change that it will change for "section-top" aswell.

So what i want is to copy and paste ".t3-section" and call it".t3-section2" then make it linked with "section-top2"
so i can add padding-bottom:10px and padding-top:10px

Hope this helps

pavit

Hi@cloudten10#73069

What you are trying to do can be done in a simpler way -

Each module when published in section-top or bottom position takes an ID , for example the quickstart has module ABOUT SENSEI with ID = 102 published in section top so when you add a module in position section top you can customize settings via custom.css file in this way.

#Section102.t3-section {
padding-bottom:10px!important;
padding-top:10px!important;
}

It will be a class valid only for that module with ID = 102

Hope it helps

cloudten10

pavit wow thats brilliant thanks so much really can do lots of easy customising now thanks so much so happy 🙂