Forum Discussion

caryn's avatar
caryn
Expert
13 years ago

ActiveCast CSS classes

Is there a list of these that we can refer to when trying to customize various ActiveCast features? I'm particularly interested in the Talk Back styling options.   Thanks.
  • AdamA's avatar
    AdamA
    13 years ago

    There is no official documentation on the Activecast CSS classes however I have compiled a list of CSS IDs and classes used by the Activecast Talkback feature:

     

    Static HTML element IDs:

     

    • AC_TB_CONTAINER
    • AC_TOPIC
    • AC_TB_CONTAINER_HEADER
    • AC_MESSAGES
    • AC_REPLIES_HEADER
    • AC_COUNT_MESSAGE
    • AC_LOWER_PAGE_CONTROL
    • AC_LOWER_NUM_COUNT
    • AC_COUNT_MID_SEP_TITLE
    • AC_MID_NUM_COUNT
    • AC_COUNT_TOTAL_SEP_TITLE
    • AC_TOTAL_NUM_COUNT
    • AC_UPPER_PAGE_CONTROL
    • AC_POST_MESSAGE
    • AC_POST_MESSAGE_HEADER
    • AC_POST_MESSAGE_UL
    • AC_MESSAGE_SUBJECT_LABEL
    • AC_MESSAGE_BODY_LABEL
    • AC_POST_BUTTON
    • AC_USER
    • AC_LOGIN
    • AC_MESSAGE_SUBJECT_INPUT
    • AC_MESSAGE_BODY_TEXTAREA
    • AC_POST_ERROR

     

    Static HTML element classes:

     

    • AC_MESSAGES
    • ac_subject
    • ac_body
    • ac_msginfo
    • ac_author
    • ac_posted
    • ac_kudoCount

     

    Dynamic HTML element IDs:

     

    • lia-ac-tb-XXX (where XXX is the board ID)

     

    Dynamic HTML element classes:

     

    • ac_thread## (where ## is the thread ID)

     

     

     

Ryo-Wo's avatar
Ryo-Wo
Helper

Can we get a similar list of CSS IDs and classes for the Latest Topics feature, please?

AdamA's avatar
AdamA
Khoros Oracle
12 years ago
Ryo-Wo wrote:

Can we get a similar list of CSS IDs and classes for the Latest Topics feature, please?


Here they are for the Latest Threads feature:

 

Static HTML element IDs:

 

  • AC_NODE_TITLE
  • AC_HEADER
  • AC_MESSAGES

 

Static HTML element classes:

 

  • AC_MESSAGES
  • ac_subject
  • ac_body
  • ac_msginfo
  • ac_author
  • ac_posted
  • ac_kudoCount

 

Dynamic HTML element IDs:

 

  • lia-ac-lt-XXX (where XXX is the node ID)
  • lia-ac-lt-XXX-container (where XXX is the node ID)

 

Dynamic HTML element classes:

 

  • ac_thread## (where ## is the thread ID)

 

  • JMcJohnston's avatar
    JMcJohnston
    Executive
    6 years ago

    Does anyone know the classes for "Ask A Question" Activecast? 

    • AdamA's avatar
      AdamA
      Khoros Oracle
      6 years ago

      Hello JMcJohnston,

      Here are the classes and IDs for the "Ask A Question" Activecast widget:

      Static HTML element IDs:

      • lia-ac-ask-expert-question
      • lia-ac-ask-expert-char-count-count
      • lia-ac-ask-expert-start-over
      • lia-ac-ask-expert-continue

      Static HTML element classes:

      • lia-ac-ask-expert-header
      • lia-ac-ask-expert-form
      • lia-ac-ask-expert-results-container
      • lia-ac-ask-expert-results-info-text
      • thread-list-display
      • message-subject-link
      • lia-img-message-type-solved
      • lia-fa-message
      • lia-fa-type
      • lia-fa-solved
      • lia-fa
      • lia-link-navigation
      • lia-expert-message
      • lia-ac-ask-expert-see-more
      • lia-link-navigation
      • qanda-more-link
      • lia-ac-ask-expert-submit-buttons

      Dynamic HTML element IDs:

      • display_XXX (where XXX is randomly generated)
      • link_XXX (where XXX is randomly generated)

      Screenshot of DOM:

      Browser Dev Console Code used to Discover Classes and IDs:

       

      const elements = document.querySelectorAll('.lia-component-qanda-widget-ask-an-expert-activecast *');
const classes = [];
const ids = [];

[].forEach.call(elements, element => {
  classes.push.apply(classes, element.className.split(' '));   
  if (element.hasAttribute('id')) {
    ids.push(element.getAttribute('id'));
  } 
});
console.log(classes.filter(i => i !== ''));
console.log(ids);

       

       

      • JMcJohnston's avatar
        JMcJohnston
        Executive
        6 years ago

        Wonderful, thank you