Loading...
 
Features / Usability

Features / Usability

Forum List Topic List

Forums » Features / Usability » CSS - Header formatting issues
 
Thread actions
PDF Print this page
  • Print all pages

    • CSS - Header formatting issues

    Posted by RavenC posts: 14 United States

    TikiWiki 4.0
    Profile: Company_Intranet
    Theme: coelesce.css
    Theme Options: fixed_width.css

    Odd sizing behavior in the header.

    When I first bring up the site, the header login and searchbox are really long.

    Image

    When I log in as admin, it changes to "normal" size, although the user|Logout appears to be to far to the left.

    Image

    For the life of me, I cannot determine which css file or what attribute in whichever css file needs to be edited to change this.
    The attributes for the top are:

    Image


    Also, my Site Menu bar is wrapping to two lines. I would like to be able to adjust the width of the tabs so that they all fit on one line.


    Image


    Again, I cannot find any attribute in all of the css files that would allow me to do this.

    Any assistance in pointing me in the right direction would be greratly appreciated. I would gladly start a page for the tw.o doc site called tikiwiki css for dummies!


    Chris

    Reads: 72638
    Link
    Posted by Gary Cunningham-Lee posts: 4656 Japan

    You can use the Firefox browser and Firebug add-on to identify the CSS rules for any item on the page. There are also CSS inspection tools for IE and Opera. The screenshots appear to show IE behavior; is that the browser you're using?

    Coelese.css has size properties for the login/search form. I don't recall offhand the exact CSS selector name. You can try reducing the width. The present width was set to accommodate everything that needs to fit in there (as a theme for distribution, it has to have lowest common denominator qualities to suit the widest range of site admin options).

    Also be aware that IE chokes on a lot of standard CSS, so needs special treatment. There are IE browser-specific files in the /css directory, and also many themes, including Coelesce, have IE CSS files, located in their styles directory (styles/coelesce/ie7.css for example). Before making changes, it's a good idea to be sure that changing how it appears in one browser won't create a problem in another. In some cases, we didn't try to achieve exactly the same look in IE6 or IE7 that modern browsers can manage, given the CSS gymnastics that'd be required for that.

    The menu item widths are given default values in css/cssmenus.css. But some themes override these because they have a different font size or whatever, so check for the rules in the stylesheet targeting something like #tiki-top .cssmenu_horiz li. Again, using Firebug or some other inspector will let you know what CSS is applied to these items.

    Yes, more documentation on the CSS would be great. I think http://themes.tikiwiki.org would be the place for it. I've done a little there, but haven't had the time to do more, yet.

    -- Gary

    Link

    Posted by RavenC posts: 14 United States

    Thanks SO much for the Firebug tip. What an incredible add-on!

    I primarily use Firefox, it just so happened that I had the site open in IE at the time. I use Opera and Chrome as well to check for cross-browser functionality on my sites. The odd behavior I am having is consistent across all browsers, so thankfully it is not an IE issue. I find those to be almost impossible to find and fix. It’s nice to know that TikiWiki has IE CSS files, as it may come in handy if I ever experience those types of issues.

    This Firebug will be extremely helpful in getting me to where I need to be. I will document what I find and put it in a usable manner for the themes.tikiwiki.org site.

    Thanks again for the direction.

    Chris

    Link