Custon css is not working for text

General Discussions
1

Hi. I am using beaver builder plugin and jetpack css editor.
1)I am trying to change text color to specific beaver row in my homepage, by adding the class .pink-text in the row/text editor settings and then writing the css code- .pink-text {color:#FF005A !important;} , in the css editor. nothing happens :frowning:
I even tried to put the class inside the html code (from withinn text editor- ‘text’ tab) by wrapping the text in div, but it is not working either

my editor is working great for other issues, so it isn’t the problem.
2) I am trying to set responsive width to contact form 7, but It is working only to fixed width, not to media queries

Needs help :slight_smile:
Many thanks in advance.

2

[Content Hidden]

3

Hey Avnmer,

Thanks for getting in touch! Try adding the tag you are applying the CSS to. If it’s a <p> tag, your CSS should be like this:

.pink-text p {
  color:#FF005A !important;
}

Not really sure about Contact Form 7 since I haven’t really used them. Also, the BB plugin wouldn’t do anything to how it works as well. I would suggest getting in touch with the plugin devs.

Hope this helps!

Ben

4

I was pretty sure I tried that and it didn’t work, but now it is working. you are a magician, ben :slight_smile:

by the way, is there any way to add text symbols? I have heart shapes in illustrator which I want to put as bullets for some paragraphs.

5

Hey Avnmer,

That should be possible. Simply upload the image to your site then add this CSS snippet accordingly.

li {
 list-style-image: url(http://domain.com/bullet-image-replacement.png);
}

Also, I just saw your site. Try changing the content to Fixed Width on your CF7 row. That should at least help it resize a bit smaller.

Ben

6

thanks a lot. I will try this method.

7

No worries! Let us know how it goes! :slight_smile:

Ben

8

Hi Ben. I tried it but it seems there is no way to set the size of the bullet image. I tried to use-
ul li:before {
content: “”;
background: url(http://bobo.media-buzz.net/wp-content/uploads/2015/08/heart-bullet.png) left top no-repeat;
width: 20px;
height: 20px;
}
but it is is not reducing the size, it just cutting my big heart bullets.

is there any way to do it properly and responsively (size& position)?

9

Hey Avnmer,

Try this CSS and see if it works out! :slight_smile:

.fl-builder-content ul {
  padding-left: 0;
}
.fl-builder-content ul li {
  list-style: none;
}
.fl-builder-content ul li:before {
  content: "";
  background: url(http://bobo.media-buzz.net/wp-content/uploads/2015/08/heart-bullet.png) left top no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-size: 20px;
  vertical-align: text-top;
  margin-right: 5px;
}

Ben

10

Thanks ben! Eventually, I just resized the image, but I will try what you said in the next time.

11

No worries! That works just as well! :slight_smile: Have fun with The Beaver! :slight_smile:

Ben