[Florian BParticipant]

Hi,

is it possible to give the div an individuell class where the buttons and the backgroundimages are in?
I want to have an individuell backround-image like ou can see on http://florianberger.com

I gave the hole prompt a class but with this solution it does not work probably in responsive view.

Thanks for advise.

[RubinKeymaster]

Hey Florian,

that’s no problem! You can do that easily in the Visual Composer when editing a column you have the option to give it a custom class or you go into the text editor and add class=”yourclassname” to the column where you want it to be.

[Florian BParticipant]

Thanks for your reply.
I know how to do that, but I want change the image in the Container inside the prompt.
So my background image appears in the same div that circle was in.
I know I can replace the circle img, but I want to have a unique image for every single prompt.
So I think I have to change the x-btn-circle-wrap x-btn-block mbn class?!
But I can’t find any div with this class in any php…

[KoryKeymaster]

Hey Florian,

If I’m understanding you correctly and you’re trying to change the background images out for each prompt and need a unique class to do so, and it sounds like you already tried adding a class to the prompt itself. Could you elaborate a little more on why this didn’t work for you? I think this would probably be the best solution if I’m following what you’re trying to do. If that isn’t quite correct, if you wouldn’t mind elaborating on this a little more we’ll be happy to help you out with a solution once we can more fully see what you’re wanting to do.

Thanks!

[Florian BParticipant]

Thanks,

here is what I did:

I gave every prompt a unique class and the following css e.g.:
.project {background: url("http://florianberger.com/wp-content/themes/x/framework/img/global/project1.png"); background-repeat:no-repeat;background-position: 90% 50%; background-color:#ffffff; margin:0 40px 0 40px}

That works fine, but when I reduce the windowsize the image is not in the middle behind the button. Because of that I tried to give the inner container, where the button is in an backgroundimage but I can’t find the right file to do that.

Please take a look here. I hope it explains my problem.

Thanks

[Florian BParticipant]

and sorry for my bad english 🙂

[KoryKeymaster]

Hey Florian,

You’re fine, I just wasn’t completely following last time (let’s chalk it up to a late night on my part). 😉 I think that some of the problem you’re experiencing is the fact that background-image images don’t respond in the way that I think you’re wanting them to (i.e. the way that text, images, buttons, et cetera do), so what you’re trying to do isn’t entirely possible. Maybe instead of a [prompt] shortcode you could consider a [promo] shortcode, which has a space build in for a standard image (not a background image) to be placed up top, and then you can put your text and button inside that and achieve a similar effect. Additionally, the [promo] shortcode is more vertical than horizontal, making it a great choice for you to put your four categories side by side all on one line (Project, Podcast, P-Booth, and Blog). This will ultimately allow users to see more of your content all at once as well, making things a little more accessible most likely.

Let me know what you think when you have a chance, thanks!

[Florian BParticipant]

Hey,

so here is what I did, and it works pretty fine:

.podcast { background: url("http://florianberger.com/wp-content/themes/x/framework/img/global/speaker.png") no-repeat scroll 94% 50% #FFFFFF;
    margin: 0 40px;
	}

@media (max-width: 480px) {
.podcast {background: url("http://florianberger.com/wp-content/themes/x/framework/img/global/speaker.png") no-repeat scroll 60% 80% #FFFFFF;
    margin: 0 40px;}
}
@media (max-width: 979px) {
.podcast {background: url("http://florianberger.com/wp-content/themes/x/framework/img/global/speaker.png") no-repeat scroll 55% 80% #FFFFFF;
    margin: 0 40px;}
	}

But now my question is: where should i put my CSS in, that it don’t get lost with an update?

[RubinKeymaster]

Hey Florian,

the best location for CSS would be Customizer > Custom > CSS or the style.css of a child theme.

[Author]

Posts