Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Transparent Boxes

jonathon_GA
Level 3
Level 3

Two questions,

The text "working at ExxonMobil" Floats over the background image. Ive tried this as a banner, which kind of worked, but wasn't able to apply a card style to it and wants to run into the edge. Is there another way to accomplish this effect ?

I was also wonder how the were able to start their cards lower on the page?

IMG_0047.PNGIMG_0048.PNG

12 Replies
Bob_Bringhurst_
Employee
Employee

1. For the "Working at ExxonMobil" text, create a banner with the Banner Title you want to display. Add metadata as a category or internal keyword so that you can map that banner to a specific card. When you create the card, use No Image, set the Text Area Margins in the Layout tab to push the text away from the edges, and specify {{title}} for metadata. Edit the layout to map the banner to the card.

card_text_area.png

2. To start the cards lower on the browse page, edit the layout and specify a Top Margin Size. (You can also do this by adding a top margin to a top-row card or creating a dummy banner, but I prefer editing the layout—it's cleaner.)

layout_top_margin.png

jonathon_GA
Level 3
Level 3

Thank you Bob, I was able to get the location correct. Ive now been running into white padding boxes on the edges. Ive been playing around with it,  to remove these. Where am I going wrong?

IMG_0049.jpg

Bob_Bringhurst_
Employee
Employee

Try setting the "Text Area Margins" to 0 and add "Text Area Padding" values. Does that work?

jonathon_GA
Level 3
Level 3

I changed Text area padding. That did not resolve the issue. I changed it to red to highlight what i'm seeing. There doesn't seem to be a way to change the transparency.

Screen Shot 2015-11-18 at 2.08.15 PM.png

Bob_Bringhurst_
Employee
Employee

Try setting your Card Borders to 0. I'm assuming you want only the text to appear.

jonathon_GA
Level 3
Level 3

That did work, thank you both. The issue i've been trying to resolve now is my articles (Colored boxes) are over riding my banner. I've played around with the card settings, i'm not doing something right here.

IMG_0051.jpg

Bob_Bringhurst_
Employee
Employee

What do you mean when you say the cards are overriding your banner? Do you mean the banner is not showing up?

jonathon_GA
Level 3
Level 3

I have a transparent banner "Aligned Program" like Exxon. The text hovers over the background image and moves with the collection boxes. Now that I have added the collections (colored boxes). The "Aligned Program" banner is getting bummed to the bottom now. Im sure there is a setting I have wrong, I need to get the banner pushed back to the top some how.

Neil_Enns_-_Ado
Employee
Employee

The order of your items in the collection determines the order they are shown on the screen. Make sure your banner is the first thing in your collection.

Neil

jonathon_GA
Level 3
Level 3

Thanks Neil, that did work. Very simple fix, but I would have over looked that. I am now getting the desired layout.

IMG_0053_10.19.15.jpg

Colin_Fleming
Level 6
Level 6

Looks like your cards are working as expected!

When you say "banner" do you mean the top portion of your collection background image?!

If the "banner" is part of the collection background image, you will need to use a top margin on your LAYOUT to push all content down on the collection. I think that's what Exxon did for the graphic in the upper right corner.

Colin_Fleming
Level 6
Level 6

card borders are opaque. Set all card borders to zero.

As Bob indicates, use text area padding or margin (left) to push text in from the left.

HTH