Overriding CSS code trough visual composer

Question

I have the following line of html code which i don't have access to.

Since i wanted to hide a TAB which is the first <a href='#all' ...>, I used the custom css options of visual composer which allows me to override an existing code. To do that I simply used

.testing, a[href='#all'] {
visibility: hidden; }

I'm fine with this as long as that TAB is not visible. But next problem here is this particular TAB is always selected when i refresh the page, simply because the class=selected is applied to it. Can i somehow override it using css to apply the class selected to one of the other 2 <li>'s ?

Edit I managed to find an access to the following line of php code which stands behind these TABs

 <li>
    <ul class="tabs">
    <?php
    $obj = new stdClass();
    $obj->id = 0;
    $obj->title = esc_html__('All', 'arcane');
    $obj->abbr = esc_html__('All', 'arcane');
    $obj->icon = 0;

    array_unshift($games, $obj);

    for($i = 0; $i < sizeof($games); $i++) :
        $game = $games[$i];
        $link = ($game->id == 0) ? 'all' : 'game-' . $game->id;
        $p = array( 'game_id' => $game->id,'status' => array('active', 'done'));
        $matches_tab = $ArcaneWpTeamWars->get_match($p, false, true);

        if(!empty($matches_tab)){
    ?>
        <li<?php if($i == 0) echo ' class="selected"'; ?>><a href="#<?php echo esc_attr($link); ?>" title="<?php echo esc_attr($game->title); ?>"><?php echo esc_attr($game->abbr); ?></a><div class="clear"></div></li>
    <?php } endfor; ?>
    </ul>
    <div class="clear"></div>
</li>

are those options generated dynamically? why you can not specify seleted class to them in your code? — Ali Sheikhpour
I don't have access to the code. The only way I can do it, with override trough visual composer css editor, like i managed to hide the TAB. — dtmnn
Do you want to solve it using jquery and do you have access to run jquery codes? — Ali Sheikhpour

Ali Sheikhpour Ali Sheikhpour · Accepted Answer · 2017-10-26T22:14:38

You can assign the selected class to the second li by changing the 0 to 1 and also use your own css to hide the first one:

<li<?php if($i == 1) echo ' class="selected"'; ?>>

or you can totally remove the first option which refers to all by starting the loop from 1 instead of 0 and ignore hiding first one using css:

for($i = 1; $i < sizeof($games); $i++) : // Start loop from 1 instead of 0

Overriding CSS code trough visual composer

2 Answers