Change fonts in labels
Last Post 11/14/2006 8:59 AM by Lee Sykes. 6 Replies.
Author Messages
Olafur Ingthorsson
Nuke Active Member
Nuke Active Member
Posts:24


--
11/14/2006 4:40 AM

    I am using a module called Opt-in Email from Datasprings that I have inserted to a container/pane on a site I am developing. I am trying to find where/how to change the font labels for the fields in the module. I have figured out that I can change the field size in default.css in the following section

    /* text style used for textboxes in the admin and edit pages, for Nav compatibility */
    .NormalTextBox
    {
        font-family: Tahoma, Arial, Helvetica;
        font-size: 10px;
        font-weight: normal;

    but still don't know where to change the font (size and type) in the field labels. Currently these are associated with the browser settings. Any ideas?

    Thanks, olafur

     

    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    11/14/2006 5:23 AM

    Hello,

    Following your email with the website: http://www.wsi-staging.com/mosfell/

    I analysed the code using the web developers toolbar for firefox as I suggested.

    There is not a specific css class for styling the labels of this module, it looks as though the module developer has not set this up. But, you can use the ids that DNN creates for the labels. - Using the web developer toolbar, I found the following ids are created on the page above, so you can use this CSS:

      #dnn_ctr713__OptInSimple_lblFirstName_label,  #dnn_ctr713__OptInSimple_lblLastName_label,  #dnn_ctr713__OptInSimple_lblEmail_lblLabel,  #dnn_ctr713__OptInSimple_lnkSubscribe
    {
    font-family: Verdana, Geneva, Arial, helvetica, sans-serif, Tahoma;
     font-size:0.75em;
    }

    Of course, the dnn ctr ids will change for another instance of the module on a different page, so you will need to view the ids using the web developers toolbar if you place the module on another page.

    I recommend that you view this tutorial which will be released in issue 16 which outlines how to work with the web developers toolbar:

     

    Thanks,

    http://www.dnncreative.com/Tutorial...fault.aspx
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Olafur Ingthorsson
    Nuke Active Member
    Nuke Active Member
    Posts:24


    --
    11/14/2006 6:17 AM

    Hi Lee,
    Thanks alot for your help. This is all rather new to me. Can you please explain what you mean by "page above". Should the code be inserted into the default.css file - or where did you find this code?
    I already have the developer toolbar in my Firefox and I am learing to use it.

    Thanks,
    Olafur

     

    Olafur Ingthorsson
    Nuke Active Member
    Nuke Active Member
    Posts:24


    --
    11/14/2006 6:26 AM
    Sorry of course the "page above" is the url to the site. However, I can still not find the code you had in any of the css files, default.css, skin.css or portal.css. I am using "Edit CSS" in developers toolbar

    Thanks,
    Olafur
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    11/14/2006 6:33 AM
    Hello,

    You won't find the CSS I have just given you in the CSS files, you need to add it into the skin.css file.

    Thanks,
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Olafur Ingthorsson
    Nuke Active Member
    Nuke Active Member
    Posts:24


    --
    11/14/2006 7:52 AM
    Hi,
    I did as you recommended and it looks fine now - thanks alot. Would you know how to set the label font size in the above "fixed"? Currently their size changes with regard of the text size I select in the browser (Largest, Larger, Medium, Smaller, Smallest).

    Thanks again,
    Olafur
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    11/14/2006 8:59 AM
    Just state the font size in pixels rather than use relative sizing:

    ie:

    font-size:12px;
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile


    ---