Hi, I’m finally getting some proper time to look at Blacksmith. I’ve set up a stylesheet, defining the max-width, padding top bottom and sides, and also the background and font colour. The assigned class is secondary-paneland it looks like this…
I’ve tried all the settings in Max-width and Blacksmith, but can not apply to background to the outer container.
I’m sensing I’m doing something wrong, or missed a setting, but I can’t work out what! I’ve also re-scanned the videos, but can’t see to see this covered. Any ideas?
I know I could put the Max-width stack in a backdrop stack, but I’m trying to set it up so everything is controlled via the Blacksmith stack.
The class for Max-Width is applied to the content section. To do what you want you’d need an additional <div> pair in the tool’s internal code. This would be a superfluous tag pair for this particular tool. This is an example of modularity in Foundry 3. You can wrap your Max-Width in another wrapper, say an HTML or Container and then assign the class to it, or just use the Background tool for its intended purpose.
Not a bug. You’re breaking the layout by adding your own margin. Margin is what centers that container horizontally. Blacksmith gives you just enough rope…
In a similar manner, I’ve been adding via Blacksmith a background colour to a Container in some instances to get the solid background in the same manner you’re after instead of using the Background tool. I only had to use this a few times, when a drop down menu is inside a Background tool, as I wanted a background that is edge to edge and a higher vertical height, the drop down expands underneath the next content below in the Backgound tool. I tried using the Z axis stylesheet initially thinking that may push it up, but can see how the ‘mechanics’ of Background is working the solution was instead to apply the solid colour background as a Blacksmith Style Sheet to a container instead to act as to create an edge to edge and higher VH background. Like most things there is probably a different way of achieving this, but this worked for me and made sense and stopped the dissappearing drop down menu. All in all a great plus for the Blacksmith tool and the ability to create and add custom classes, but the same action will create the effect you are wanting to achieve.
Hello @elixirgraphics, I tried to assign a similar CSS class to background tool (already I am using pin my website) instead of a Div wrapper. What I see is that although it does apply the font colour to the paragraph text, but it does not change the font color of the header ( maybe 'cuz I have a specific blue colour applied to the Header and it is taking precedence ).
Similarly I have applied a specific yellow colour to the background tool and I guess it is also taking precedence over the color defined in the CSS class. But when I reduce the colour opacity to zero on the background tool, it still does not show the colour defined in the CSS class.
If you’d like me or someone else here on the forums to troubleshoot your Blacksmith stylesheet you’ll have to provide your project file or a test project file. We cannot do it looking at a screenshot unfortunately.
Please find attached the sample file for your perusal…
This file has two pages…
On first page I am trying to overlap the image on the Triangle (unto half of the Triangle). As soon as change the Vertical value of the Offset Tool to 50, both images vanish from the screen.
On the second page I use Container Tool and Background Tool. Both the tools are applied to same class “.gradient-panel”. The magic of the class gets applied to the Container tool, but not to the Background tool.
Looking at it now, and with a cup of coffee in-hand, I have this question – why would you apply a background styling via Blacksmith to the Background tool? I wouldn’t myself. Seems like adding extra code to the page for no good reason.
That said – The reason your background isn’t being applied to the Background tool is because the Background tool has an !important added to its styling. To overcome this enable the Important Override in the stylesheet. This is covered in the Blacksmith Basics tutorial video. If you haven’t had a chance to watch it yet I highly recommend it for everyone looking to use Blacksmith.
My bad. I had this thing in my mind as well that’s why I wrote in my last message. Now since it is confirmed by the maker himself, it clears my mind.
Secondly, I still can’t understand why Overlap tool is not working. I am trying to overlap the Chandelier image on the Triangle image. I am using one column for both images. Is this design right, or do I need two different columns for both the images ??
This is in the same file first page titled “Single Column Overlap”.
Thanks,
