Forums > Skinning Toolkit > Skinning Toolkit
bootstrap 3.2.0
Last Post 12/16/2014 7:40 AM by Michael. 7 Replies.
Author Messages
Michael
Nuke Newbie
Nuke Newbie
Posts:4


--
08/11/2014 10:10 AM
    hello,

    i created a skin with bootstrap 3.2.0 and dnn 7.3.1 but i think there is a conflict with some styles cause the admin control bar doesn't look correct when i integrate bootstrap 3.2.0 into my skin.

    one style i found to correct:

    #ControlBar { height: 53px !important; }

    but the blue buttons to change into the edit mode are cutten and the two checboxes has a grey background color.

    how can i correct this?

    thanks for help

    best regards

    michael
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/12/2014 9:16 PM
    Can you post a link to the site? This is not an easy question to answer in the abstract.

    You might want to study Andy's Bootstrap 3 tutorial and take a look at the skin's CSS files.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Michael
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    08/20/2014 4:31 AM
    hello,

    it's only a local installation.
    i looked into the tutorial but at the tutorial there is an older bootstrap version used.

    and with the older version i don't have this problem. only with the latest version of dnn and boostrap.

    i atteched a screen where you can see a white space around the checkbox.
    i fixed the background color from the controlbar with that stye:

    #ControlBar { height: 53px !important; }
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/20/2014 7:29 AM
    There is a Bootstrap 3 tutorial: http://www.dnncreative.com/Training...fault.aspx

    Please try attaching the screenshot again. It didn't work this time.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Michael
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    09/03/2014 7:10 AM
    i attached the screen again.

    i didn't changed anything at the default styles from dnn or bootstrap.

    at the tutorial this stylesheet doesn't happend, but it's not with bootstrap 3.2.0
    Michael
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    10/02/2014 7:05 AM
    today i saw that there some changes from the bootstrap 3.0 version from your tutorial and the latest bootstrap version 3.2.0.

    in your tutorial you are using span-12 oder span-8 für the colums and with the latest version you have to use col-md-12 or col-md-8

    something changed at the css files. a tutriol update with bootstrap 3.2.0 would be great
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    10/03/2014 7:29 AM
    Thanks.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Michael
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    12/16/2014 7:40 AM
    now i found the styles which are needed, that bootstrap 3.2.0 and 3.3.1 are working correctly with dnn 

    /*override for dnnLabels in the bootstrap */
.form-group .dnnLabel { text-align: left; width: auto; }

.dnnLabel + span { white-space: normal; }
/* ADMIN */

#ControlBar, #ControlBar:before, #ControlBar:after, #ControlBar *:before, #ControlBar *:after,
#ControlBar li, #ControlBar li:before, #ControlBar li:after,
#ControlBar a, #ControlBar a:before, #ControlBar a:after,
.dnn_mact, .dnn_mact:before, .dnn_mact:after, .dnn_mact *:before, .dnn_mact *:after,
.dnn_mact li, .dnn_mact li:before, .dnn_mact li:after { -webkit-box-sizing: content-box !important; /* Safari/Chrome, other WebKit */ -moz-box-sizing: content-box !important; /* Firefox, other Gecko */ box-sizing: content-box !important; /* Opera/IE 8+ */ }

/* fix for DNN dropdown lists being cut off*/
.dnnDropDownList .selected-item, .dnnDropDownList .selected-item a { height: 35px !important; }

/* fix for coloring on DNN Check boxes */
.dnnCheckbox .mark { background: none; }

    Forums > Skinning Toolkit > Skinning Toolkit
    ---