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)

     

     

     

6 Replies

Sort By
  • AdamA's avatar
    AdamA
    Khoros Oracle
    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
    12 years ago

    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);