Support » Theme: Customizr » Override the existing class of element

  • Resolved renjiepiao


    Hi there,
    I’m new to wordpress and absolutely new to customizr.

    I have a little bit experience of dealing with css and html.

    And I understand how to switch the class of the element to change how it looks, just like when using Bootstarp (For instance switch between span1 to span12 to have different width of block.) But I don’t know how to override using the child theme. I totally have know idea about filter and action, and no experience at php also.

    So here is the thing, I wanna dynamically change the class span3 to span6 for logo and change the class span9 to span3 for navbar-warpper using the functions.php in child theme.

    <div “class=”brand span3”>…</div> ==>> <div “class=”brand span6”>…</div>
    <div class=”navbar-wrapper clearfix span9″>…</div>
    <div class=”navbar-wrapper clearfix span6″>…</div>

Viewing 6 replies - 1 through 6 (of 6 total)
  • what do you mean with “dynamically”?

    I mean use the code that written by my functions.php in child theme to override the “span3” to “span6” in original theme.

    I know how to override css in child theme, you just choose the right selector.

    But I don’t know how to override the markups that done by original theme.

    For instance this span3 for logo is done by original theme, now I wanna override it using my functions.php in child theme.

    I know I didn’t explain it well but I think this is what I mean.

    Ok, now it’s fine 😀 Sorry for my slowness sometimes.
    So that’s what you need:

    add_filter('tc_logo_class', 'my_logo_class');
    function my_logo_class(){
        return 'brand span6';
    add_filter('tc_navbar_wrapper_class', 'my_navbar_wrapper_class');
    function my_navbar_wrapper_class(){
        return 'navbar-wrapper clearfix span6';

    Wow awesome!

    Now you got what I mean!!!
    Thank you so much!

    I’m on my way home, I will try as soon as possible!

    Hi I’m not sure if I can keep my questions here…

    In the solution that you provide above, how do you determine the tc_logo_class and tc_navbar_wrapper_class? I don’t understand where did you got those two element?

    For instance, I wanna change the class of the div box that hold the slider from ” carousel slide” to “container carousel slide”, so that it doesn’t that the full-width.

    So how do I locate this div? it should be something like tc_?????_????? right?
    I wanna know how you determine this.

    Thank you so much!

    Well I went into the class for the header, which is:

    The class for the slider is:
    (look at line 166)

    Said so, didn’t get your question, since you can set the slider in full-width or boxed without use code, is a slider option… 🙂
    Anyway.. to change the slider “layout” you can use this filter hook:

    add_filter('tc_slider_layout', 'my_slider_layout');
    function my_slider_layout($layout){
         // probably you want to perform some conditional check here
         /* if ( condition )
                return $layout; /* default value*/
         // use 0 for boxed slider, or 1 for full-width
         return 0;

    hope this helps

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Override the existing class of element’ is closed to new replies.