Modules titles with link to respective category blog

pugliesijr

Hello,
Would it be possible for the module titles (see example in the image below) to be links to the blog in the respective category, but maintaining the typology, black color and no underlining in the CSS? How to do this? Thanks in advance.

saguaros

pugliesijr Hi

The text you're highlighting are titles of these modules. In order to show category title there, you will customize each layout of module. Let's take AGENDE-SE module as sample:

1/ This is Articles category module which is using news-2 layout so you will need to customize this layout file: /templates/ja_focus/html/mod_articles_category/news-2.php

2/ Here is code I added to get / show the category title:

3/ Next, you will hide the module title and add custom style for this category title.

Regards

pugliesijr

Great Saguaros! Thanks a lot. I will manage to do this. Just one question: What style is in the module's original title and where should it be inserted? In the code of the same modified file? Important: color black, no underline and same size, and type if possible...

saguaros

pugliesijr

I used some classes: categoryTitle, catLink in above screenshot, you can change to yours and add style for these classes 🙂

pugliesijr

I would like it to have the same style you see on modules titles: no underline, black color, same type and same size of modules titles. It should be created on CSS or in module layout file? Can you help me on this?
Thanks a lot

saguaros

I added a custom class for this module id:377 and use this custom CSS:

.t3-main-content .t3-module.customTitle .module-ct {
    border-top: 2px solid #000000;
    border-left: 0;
    border-right: 0;
    padding: 23px 0;
    margin-bottom: 0;
    line-height: 1;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
}

.customTitle a.catLink {
    color: #000000;
}

Kindly check.

pugliesijr

Thank you, Saguaros, the module title was adjusted exactly as I wanted. But it also changed the titles and text of the articles in the module, which should remain as they were before (see comparison of two modules in the image below). Is this fine tuning in the module or in the CSS? Can you help me please? Thanks in advance for all the support. Our website is looking wonderful. It's almost ready for launch.

saguaros

I updated again:

.t3-main-content .t3-module.customTitle .module-ct {
    border-top: 2px solid #000000;
    border-left: 0;
    border-right: 0;
    padding: 23px 0;
    margin-bottom: 0;
}

.t3-main-content .t3-module.customTitle .module-ct .categoryTitle {
	line-height: 1;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
}

Kindly check.

pugliesijr

Hi Saguaros,
I have made the adjustments to put links in articles category news-6 and news-3 on positions spotlight-2 (positions 5 to 8).
However I could not made the same you did. Maybe there is something else to do...
For the position spotlight-2, I went back to the original. But I left the code on news-3 (module "Especial Congressos" ID=452) and it's custom css for it's position main-content-2. What did I do wrong? See image below. The link came but css did not

saguaros

pugliesijr You need to add a space before the Module class

I just updated for you and disabled the module's title as well.

pugliesijr

Hello,
I tried to create links in the module titles for the spotlight-2 and sidebar-3 positions (news-6 layout) , specifically for the modules in these positions. In the spotlight-2 position it worked, but it needs a space between the image and the module title, as well as a correction in the link position, which seems to be superimposed on the image. See below, please:

For the sidebar-3 position (module RADAR), the custom css has no effect. See the image, please.

I inserted the following code for these positions in the custom CSS file.what did I do wrong?

.t3-spotligt .t3-module.customTitle .module-ct {
border-top: 2px solid #000000;
border-left: 0;
border-right: 0;
padding: 23px 0;
margin-bottom: 0;
}

.t3-spotligt .t3-module.customTitle .module-ct .categoryTitle {
line-height: 1;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
}

.customTitle a.catLink {
color: #000000;
}
}

.t3-sidebar .t3-module.customTitle .module-ct {
border-top: 2px solid #000000;
border-left: 0;
border-right: 0;
padding: 23px 0;
margin-bottom: 0;
}

.t3-sidebar .t3-module.customTitle .module-ct .categoryTitle {
line-height: 1;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
}

.customTitle a.catLink {
color: #000000;
}
}

saguaros

It will depend on the module type / position, you can try this:

.t3-main-content .t3-spotlight .t3-module.customTitle .module-ct .categoryTitle {
    margin-bottom: 23px;
}

.t3-sidebar .t3-module.customTitle .categoryTitle {
    margin: 23px 5px;
}

pugliesijr

Hello, Saguaros
I have insert the code you sent on custom css but it did not work. Please take a look. The title is still very near image and the link looks inside image... As a matter of fact, I believe I have set link in a wrong position on news-6 layout because there is no link on the modules title.

saguaros

You put in wrong place (for mobile), it's working now.

pugliesijr

Thanks for everything, Saguaros!
Site is Live now. If you want take a look:
https://www.onconews.com.br
All best!

saguaros

Great to hear that 😉

Have a nice weekend!