Jump to content


Photo
- - - - -

Styling Classes - font and colour


  • Please log in to reply
11 replies to this topic

#1 antonyw

antonyw

    Super Member

  • Members
  • 171 posts
  • Country: Country Flag

Posted 01 December 2013 - 05:25 PM

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



#2 jmad

jmad

    Advocate

  • Members

  • 897 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 01 December 2013 - 06:19 PM

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



#3 antonyw

antonyw

    Super Member

  • Members
  • 171 posts
  • Country: Country Flag

Posted 01 December 2013 - 06:36 PM

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?

#4 antonyw

antonyw

    Super Member

  • Members
  • 171 posts
  • Country: Country Flag

Posted 02 December 2013 - 04:32 AM

Please can anyone help me with this?

#5 Danny

Danny

    Is Awesome!

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

Posted 02 December 2013 - 12:04 PM

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.pageline...ng-custom-fonts



#6 antonyw

antonyw

    Super Member

  • Members
  • 171 posts
  • Country: Country Flag

Posted 02 December 2013 - 02:46 PM

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



#7 antonyw

antonyw

    Super Member

  • Members
  • 171 posts
  • Country: Country Flag

Posted 02 December 2013 - 02:55 PM

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

 

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



#8 jmad

jmad

    Advocate

  • Members

  • 897 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 02 December 2013 - 03:33 PM

Try this

 

.testfont2 {

font-size; 15px;

font-family: arial;

color: #00ff00;

}



#9 antonyw

antonyw

    Super Member

  • Members
  • 171 posts
  • Country: Country Flag

Posted 03 December 2013 - 04:50 AM

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

#10 antonyw

antonyw

    Super Member

  • Members
  • 171 posts
  • Country: Country Flag

Posted 03 December 2013 - 05:36 AM

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://maloneywhiteh.../fonts/exljbris - TrajanPro-Regular.otf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}
 
]


#11 antonyw

antonyw

    Super Member

  • Members
  • 171 posts
  • Country: Country Flag

Posted 03 December 2013 - 05:38 AM

i meant this

 

[
 
/* Add trajan Font */
@font-face {
    font-family: 'trajanproreg';
        url('http://maloneywhiteh.../fonts/exljbris - TrajanPro-Regular.otf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}
 
]


#12 James B

James B

    Advocate

  • Members

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

Posted 03 December 2013 - 08:19 AM

Hi there, please see http://docs.pageline...ng-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.