-
Posts
-
Hei,
In case this falls out of the support scope, perhaps any participants could come up with a solution to this problem?
I am trying to apply shadow effect2 for a call-to-action element on my homepage ( http://www.paulund.co.uk/creating-different-css3-box-shadows-effects ).
Through the Avia Layout builder I have assigned the element a custom class called: my-call-to-action-element
The whole effect2 css code, which is shown on the website mentioned above, I then pasted in in my Quick CSS field like this:
#top .my-call-to-action-element
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;…………………..and so forth.(I did cut out the initial code piece containing .box h3 and .box though, as they probably are inherited from the theme, and therefor not needed here).
However, it does not give any effect. I suspect that the selector .effect2 must be somehow included in html div class (like shown in the website mentioned above: <div class=”box effect2″>.
But I have no idea where I can find the file which includes the div classes for this call to action element? In case the custom css class field IS the div class of the element, I have also tried to assign the element a custom class called effect2 instead of my-call-to-action-element, but it didn’t help.
Any help will be highly appreciated!
Hey nerkasa!
Looks like your syntax may just be off. If your custom class is “my-call-to-action-element” then your css would be:
#top .my-call-to-action-element { /*the css*/ }The “effect” is the class name and since you don’t have one in your html then the rules would just not be applied to anything. The css declarations (whats inside the brackets) is what does the styling to whatever selectors (the class and #top) are.
The :after and :before are the pseudo classes on whatever your custom class name is.
Cheers!
DevinHei Devin, thanks for your response!
1) If the class name “effect2″ was already assigned to this call to action element (i.e. to the element’s main div) in the html, perhaps the selector .my-call-to-action-element wouldn’t be needed here at all (only .effect2 selector would be needed, exactly just like it is written in the example css code on http://www.paulund.co.uk/creating-different-css3-box-shadows-effects ?
.
.
2) Could you tell me where are the files, where I could include the html part of the code:
<div class=”box effect2”>
<h3>CALL TO ACTION ELEMENT</h3>
</div>
I am using blank child theme, so I guess I must copy the responsible parent folder containing these files, and then paste and edit them in the child theme.
.
.
3) I guess, giving the element custom css class name “effect2” in the custom css class field is not the right way to do it either? (already tried it – naming the element “effect2 instead of “my-call-to-action-element” – however, with no effect):
http://picpaste.com/Custom-class-field-jJjWxxbL.png
.
.
Thanks a lot yet again,Best regards,
Nerkasa1) Whatever it is, the selector you want to apply the css to is all that matters.
2) There isn’t a single source that you could add something like that to. You would need to use the Code element and then add in the custom html and styling it all manually.
3) Yes, it should actually be correct. It sounds like the issue is you may not be familiar enough with the html and css interaction to make the connection. If you have the extra budget you can hire a freelance developer from Codeable to walk you through it at about $25-$35.
- The topic ‘Assigning custom div class issue’ is closed to new replies.