Results 1 to 5 of 5

Thread: Changing fonts and sizes in NOF 2015 Carousel

  1. #1
    Junior Member
    Join Date
    Oct 2011
    Posts
    10

    Default Changing fonts and sizes in NOF 2015 Carousel

    Carousel feature in NOF 2015 is a neat feature but is there a way to change the font and font size in the carousel caption? Defaults are way too small.

  2. #2
    Banned EtienneC's Avatar
    Join Date
    Jul 2010
    Location
    Doylestowm, PA
    Posts
    324

    Default

    I used the following CSS to change the font face, increase the size and adjust the padding:

    .jcarousel-skin-nof .jcarousel-caption {
    font-size: 1.25em;
    font-family: 'Comic Sans MS', cursive;
    padding: 14px;
    }

  3. #3
    Junior Member
    Join Date
    Feb 2015
    Posts
    2

    Default

    I also want to change the font size. Where do I enter the code above? I put it in the HTML for the carousel tab with the list of photos, but that didn't do it... I am not a programmer, can you tell me specifically where to put it? I can't edit the auto-generated code. Thanks.

  4. #4
    Junior Member
    Join Date
    Feb 2015
    Posts
    2

    Default Change font size in Carousel

    Love the new Carousel, but also want fonts to be bigger. Where do I put the code to change font/size?

  5. #5
    Banned EtienneC's Avatar
    Join Date
    Jul 2010
    Location
    Doylestowm, PA
    Posts
    324

    Default

    Quote Originally Posted by shensrud View Post
    I also want to change the font size. Where do I enter the code above? I put it in the HTML for the carousel tab with the list of photos, but that didn't do it... I am not a programmer, can you tell me specifically where to put it? I can't edit the auto-generated code. Thanks.
    If you want the CSS for the carousel text to impact all carousels in your site, you can add the CSS above to the end of style.css which can be accessed from the CSS Code tab of Style View.

    If you want the CSS for the carousel text to impact all of the carousels on a particular page, you can go to Page View and click the HTML... button. Then, insert the CSS inline to the page by wrapping it in a <STYLE> tag, for example:

    <style type="text/css">
    .jcarousel-skin-nof .jcarousel-caption {
    font-size: 1.25em;
    font-family: 'Comic Sans MS', cursive;
    }
    </style>


    If you have multiple carousels on a page but only want to impact one of the carousels, you can use the previous technique but prepend the Object ID for the carousel with the new text, for example:

    <style type="text/css">
    #Carousel1 .jcarousel-skin-nof .jcarousel-caption {
    font-size: 1.25em;
    font-family: 'Comic Sans MS', cursive;
    }
    </style>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •