Filtering Change font size of item title

6 posts in this topic

Hello, I am just putting Filtering on a new site. It is always such a pleasure to work with it!


But I am trying and trying to change the font size of the item title, in DMS Custom CSS. While I can change the color and text-align no problem but whatever I do the font size remains the same. I tried px, % and em, none seem to work. Here is an example: .section-filtering .filtering .item .item-title {
text-align: center;  color: black; font-size: 80%;



As I said, text-align and color work perfectly, but the font-size won't budge. I even tried !important to override any inline stye though I'm really out of my depth there and I'm told it's not good practice anyway.


It is quite probably something I'm doing or not doing. If you know the answer please enlighten me! If I could change the size (and ideally weight, too) of the font I'd be very happy indeed!


Thank you for your assistance. Yours faithfully, Jan.

Share this post

Link to post
Share on other sites

caspersjan You were so close. One more selector since the item title is wrapped in an h4 tag.


Try this

.section-filtering .filtering .item .item-title h4 {
  font-size: 80%;

Let me know if that works.



Share this post

Link to post
Share on other sites

Dear Ellen, it does indeed! I am half-way there to understanding selectors - now I shall have to learn about h4 tags, too. But learning is to be alive, of course!.  Thank you for your care and advice. Yours faithfully, Jan.


P.S.: Not yet quite understanding how it works, I tried your h4 magic on another problem I have been trying to solve for a while: How to hide the author and byline in the post-info, so that only the date remains (which can be so handily configured from within your section). My initial line of enquiry was this:

.section-filtering .filtering .post-info .author .byline {
display: none;
It had not worked so far. So straight away I tried the h4 trick but no joy yet. If you know of an easy way to do this I'd be grateful for another pointer!

Share this post

Link to post
Share on other sites

caspersjan Okay, that's a little more difficult because the date and author don't have selectors, the last selector is .post-info. I'll add classes in the next update but that doesn't help you right now. So, we can do it with a bit of jQuery.


In the Custom Tab, click on Custom Scripts and in that box paste the following code:

 jQuery('.section-filtering .filtering .item .post-info').html(jQuery('.section-filtering .filtering .item .post-info').html().replace("By",""));
    jQuery('.section-filtering .filtering .item .post-info a').css('display' , 'none');


We could have done .section-filtering .filtering .item .post-info a {display: none;} but the By still stays, that's why the jQuery.


Let me know if it works.



Share this post

Link to post
Share on other sites

Dear Ellen, you are a star! Thank you so much, that works perfectly, straight out of the box. And I'm doubly happy - for having this problem solved and for your generous assistance. It spurns me on to try to figure out things myself, knowing that if I do get stuck I have someone knowledgeable to turn to!

Yours faithfully, Jan.

P.S.: I showed the first draft of the current implementation of Filtering (project documentation feedback from youth workers - posts are automatically populated from an online form and go straight into a Filtering section where they can be filtered by categories) to my colleagues today and they were amazed and delighted at the sprightly action. It really is a beautiful tool!

1 person likes this

Share this post

Link to post
Share on other sites

Dear Ellen, it is always two steps forward, one step back... I was so happy with your script that solved my problem and thus put the final touches to the filtered gallery I had tried to build, but alas when I came back to it this morning DMS had stopped working altogether. The Editor would not open and the spinning wheel made my head spin with a rush of worries. The site was still operational when logged out, so all was obiously not lost, but it's a shock still. Disabling plugins did not work, but just after I'd written to DMS support I discovered the Pagelines tab in the Dashboard which has a DMS Header Scripts Fallback and allowed me to delete the JQuery again. Everything is back to normal - including the Author and "By". I'll keep them there for now and wait until you get a chance to add classes in an update. Unless you can think of something that could make this script digestible to the DMS Editor.

Still, thanks a lot for trying to work out the original problem. It could not have been foreseen that another, much more dramatic one would result - though thankfully the drama was short and unspectacular in the end... Yours faithfully, Jan.

1 person likes this

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • Scaling down h1-h6 in the template area
      By dgsarnow+
      Does anyone know how to scale down the h1-h6 tags within the template section?
      I want to keep the native sizes in the header, fixed bar, and footer sections.
    • Testimonials: problem with font-size
      By mohabbat
      I have a problem trying to modify the font property of the testimonials section, via the custom CSS/Less option
      Here is my code:
      #testimonialsuz028m7{ font-size: 20px; font-family: Tinos; text-shadow: 1px 1px 3px white; background: rgb(186,85,211); /* Old browsers */ background: -moz-linear-gradient(top,  rgba(186,85,211,1) 1%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(186,85,211,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(186,85,211,1) 1%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  rgba(186,85,211,1) 1%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  rgba(186,85,211,1) 1%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to bottom,  rgba(186,85,211,1) 1%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba55d3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }   All the properties work fine, except the font-size property.  I assume I'm doing something wrong, but what...?    Thanks in advance for your help..;-)
    • Images And Customized Font-Size In Sidebars
      By texasx
      Thanks for a great forum,

      1. How do I display images in a sidebar the best way? (Just 1 or 2 fixed, no slider)

      2. How do I customize the font and the font-size in a sidebar the best way?

      Using Framework 2.35

      Kind regards