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, Oct 26 '17 at 21:18
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, Oct 26 '17 at 21:29
Do you want to solve it using jquery and do you have access to run jquery codes? — Ali Sheikhpour, Oct 26 '17 at 21:45
Don't have access to the html but i managed to access the php behind these tabs which i will add with an edit. If someone may suggest a solution with the additions, would be great — dtmnn, Oct 26 '17 at 21:55
I wonder how `class="selected"` makes it selected? CSS can not make option selected. I think it is selected by default because it is first option and `selected` class is just for formatting. — Ali Sheikhpour, Oct 26 '17 at 21:56
Could be this, but i can't reorder the options neither remove the first one with CSS. — dtmnn, Oct 26 '17 at 22:00

score 0 · Answer 1 · answered Oct 26 '17 at 22:14

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

score 0 · Answer 2 · answered Oct 26 '17 at 22:24

You can try to change the php code and instead of

$link = ($game->id == 0) ? 'all' : 'game-' . $game->id;

to have

$link = ($game->id == 2) ? 'game-2' : 'game-' . $game->id;

In this way the CS:GO should be the first. Im not 100% sure but try it :)

Overriding CSS code trough visual composer

2 Answers2