Products

Solutions

Learn More

Partners

Community

Blog

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Control Bar styling is impacted by skin cssControl Bar styling is impacted by skin css
Previous
 
Next
New Post
9/11/2014 3:27 AM
 

Hi Mike,

If its any help to you here's the css overrides I use for responsive framework skinning and it usually works:

#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;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.navbar-default .navbar-nav > li > div > ul > li > a, .navbar-default .LoginLink {
color: #ffffff;
}

.navbar-default .navbar-nav > li > div > a:hover,
.navbar-default .navbar-nav > li > div > a:focus,
.navbar-default .navbar-nav > li > div > ul > li > a:hover,
.navbar-default .navbar-nav > li > div > ul > li > a:focus {
  color: #ffffff;
  background-color: #178acc;
}

Give it a go to see if it solves your problems,

 

Regards,

Geoff


      
 
New Post
9/11/2014 7:28 AM
 
Richard Howells wrote:
I think you are supposed to wrap your skin parts in a div. Use the div to qualify your css.

That way your CSS can stay out of their parts.

 I agree.
Also, make sure you either don't place the controlpanel skin object in your skin, or place it outside the maim element containing the css framework html.

 
New Post
9/11/2014 10:28 AM
 

Thank you very much for the help, I have made some progress.

The CSS overrides from Geoff fixed my ModuleMove control popup menu.  It also fixed up the Control Panel except I still had black on black text which I fixed with:

#ControlBar a {
    font-size: 13px !important;
    font-family: Arial !important;
    line-height: 18px !important;
    border-bottom: 0;
    padding-bottom: 0px;
    color: #ccc !important;
}

I don't use the ControlPanel skin object so my ControlPanel is outside of my main content.  What I would like to be able to do is to use the css provided by "Type and Grids" without modifying it.  It uses an optimized version of Foundation and great care is placed on typography http://www.typeandgrids.com/.  I made my skin and it came real close to working perfectly, it is responsive, most style is fine but some of the styles from default.css are overriding the css from Type and Grids.  So to make it work I have to move some css into the skin.css and add !important. 

 Type and Grids comes with 100 different css files for changing the style, each stylesheet has a name like "hawthorne_type2_color2.css".  So in a perfect world I would just change this

@import url('./css/hawthorne_type4_color3.css');

in the skin.css file to change the look of my site.  This works almost perfect but there are just a few things that go haywire and the only way to fix it so far is to add more styles to the skin.css file which I would rather not have to do as it gets very time intensive.

So here is the markup for my skin, I have it in a div called "wrapper", but I am not sure what to do to my css to isolate my layout from DNN css.

<div class="wrapper">
<div class="top-border"></div>
<div class="row">
	<div class="small-12 medium-12 large-12 small-centered columns">
		<header>		
			<dnn:LOGO runat="server" id="dnnLOGO" />
		</header>
	</div>
	<div class="small-12 medium-12 large-12 small-centered columns">
		<nav>
            
		    <dnn:MENU MenuStyle="Simple" runat="server"></dnn:MENU>
            
        </nav>
	</div>
</div>
<div class="row" id="ResponsiveOne" runat="server"></div>
<div class="row" id="ContentPane" runat="server"></div>
<div class="row">
   <div class="small-12 medium-3 large-3 columns" id="Left3" runat="server"></div>
   <div class="small-12 medium-9 large-9 columns" id="Right9" runat="server"></div>
</div>
<div class="row">
   <div class="small-12 medium-9 large-9 columns" id="Left9" runat="server"></div>
   <div class="small-12 medium-3 large-3 columns" id="Right3" runat="server"></div>
</div>
<div class="row">
   <div class="small-12 medium-4 large-4 columns" id="Left4" runat="server"></div>
   <div class="small-12 medium-4 large-4 columns" id="Mid4" runat="server"></div>
   <div class="small-12 medium-4 large-4 columns" id="Right4" runat="server"></div>
</div>
<div class="row" id="ResponsiveTwo" runat="server"></div>
<div class="row">
   <div class="small-12 medium-6 large-6 columns" id="Left6" runat="server"></div>
   <div class="small-12 medium-6 large-6 columns" id="Right6" runat="server"></div>
</div>
<div class="row" id="ResponsiveThree" runat="server"></div>
<div class="row">
	<div class="small-12 medium-12 large-12 columns">
		<footer>
		    <ul>
                <li><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" /></li>
                <li><dnn:PRIVACY runat="server" id="dnnPRIVACY" /></li>
                <li><dnn:LOGIN runat="server" id="dnnLOGIN" /></li>
                <li><dnn:USER runat="server" id="dnnUSER" /></li>
                <li><dnn:TERMS runat="server" id="dnnTERMS" /></li>
            </ul>
			<div class="social-icons" id="SocialLinks" runat="server">
				
			</div>
		</footer>
	</div>
</div>
</div>

 

 
New Post
9/11/2014 12:55 PM
 
If I see correctly Type and Grids is using CSS that's too specific and makes it difficult to use with a framework like DNN.

Example:

 

 
New Post
9/11/2014 2:51 PM
 

Thank you very much Timo, I am making very good progress now.  Too bad it takes so much effort to stop all the css from fighting.  Nature of the beast I suppose.  I put your wrapper code into the skin.css.  I am hoping I don't have to modify the type and grids css, because they are 5000 lines each.

 So once I get this debugged, I will just need to make a skin file for each colour/style combination.  Much more work than I hoped, but not so bad once I get it all figured out and commented.

 Mike

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Control Bar styling is impacted by skin cssControl Bar styling is impacted by skin css


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  

What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out