Jump to content


Photo
- - - - -

Is it possible to display heading text using 2 colours?

css font-color heading

  • Please log in to reply
9 replies to this topic

#1 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 09 January 2013 - 12:31 AM

Hi There

 

Please Login or Register to see this Hidden Content

In the boxes section, I am wanting to display the heading in the left hand box with "Courses for" in blue, and "CHILDREN" in white.

 

Any suggestions wd b greatly appreciated



#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2013 - 12:35 AM

Wrap your words in a span like this...

 

 

Please Login or Register to see this Hidden Content

 

 

then use some css...

 

 

Please Login or Register to see this Hidden Content



#3 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 09 January 2013 - 12:46 AM

When I created the box, I filled in the "title" section with the heading. R u saying I can use the html section of the "edit box" page to put in my heading?



#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2013 - 12:50 AM

No im saying you can use some html elements in the title area: 

Please Login or Register to see this Hidden Content



#5 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 09 January 2013 - 02:59 AM

Hey great that worked!

 

Except it has knocked out the html and/or css for the learn more button links below the text in the boxes section.
Any clues on how to fix this?



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 January 2013 - 03:53 AM

I'm not sure how those buttons were supposed to look.  Do you have an old screenshot?



#7 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 09 January 2013 - 09:40 AM

see on this link that the buttons have gone to the standard primary button display -

Please Login or Register to see this Hidden Content



This what they where styled to look like  (the hover state as per the css below) before I put the html into the box title:
 

Please Login or Register to see this Hidden Content

 

This is the css I used to style the button:

.btn {
    background: url(

Please Login or Register to see this Hidden Content

) no-repeat top left;
    width: 155px;
    height: 46px;
        color: #fff;
    border: none;
        cursor: pointer;
        display: inline-block;
    font-family: 'Domine';
        font-size: 14px;
    margin-top: 15px;
        padding: 11px 0px 0px 25px;
        text-align: left;
        text-shadow: none;
        vertical-align: middle;
    box-shadow: none;}
.btn:hover {
    background: url(

Please Login or Register to see this Hidden Content

) no-repeat top left;}



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15084 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 January 2013 - 09:58 AM

Adding a span to the title, wouldn't cause the .btn class to not load an image. However, not sure why you have changed the .btn code by adding a background-image to it.

 

The button code I provided in another post, gives the button a few classes, for example

 

class="btn btn-large btn-primary"

 

You can simply replace btn-primary and add your own using the primary CSS as a template to create your own button.



#9 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 09 January 2013 - 09:10 PM

Ok I think I am starting to understand, this is the html I have placed in the "edit box" section: <a href="

Please Login or Register to see this Hidden Content

" class="btn btn-large btn-box">LEARN MORE</a>

naming my class btn-box. - is that what you mean't?

 

But the css is not taking effect, in my css file I have tried the following:

.btn-box {.....

This one makes the hover effect work but not the static state  - #boxes .btn {.......

.btn btn-large btn-box {.....

 

not sure why this is not working? I had it working before I added button icon links for social media in the footer - maybe there is a clash of code happening now?



#10 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 January 2013 - 04:52 AM

Hi there, I'm not really sure I'm following on the last post. But if you've made your own class for the button like in Danny's example you'll need to apply the your custom css for both states in order for it to work, there shouldn't be a clash unless you've used the same class elsewhere on the site.

 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: css, font-color, heading