Jump to content

Archived

This topic is now archived and is closed to further replies.

toddlo

How do I change the color of an iCallout button?

Recommended Posts

toddlo    3
toddlo

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...

  • Like 1

Share this post


Link to post
Share on other sites
James B    436
James B

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);
}
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Danny    1,327
Danny

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>


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lighthouserich    1
lighthouserich

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

  • Like 1

Share this post


Link to post
Share on other sites
James B    436
James B

You're welcome


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
    • mistrmint
      By mistrmint+
      Site : http://fireworxmedia.yourdemosite.co.za/
      I need to change the second menu items on hover to different colors.
      i.e factual needs to be blue on hover, fiction red on hover, etc. etc.
      then on the sub menu of factual, all need to hover blue with the main menu factual item staying as blue,
      and the sub menu of fiction needs to hover red with fiction item staying as red.
      etc. etc.
       
      For the life of me I cannot figure it out.
    • paulweller84
      By paulweller84+
      Hello,
      Can anyone shed any light on how I would change the colour of this link text to white? I've styled it using inline CSS but the #FFF is not working, instead it is showing a shade of grey.
      Thanks
      Paul
    • zetanet
      By zetanet+
      How can I customize colors for submenus?
      Go to:
      http://www.centroodontoiatricopitino.it
      For example, in submenu "Specializzazioni" I would like to set the unselect links color to blue and I would like a bigger font for selected/unselected links.
    • zetanet
      By zetanet+
      I can insert three text box in a page, of course.
      I'm not able to set three different background colors to each text box.
      I would like a result as the attached picture.
      How do I do this?

×