• 0
Sign in to follow this  
Followers 0

How do I change the color of an iCallout button?


Question

Posted · Report post

How do I change the color of an iCallout button? Unlike other areas there is no place to specify a hex code or a style class. This is an example of where Pagelines is incredibly sophisticated in some areas but utterly lacking in some of the basics. Pagelines makes it easy to do difficult things but difficult to do easy things sometimes...

1 person likes this

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

You can try, I haven't used the span tag in the TextBox section in such as way. If it doesn't give you the expected effect, you will need to use custom CSS.

 

Another method would be to just use the iCallout class(es) in your header tag, for example add the following to your TextBox text area option.

 

<h2 class="icallout-head">This is my Callout text without using the iCallout section!</h2>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

The icallout section has a drop down which allows for a set of preset colors to be chosen inside the section, like the navbar it doesn't allow for a hex value to be entered manually. The decision to do this originally was for ease of use so people can create sites as quickly as possible by just selecting from the preset options rather than having to enter numbers fields to set up the section etc.

 

You can override the color using css. The color is set by LESS to the class of the button, so in the example below you can change the hex value to the color of your choice, but in the drop down you'll need to make sure the button color in the drop down is set to default. 

 

.section-icallout .btn-primary {
    background-color: #2374FF;
    background-image: none;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

Thanks for that useful insight!

 

But is there a way to remove the button altogether? I have been trying several things unsuccessfully .

 

Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

toddlo

 

You can change the button using the drop down menu to select from several colors. If you want a custom button, you will need to use custom CSS like James mentioned or create a child section of iCallout and add your own color options.

 

Frederic

 

If you do not want the button, there its just plain old text, so there isn't technically a Callout anymore. So you can just replace the iCallout section with a TextBox section.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny,

 

OK but i need a font size 56 and text box is limited to 30.

 

Can I use <span style="font-size: 56px; color: #ff0000;">">...</span>  ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great, thanks Danny,

 

The <span> tag works well in text box and that does the job for me.

 

Thanks for the suggestion about header tag.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B Thanks for the info on how to change the button colours.  Just what I was looking for and worked first time.  :D

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're welcome

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0