How do I add css styling to images

A

Hello
I’m building a few landing pages and one of the design features I want to use is shadows under some images.

the shadows are quite subtle and in png8 become very ugly. Moving to PNG32 solves that but creates 300k+ images, thus making the pages slow to load.

I’ve found some CSS3 styles that allow to do just what I need, using standard .jpg and thus removing the excessive page weight and tried to add them to the styles button, having the image clicked.
However, nothing happends.

What do I need to do to add such styles to the images. The code I used is below.

thanks in advance.
Alex

code:

.drop-shadow {
position:relative;
width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}

.drop-shadow:after{
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}

11 replies

J

Unfortunately there is no way at present to add arbitrary CSS class names (such as “drop-shadow”) to Unbounce page elements.

If you want to apply CSS to a specific Unbounce page element you will need to determine the id of the element. To do this you will either need to look at the source HTML of the page when it is in preview mode and look for the image that you want to apply the css to. The id will start with “lp-pom-image-” followed by a number. If you have developer tools installed in your browser such as Firebug or Safaris developer tools you can right click on an element and inspect the HTML making a bit easier to find the relevant information.

In this case your CSS rule would look something like this:

#lp-pom-image-26 {
…rules…
}

If you want to apply the same effect to multiple images then then you can string the ids together separated by commas like this:

#lp-pom-image-26, #lp-pom-image-27, #lp-pom-image-28 {
…rules…
}

If you want to apply the effect to all images then you can target the image CSS class which is “lp-pom-image”. In this case the CSS would look like this:

.lp-pom-image {
…rules…
}

We do plan on adding the ability to apply arbitrary CSS class names and inline styles to Unbounce elements in the not too distant future.

Hope this helps!

Justin

M

Not too distant future…?
It’s April 2012 Ñ any update?

K

Sounds like good old politician in being evasive

T

“We do plan on adding the ability to apply arbitrary CSS class names and inline styles to Unbounce elements in the not too distant future.”

Is that still a feature you guys are thinking of implementing ? It would REALLY help styling those buttons.

M

Is this close to completion guys?

Quinn_Omori
Rank
Userlevel 3
Badge +1

Hi Mark - To be honest, this idea fell down in priority on our product road map. Since the original question from Alexandre, we did add the ability to easily see the specific ID of an image without using inspect element or an outside plug-in (if you click on an image in the Page Editor, in the bottom of the properties panel in the right, you’ll see an Advanced header and the individual image’s ID there).

Because css is applied on a per page basis (and thus, non-global image effects are usually only applied to a handful of images), we’ve left that as the solution for targeting specific images for now, since, while it would be a relatively minor change, there are a lot of other similarly sized jobs that will have a bit more impact on the product once they’re implemented.

J

And… Now it’s 2016… Still no shadow. 

J

it’s a real need

B

Hi,

It will be nice if you could be very clear on this request. It’s a huge need if you do any sort of customization and coding. As an agency, we have this need with nearly 50% of our clients…

What’s the plan of adding custom classes to elements on the page?

Best regards
Lars

Rob
Userlevel 6

Hi @Boost_Company while the ability to assign a custom class to an element using the builder still isn’t a built in feature, you can use the pre-defined classes applied by the builder in order to target elements with custom CSS.

For example, if you wanted to target all images on a page you could do so by using the class .lp-pom-image
You can find the class of any given element in the builder in the meta data section at the bottom of the properties panel:

Alternatively if you only need to target certain images on a page you can comma separate the IDs of each image in the CSS:

#lp-pom-image-1, #lp-pom-image-2, #lp-pom-image-3 {
..rules
}

You can also use jQuery to add a class to an element or a group of elements using the addClass() function. So you can create a custom class in your CSS and apply it to elements using javascript - https://api.jquery.com/addclass/

Hope this helps!

J

Custom classes are super essential to creating scale-able scripts for power users. If you have to constantly have look up div ID’s it gets extremely tedious. Unbounce needs to offer more tools for power users who have developers like me enhancing their pages. Thank you!

Reply


Terms & ConditionsCookie settings