Styling Classes - font and colour

[antonyw 0]

Ive tried some of the links from previous threads but im still struggling.

I just need custom 'code' to change font and font colour in text boxes and if possible simple nav... please help

[jmad 80]

Can you elaborate more on what changes you want to make.  Are you wanting to change the header level text or other?  

[antonyw 0]

Hi, I want to define specific font, font colour and font size for text in text boxes and if possible text in simple nav. I think I need to create a style class and then reference this in the style class box..... Somehow?

[antonyw 0]

Please can anyone help me with this?

[Danny+ 1,327]

All you need to do is create custom classes, for example.

 

.blue-text { color: blue; }

.red-text { color: red; }

 

The add the class name to the textbox styling classes field for example, lets say you want blue text, the TextBox styling classes field, add the following:

 

blue-text

 

Then save, this should make the text blue.

 

In regards to adding custom fonts, see our documentation here - http://docs.pagelines.com/tutorials/adding-custom-fonts

[antonyw 0]

sorry - one more, in your blue-text example above how would it look if i was defining a font.... is it that simple? 

 

[.testfont1 { font-family: arial; }] ???

[antonyw 0]

sorry - any reason why this (or any hex) doesnt work?

 

.purple-text {colour: #00ff00; }

[jmad 80]

Try this

 

.testfont2 {

font-size; 15px;

font-family: arial;

color: #00ff00;

}

[antonyw 0]

Brilliant, this worked, really appreciated your help with this thank you thank you

[antonyw 0]

Above you gave me a link to 'custom font' info.

 

my font file is .otf which apparently is the new .ttf......

 

should i just use the 'ttf' URL lines in the customisation?

 

like so:

 

[

 

/* Add trajan Font */

@font-face {

    font-family: 'gooddogregular';

        url('http://maloneywhitehead.com/wp-content/uploads/fonts/exljbris - TrajanPro-Regular.otf') format('truetype'),

    font-weight: normal;

    font-style: normal;

}

 

]

[antonyw 0]

i meant this

 

[

 

/* Add trajan Font */

@font-face {

    font-family: 'trajanproreg';

        url('http://maloneywhitehead.com/wp-content/uploads/fonts/exljbris - TrajanPro-Regular.otf') format('truetype'),

    font-weight: normal;

    font-style: normal;

}

 

]

[James B 436]

Hi there, please see http://docs.pagelines.com/tutorials/adding-custom-fonts which has a full example of the code needed for adding the custom font css and the instructions for uploading the font files.