0
Welcome Guest! Login
0 items Join Now

Category Blog Title

Last Post
Search Topic

  • Category Blog Title

    Posted 8 years 11 months ago
    • Hello there, i would like to know how can i change the style of the titles only on my menu where i use category blog menu. Im using the H2 tag by default but i would like to use de H3 tag only on this



      is to much bold, please help :D
    #1194758
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Category Blog Title

    Posted 8 years 11 months ago
    • I assume you just want to change the style rather than the actual tag...

      Use this code...
      #rt-main-container .component-content .blog h2 {
    font-size: 1.5rem;
    line-height: normal;
}

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      If you really wanted to change the tag you would have to create a HTML override for the blog layout.

      Regards, Mark.
    • Last Edit: 8 years 11 months ago by MrT.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1194782

  • Re: Category Blog Title

    Posted 8 years 11 months ago
    • No, indeed i like the actual style, as u can see i used the tag h2 on other menu from the site, the only thing here is that there in the category blog style is too much CAPS and yellow lol, so thats why i want to change the H2 tag to H3 tag, is it possible?
    #1194859
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Category Blog Title

    Posted 8 years 11 months ago
    • I would not be creating an html blog override just to change the styling - there really is no point. Just use this CSS to restyle the h2 tag when it is in a blog.
      #rt-main-container .component-content .blog h2 {
     background-color: pink;
     font-family: helvetica, sans-serif;
     font-size: 1.5rem;
     font-weight: bold;
     line-height: normal;
     text-transform: none;
}

#rt-main-container .component-content .blog h2::before {
    border-top-color: pink;
}
      Please note that the font currently used "novecentrobold" only contains uppercase letters so I had to change the font in the above CSS too.

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1195054

  • Re: Category Blog Title

    Posted 8 years 11 months ago
    • Thanks a lot! that was so usefull!

      is it possible to do the same style as the btn-primary but without being a button???
    #1195258
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Category Blog Title

    Posted 8 years 11 months ago
    • instead of using "btn btn-primary" use "myclass" and then Use this code...
      .myclass {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #3f74c6;
     background-image: linear-gradient(#497cca, #4176c8 45%, #376cbd);
     background-repeat: no-repeat;
     border-color: #3568b5 #3568b5 #2d589a;
     border-image: none;
     border-style: solid;
     border-width: 1px;
     box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(225, 225, 225, 0.4) inset, 0px -1px 1px rgba(0, 0, 0, 0.1) inset;
     color: #ffffff;
     font-size: 14px;
     line-height: 1.3em;
     padding: 5px 10px;
     text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
     font-family: "Novecento",Helvetica,Arial,sans-serif;
}

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      New questions = new topics now please to be fair to other members.



      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1195428

Time to create page: 0.042 seconds