Skip Navigation

[Resolved] How to write CSS for Layout Rows so the class-names show in the Tag Classes box

This thread is resolved. Here is a description of the problem and solution.

Problem: How do I get CSS classes to appear in Layout Row editor autocomplete options?

Solution: The autocomplete classname options are driven by previous use. Add any desired classes to a row and save. Delete that temporary row, clear cache and refresh. The classes should now be available in your autocomplete options.

Relevant Documentation: N/A

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 5 replies, has 2 voices.

Last updated by Christian Cox 7 years, 2 months ago.

Assisted by: Christian Cox.

Author
Posts
#478838
EditRow-LiveSite.png
EditRow-SampleSite.png

I am trying to: Add CSS and class names so they become available to me in the Tag Classes box in Layouts Row Editor

I visited these URLs:
https://toolset.com/forums/topic/where-are-the-row-classes-defined/
https://toolset.com/forums/topic/when-editing-a-row-the-tag-classes-are-not-saving/
https://toolset.com/forums/topic/tag-class-css-styling-finding/

I expected to see:
Something similar to the images for editing CSS in those posts at my instalations of Layouts - either in the example Toolset site I'm working on (e-commerce) at hidden link or on my live site.

Instead, I got:
There is no CSS editor available to me (unless I'm blind) other than the main Layouts CSS and JS editor from the WP Admin menu under Toolset. (see attached screenshots of what I get. The Sample site shows how there are CSS Class 'tags' entered in the box to apply them to that row. I can't get those tags to show up on my site, and I can't find any way to generate them. It clearly doesn't scan the overall Layouts CSS editor, and I don't see a CSS editor in my Row edit form. According to the images shown in the support posts I visited, there should be one there, no?

I have deactivated all other plugins other than toolset, and I am running the Starter Child theme...

Everything else is going fine. But this is really holding me up. So apologies if its just me being thick, but I'll be very grateful to anyone who can help me get this working...

Thanks
Tim

#478996

Hi Tim, thank you for contacting Toolset support. I understand that you have a question about prepopulating the CSS classes that can be applied to each row in your layout. I will be happy to help you with that today.

The CSS classes that appear here are not populated by any code that you put in your CSS, or by any other form in the Dashboard. They are populated with the classes that have been applied to any existing rows. For example, if you would like to see the CSS class "red-text" in this area, you would add a row and type "red-text" in the row's CSS classes field, then press return. That class would now show up as a "pill" in the class input. Now save this layout, and the red-text class will be added to the list that is seen in the future.

If you want to add many classes at once, you can add a row and type all the classes in individually in the class input field, pressing return after each one. See each of your classes appear in this input as a "pill." Save your layout, then delete the row you just made. Now each of these classes should appear as available next time you add a row. You may have to clear your browser cache and reload the layout editor to see the classes show up.

Please let me know if I can be of further assistance with this.

#479003
bl-top-barmenu-edit.png

Thank you Christian. Yes, that does help.

So is it correct that I'm not seeing a CSS editor in my row editor dialogue? - does it mean that all CSS for layouts must be entered in the Laouts CSS and JS screen, and there's nowhere else to put it?
That certainly simplifies things if its the case.

One further thing, if I may - I'm trying to make the menu of this site stick to the top of the window after the user scrolls past 150 pixels. So I gave the menu row an id of #bl-top-barmenu, wrote a class called stickytop, and added the following code in the JS editor:

/*Layouts js goes here*/

    $(window).scroll(function() {
        if ($(this).scrollTop() >= 120) {
            $('#bl-top-barmenu').addClass('stickytop');
        }
        else {
            $('#bl-top-barmenu').removeClass('stickytop');
        }
    });

stickytop looks like this in the Layouts CSS edit window:

.stickytop{
  top:0;
  position:fixed;
}

I've used this technique with other sites successfully, but not those running the Starter theme and Layouts. Have I got the syntax wrong for it? - should I be starting the JS with a different intro line perhaps... or what am I doing wrong, please?

(its having no effect at all on the row with id #bl-top-barmenu)

Thanks for your help
Tim

#479310

Hi Tim,

You're right, Layout CSS has one central editor in the wp-admin now. Previously each Layout had its own CSS editor, and these blocks of CSS were all combined behind the scenes. Now the wp-admin management of all Layouts' CSS is handled in one place, so the organization of that code is more transparent.

Alternatively, hard-coded CSS can be added to a child theme's style.css file. There are advantages and disadvantages to each method, but typically I recommend adding it in the Layout CSS editor as you are describing if you plan to add and remove layout rows frequently. This keeps the related CSS visible in the wp-admin dashboard and easily manageable.

The JS code you've added looks like a good start. The reason it's not behaving as expected is that the jQuery object is no longer "$" in the Starter Theme. It is replaced by "jQuery". So you need to replace each "$" with "jQuery" like so:

/*Layouts js goes here*/
 
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() >= 120) {
            jQuery('#bl-top-barmenu').addClass('stickytop');
        }
        else {
            jQuery('#bl-top-barmenu').removeClass('stickytop');
        }
    });

Your scroll function should work after you make this change. Please let me know if you need further assistance with that.

#479392

Thanks Christian. OK, I get it now and my first Layouts with Toolset Starter site is beginning to take shape.

Excellent tip about the $ to jQuery replacement too. I must have missed it in the documentation, but now my JS code is working just as it should. So thanks on both counts.

What a great tool Layouts is. I get where this is going and its pretty exciting...!
Tim

#479771

Great to hear that. Welcome aboard Toolset! I look forward to seeing your projects succeed.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.