Archived

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

  • 0

Is it possible to display heading text using 2 colours?


Question

Posted · Report post

Hi There

 

http://janetnicol.co.nz/?page_id=23

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

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Wrap your words in a span like this...

 

 

<span class="course_1">Courses</span> for <span class="children_1">Children</span>

 

 

then use some css...

 

 

.course_1 {
    color: blue;
}

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

see on this link that the buttons have gone to the standard primary button display - http://janetnicol.co.nz/?page_id=23

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:
 

post-41056-0-06509900-1357609799_thumb.j

 

This is the css I used to style the button:

.btn {
    background: url(http://janetnicol.co.nz/wp-content/uploads/2013/01/readmore-bk3.jpg) 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(http://janetnicol.co.nz/wp-content/uploads/2013/01/readmore-bk3-HOVER.jpg) no-repeat top left;}

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Ok I think I am starting to understand, this is the html I have placed in the "edit box" section: <a href="http://janetnicol.co.nz/?page_id=37" 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?

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

.btn-box {..... would be the static state, 

.btn-box :hover {..... would be the hover state. 

Share this post


Link to post
Share on other sites