9 replies to this topic

[cerchris]

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

[Simon_P]

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

[cerchris]

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?

[Simon_P]

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

Please Login or Register to see this Hidden Content

[cerchris]

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?

[Rob]

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

[cerchris]

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;}

[Danny]

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.

[cerchris]

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?

[James B]

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