Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

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, ...Too much space above and below menuToo much space above and below menu
Previous
 
Next
New Post
5/27/2006 10:15 AM
 

I really need help as I've wasted so many hours trying to figure this out. Nobody answered my last 3 posts but I am desparate so here goes again.

I finally got my first skin to work in spite of the "instructions" by using the DNN horizontal full template and replacing the graphics and containers with my own. My table layout works...hallelujiah! And the graphic I used to replace the DNN skingradient also works and looks brilliant! Double hallelujiah! The containers for modules all show up! YAY!

The problem:  (I replaced the word [MENU] with [SOLPARTMENU] so maybe that's my problem?)

The bar graphic (skingradient) isn't tall enough...adding row height in html or putting height in CSS doesn't seem to have any effect. It does tile perfectly horizontally though. Do I need to just resize the actual graphic to how tall I want it?

The bar has too much space above and below it. Changing the valign in the rows in html only makes the text and search bar go in the wrong place. Putting 10x padding above and below (the amount I actually want I think)  in CSS has no effect. Negative padding in CSS has no effect.

Also, the word SEARCH on there I want white and I have the font set to white in the html but something is making it blue. What am I doing wrong?

I must have uploaded this one skin at least 150xxx already!

~Bee

 
New Post
5/27/2006 11:01 AM
 

Your answers to your post is listed below -

Skingradient - not tall enough - it's just not going to work - you need another image - if you set the size to be taller - and it's set at repeat-x in the css it will only stretch widthways... so if there's not enough space, then open the gradient in photoshop and stretch it a bit more to the height you require - that should kill off the unwanted spaces.

The reason there is spacing below and above your skingradient is you are making the cell the right size but the image used is stretching widthways, not height. So, that extra space should in theory go, if I'm reading the problem correclty - if you make the gradient taller. that's the nature of CSS.

If you were to create a .skinobject class and set link classes as well, you'll get the colour font you want.  By default, none specified links are purple and blue, which is why your links don't change color.

In the skinning document - there is information on the class that the Search text will use. - It uses a class called skinobjects by default..


/* Search Elements */
.SkinObject {color: #404040;}

a.SkinObject, a.SkinObject:active {text-decoration: none;color: #467599;font-weight: normal;}
a.SkinObject:hover {text-decoration: none;color: #404040;font-weight: normal;}
a.SkinObject, a.SkinObject:visited, {text-decoration: none;color: #467599;font-weight: normal;}

Now this code I've provided here has a mix of colours - I've just taken from another file of mine, to show as an example.

But what this will do is set all your links like - search, login, user, copyright, terms, privacy, date to this look and feel since by default the use the skinobject class.

What you can do is assign a specific class in the xml file (if you're using xml/html) for the search function and override the behaviour of the default settings.. and call it something unique like .search instead.

The reason I'm suggesting this is because you might have different colour backgrounds on the site and require different colour links.. In my opinion, it's normally LightBG & DarkBG classes that need to be defined in a skin - and that's what I do for most of mine - I put in my own classes and override the default settings since I want complete control over every element of the design.

It's late here so I won't be posting in the morning, but see how you go with that information.  I"ve got free skins you can download and take apart and get ideas from - currently I'm redoing them, but there's enough there to get you started.

I can't tell you how many hours I've spent knocking my head on walls trying to learn things that just don't seem to make sense, but believe me, they will all come together eventually - and as you see, you've already moved ahead from the previous posts.

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
5/28/2006 12:24 PM
 

Hi Nina,

Thanks so much for the help. I fixed the spacing problem. It was a combo of a wrong class applied, some invisible anonymous table cells, unknown default positioning of a background graphic, improper application of cell sizes, and too tall of a size on the menu bar. So it took me almost all day to work the problems out one by one.

Meanwhile, I still need help with making the word SEARCH be white. The problem is that I don't understand how the attributes (DNN Skinning pdf) are supposed to go into the XML file. I tried the following but it gives an error.

[quote]    <Token>[LOGIN]</Token>
       <Settings>
           <Setting>
               <Name>CssClass</Name>
               <Value>TokenObject</Value>
           </Setting>
       </Settings>
</Object>
<Object>
    <Token>[BREADCRUMB]</Token>
       <Settings>
           <Setting>
               <Name>CssClass</Name>
               <Value>BreadCrumb</Value>
           </Setting>
           <Setting>
               <Name>RootLevel</Name>
               <Value>0</Value>
           </Setting>  
       </Settings>
</Object>
    <Token>[SEARCH]</Token>
       <Settings>
           <Setting>
               <Name>CssClass</Name>
               <Value>MenuObject</Value>
           </Setting>
           <Setting>
        </Settings>
</Object> [/quote]

The .TokenObject and the .MenuObject are for changing the defaults to tokens like LOGIN, SEARCH, USER, and etc. I made two so I can have one for white and one for another color. However, when trying to set it up in the XML I had to just "guess" what to put and it gets an error when I upload.

I am hoping you can help me understand better so I can be able to use the XML for whatever I want.

Thanks again!

~Bee

 
New Post
5/29/2006 7:51 PM
 

Ha you did have some fun and it doea appear you did get yourself into a bit of a bind there, but glad you were able to isolate them.. Sometimes for me it's a matter of completely removing any CSS / formatting references and starting from scratch.

OK  - I don't work much with XML functions but it looks like you're doing the right thing - the key to see if it is correct is to download and open the ascx file that's been parsed.. eg.. created using the skinning engine and just check you can see in the Search SkinObject that's been created CssClass="MenuObject"   - if that's in there - it's right -  But you need more than that - you need to have the CSS file with the relevant information AND you need to put in the link references like I explained in previous posts...the search function is using a LINK / COMMAND function that requires you to add the link, active, visited functions - it's not just static text..  Have you done that?

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
5/31/2006 3:12 PM
 

Dear bmjohnson

Never, never promise something if you don't be sure... But that you know...
Take a closer look at this code...

<table class="" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class=""><span id="Srch">[SEARCH]</span><span class="SrchLink">Search&nbsp;&raquo;</span></td>
     </tr>
</table>

And the css class:

#Srch .NormalTextbox
{width: 140px; color: #3f3f3f; background-color: #ffffff; height: 16px; border: #dfdfdf 1px solid; font-size:10px;}

.SrchLink
{
 font-weight: normal;
 font-size: 11px;
 color: #5f5f5f;
 font-family: Verdana, Arial, Tahoma, Sans-Serif;
 white-space: nowrap;
 text-decoration: none;
 vertical-align: middle;
}
a.SrchLink:link, a.SrchLink:visited
{
 font-weight: normal;
 font-size: 11px;
 padding-bottom: 1px;
 color: #557f4a;
 font-family: Verdana, Arial, Tahoma, Sans-Serif;
 text-decoration: none;
}
a.SrchLink:hover
{
 cursor: pointer;
 cursor: hand;
 color: #26bf00;
}
a.SrchLink:active, a.SrchLink:focus
{
 cursor: pointer;
 cursor: hand;
 color: #197f00;
}
a.SrchLink:active:hover
{
 cursor: pointer;
 cursor: hand;
 color: #26bf00;
}

If you want a different background when the textbox had the focus (only works in FF) then:

.NormalTextbox:focus
{
 cursor: pointer;
 cursor: hand;
 color: #26bf00;
 background: #123456;

}


And in the .xml file of your skin.

<Object>
  <Token>[SEARCH]</Token>
  <Settings>
    <Setting>
      <Name>Submit</Name>
      <Value><![CDATA[<img style=&quot; vertical-align: middle; text-align: left&quot; alt=&quot;Zoek&quot; src=&quot;Srch.gif&quot; />]]> </Value>
    </Setting>
    <Setting>
      <Name>CssClass</Name>
      <Value>SrchLink</Value>
    </Setting>
  </Settings>
</Object>

  Hope this will help


Vriendelijke groeten
Gilbert Vanden Borre
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Too much space above and below menuToo much space above and below menu


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.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out