Is there a way to assign a class directly to a stack?

Classic
1

Hello Community… Is there a way to assign a class directly to a stack? Have tried the CSS Box stack, which does work but it adds another div and requires using a descendent selector to the class in order to target the actual nested element I am trying to style. The goal is to add a class to several elements so I can simply style them all the same.

Kind Regards,
Dave

2

It’s a bit out of my comfort zone but is this - https://www.doobox.co.uk/stacks_store/demos/solo.html - any good?

1 Like
3

My Styler Stack has this ability also (among others):
https://rapidweavercommunity.com/rapidweaver/addons/stacks/styler-box

3 Likes
4

Thank You Both… Those are great suggestions and something I will most certainly keep in mind. Looks like they will apply the class to the div created by the stack not apply a class to a stack placed inside of it. I may just target a parent ID and use a descendent selector, was just hoping for a way to assign classes to existing stacks.

Please let me know if I am missing something here though.

Kind Regards,
Dave

5

You can place any stack inside an html enclosure stack (I think there are several around) which will allow you to give any stack a class or an ID.

6

Hi Peter… Thank you for your input. Do you mean stacks like those suggested earlier and in my original Post? If so those apply the class to an outer div not the div for the stack being placed inside it. Perhaps I have something misconfigured or are you thinking of another stack all together?

Regards,
Dave

7

I don’t know the stacks mentioned above. I was thinking of Joe Workman’s HTML Enclosure stack. Nothing will change the ID or class (I don’t know what you’re trying to do so I don’t know which you need) of the stack enclosed within it, but why would that matter? If you target the div, you target everything within the div, including the contents of other divs.

8

Hi Peter… Great question and I value your input. I am using foundation and using the Target stack to position a group of buttons which are used as tabs that stick to the bottom of the page of my practice site. In my test I have applied some basic styling to achieve the desired result, pretty simple stuff and everything works fine but was just wanting to apply a class to each button e.g. something like “buttonMod” instead of grabbing each buttons ID then applying the style to the group of ID’s as I have.

If this is not currently possible in RapidWeaver 6 with Stacks 3 I understand just thought I would reach out to more experienced RapidWeaver users as other tools I have used allows for this sort of thing and want to be sure I am not missing something simple. Below is the css and a screenshot of the published page.

Kind Regards,
Dave

#stacks_out_70649_page0, #stacks_out_70638_page0, #stacks_out_70500_page0 {
float: right;
margin-right: 10px;
box-shadow: 0px 0px 12px 0px rgba(131, 145, 155, 0.75);
-webkit-box-shadow: 0px 0px 12px 0px rgba(131, 145, 155, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(131, 145, 155, 0.75);
}

Screenshot_01.jpg2515×2100 1.03 MB

9

If all you want to do is apply css to button, you can use Big White Duck’s Button Plus which allows a custom class to be applied. Having said that, I’ve just tried this and HTML Enclose and neither seems to do the job.Bit puzzled by that.

10

I use @willwood’s Useful Stack for this. But, I don’t know if it adds another div or not, so it may not be an improvement over the one you are using.

11

Every stack should have a unique class already assigned, like
de_futural_blogstack_stack

Here:
http://demo.instacks.com/blogstack/

12

This might have some relevance: http://foundation.zurb.com/forum/posts/2087-border-none-prevents-me-from-styling-my-buttons-with-scss

13

Under Inspector > HTML > JavaScript:

$(document).ready(function() {
	$('#stacks_out_70500_page0, #stacks_out_70638_page0, #stacks_out_70649_page0').addClass('buttonMod');
});

…And then simply apply the ‘buttonMod’ class onto the CSS panel. See if that works.

EDIT:
I overlooked the fact that you did not wish to input each ID onto the CSS. In this case, judging by the sample image you have provided, you would need to identify each element containing those buttons, followed by designating a classname for that element:

$(document).ready(function() {
	$('div[id^="stacks_out"].stacks_out:not(.target-stack)').has('.button').addClass('buttonMod');	
});

This snippet will apply the class ‘buttonMod’ to any div with IDs starting with ‘stacks_out’, provided that they contain the button element. The classname ‘stacks_out (not containing “.target-stack”)’ narrows the element search down further.

14

Yes it does add a new container to the page. I can’t think of any stacks that wouldn’t add a new container to the page. Although API 7 (for Stacks 3) gave developers the ability to inline stacks (without a parent wrapper) this is intended for use with sub-stacks: /plist/ · Stacks API

Depending on @TeamSDA’s requirements, there are some rather weird and wonderful selectors available in jQuery that can be used to look for things in a page. For example you could look for embedded images that have a specific file name. With jQuery, you can identify elements in a page and apply class names (or other attributes) to the parent wrapper dynamically.

15

Thank You All… Love this type of discussion. Was hoping for a method that would apply my class to a stack inside RapidWeaver prior to publishing. Sounds like this is not possible at the present so it looks like I will need to go with one of three methods.

Method 1: Apply styles to a preexisting class where it is OK to affect everything using that class. In my example this would not work as there are other buttons on the page which use the same hard coded class.

Method 2: Apply styles via the ID directly as demonstrated in my above post.

Method 3: Place all the button stacks in a stack like those mentioned above, in my case I used CSS Box, give it a class name then target only the top level div’s. This technique seems to allow for removing and adding new elements inside the Stacks workflow without having to update ID’s manually but it does add another div container. I provided a screenshot of my steps and the css below.

Regards,
Dave

  .buttonMod > div {
    float: right;
    margin-right: 10px;
    box-shadow: 0px 0px 12px 0px rgba(131, 145, 155, 0.75);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(131, 145, 155, 0.75);
    -moz-box-shadow: 0px 0px 12px 0px rgba(131, 145, 155, 0.75);
    }

Test Steps.jpg2550×3300 1.59 MB