[Resolved] Change CSS of sidebar tabs based on value of View

[Author]

Posts

[WillL606]

I am trying to:
hidden link My essay posts are defined by a post relationship to "Threads". These are the colored tabs on the left sidebar which groups essays into something like categories. I have a view [wpv-view name="thread-color-name"] that displays the Thread name with a link for each essay post under the title. What I would like to do is change the css for the sidebar tab that the essay is under to width to 110% - you can see I applied this change t the first tab just to demo .
When you are on an essay, I would like the related thread tab to extends out and over the main content.

In the Template for the Essays, I am using a conditional to check the output of the View of the thread name and then displaying an empty div with a class named for the thread. Like so:

[wpv-conditional if="( $(wpv-thread-name) eq 'fictions present' )"]
<div class="fp">
[/wpv-conditional]

</div>

Then I have javascript conditional on the Template for Essays that checks the presence of an html class (that names the thread) to trigger the css change.

let fp = document.querySelector('.fp');
if (fp) { document.querySelector('#menu-item-3328').style.width = 112%;}

Link to a page where the issue can be seen:
Here is an essay in the "fictions present" thread: hidden link
I have globally set the width of this tab as a demo. But it isn't working regardless.

I expected to see:

Tabs width change .

Instead, I got:

No effect.

[Beda]

The Custom CSS you will apply for this, along with the required HTML, is fully under the resposonbiltiy of the Webmaster, Toolset Support can't help with this.

But we can help with the logic, and if it's even possible.

1. Toolset Views should not be used to create dynamic styles, generally.
2. B ut it can be used for this purpose, if you for example add Classes or even entire JS/CSS chunks to the HTML editors, and wrap them in different conditionals.

Let me make some examples to explain the logic.

Let's say you have a Loop, in that loop you want to display a Title of a Post in red if it's Custom Field is value "a", and green if it's "b".
I'd then add my HTML structure, and add the CSS to the CSS editors that I need, applying to certain custom classes.
This results in a loop as this:

<div class="green">
... some content here
</div>

And a CSS in the CSS editor as this:

div.green {
  color:green;
}
div.red {
  color:red;
}

Now, how'd I call the right CSS depending on the Fields value?
I'd add the classes, or the entire HTML, conditionally:

<div class="[wpv-conditional if="( '[wpv-post-status]' eq 'publish' )"]green[/wpv-conditional]">
This title will be green only if the post status is publish 
</div>

Now, of course I can as well hide/show the entire HTML chunk:

[wpv-conditional if="( '[wpv-post-status]' eq 'publish' )"]<div class="green">
This title will be green only if the post status is publish 
</div>
[/wpv-conditional]

This can be extended practically infinitely with conditions, but keep in mind that each condition adds a little to the query time.

Then, for JS, this can be done the same way, but usually here you'll address the ID of the HTML or insert the JS directly in the HTML editor to be used conditionally - within <script> tags.

The CSS and JS itself is subject to the Webmasters development process -but with above logic explained I think it should be possible to achieve a conditional design as you describe it.

[WillL606]

Beda,
Thank you I do understand how this works. My problem is checking the output of a View to determine the conditional.
In my Essay Template, my View <div>[wpv-view name="thread-text-only"]</div> displays plain text for the Thread that the essay is in.

Now I want the conditional to display a particular class of a div (class="fp") if a given View output is detected ('fictions present'):

[wpv-conditional if="('[wpv-thread-text-only]' eq 'fictions present' )"]
  <div class="fp">
[/wpv-conditional]
</div>

I don't think that the string is matching the output of the View. Do I need a custom shortcode to get at the raw string value of the View?

Thanks,
W

[Christian Cox]

Hi, a View is going to output a lot more than just the text results. There will be extra markup and spaces applied to the text. First, let's clear something up - is wpv-thread-text-only a custom shortcode? I don't see anything in your custom theme files that would indicate you have created a custom shortcode. The proper syntax is:

[wpv-view name="thread-text-only"]

Please change all the wpv-thread-text-only shortcodes to use the proper syntax. Then, if you want to test the output of this View in a conditional, you should apply this filter in your child theme's functions.php file:

add_filter( 'wpv_filter_wpv_view_shortcode_output', 'prefix_clean_view_output', 5, 2 );

function prefix_clean_view_output( $out, $id ) {
  $ids = array( 5298 );
  if ( in_array( $id, $ids )) {
    $start = strpos( $out, '<!-- wpv-loop-start -->' );
    if (
      $start !== false
      && strrpos( $out, '<!-- wpv-loop-end -->', $start ) !== false
    ) {
      $start = $start + strlen( '<!-- wpv-loop-start -->' );
      $out = substr( $out , $start );
      $end = strrpos( $out, '<!-- wpv-loop-end -->' );
      $out = substr( $out, 0, $end );
    } else {
      $start = strpos( $out, '>' );
      if ( $start !== false) {
        $out = substr( $out, $start + 1 );
        $end = strpos( $out, '<' );
        $out = trim(substr( $out, 0, $end ));
      }
    }
  }
  return $out;
}

Change the Loop Output of this View to remove all the extra spaces, and remove the Content Template shortcode and place the wpv-post-title shortcode directly in the loop, like this:

[wpv-layout-start][wpv-items-found]<!-- wpv-loop-start --><wpv-loop>[wpv-post-title]</wpv-loop><!-- wpv-loop-end -->[/wpv-items-found][wpv-no-items-found]<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>[/wpv-no-items-found][wpv-layout-end]

Let me know how it goes.

[WillL606]

Christian,
Thanks so much. That did it! If everything is working, should I delete the filter in the functions.php? Or keep it?
W

[Christian Cox]

If everything is working, should I delete the filter in the functions.php? Or keep it?
You should keep it. This filter is applied to the results of the View each time the View is rendered. If you delete the filter, then the View's results will begin to include additional markup and text, which will break the conditional.

[WillL606]

OK. Thanks so much!
W