By noraa on

I am playing with the 5.x beta with my custom theme. It is here on a temp site: www.memoryflix.biz. I have inserted the new primary link code in the page.tpl.php file. It took some fiddling to get them, along with the background image, to show properly. I used bluemarine page.tpl.php as the basis for the theme. Everything looked good in 4.7.4, as here: www.lifeonilife.com. My only problem is the tabs are now spaced too far apart. I have another theme that is doing the same thing. Looked fine in 4.7.4, but now there are spaces. From that theme, it seems it's the size or padding or margin of the button_over image, but nothing in the css that I change is squashing the space. I even dropped the background image to a 1px width. I realize that the new primary link code is using navlist. My css has navcontainer. I tried changing all the navcontainers to navlist and that really messed things up. So I left the new code as is and put it in
<div id = "navcontainer"></div>
I just want to get rid of the spaces. I didn't want to put this in as an issue because I THINK it's got to be the css, but if anyone thinks it worthy to be an issue I will post it there. I'm a newbie who has discovered custom theming and Dries' post said newbies could contribute to the testing of 5.x beta. I'm definitely in the "dangerous" category. I lived life as a tester for six years, testing against Oracle databases and SAS. Never want to see that life again, but I'll gladly volunteer to test if anyone wants to give me some use cases, or I can just try and break things myself!

Thanks in advance.

⋅ Categories: Drupal 5.x

Comments

markhope’s picture

markhope commented

Hi noraa,

I've replied to your mail BTW, but will post here also...

if you use firefox webdeveloper tools and select 'view style information' you can click on elements of the page to view chunks of css associated with the page element you've clicked on.

Clicking on the primary links shows:

http://www.memoryflix.biz/modules/menu/menu.css

ul.links li    (line 42)
{
    display: inline;
    list-style-type: none;
    padding-top: 0pt;
    padding-right-value: 0.5em;
    padding-bottom: 0pt;
    padding-left-value: 0.5em;
    padding-left-ltr-source: physical;
    padding-left-rtl-source: physical;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;
}

This looks to be a new css file shipped with Drupal core.

Best practice is to overide any core css in your custom theme css.

put the following code in style.css to overide the code in menu.css

#navcontainer ul.links li {
  padding-left: 0;
  padding-right: 0;
}

it's saying "apply 0 padding left and right to li, within a ul with a class of "links" (that's the ul.class bit), but only if it appears within an element with the id of "navcontainer" (apologies if you know this already)

This way you can style your primary links without changing padding on other elements that rely on menu.css

I've not tested the css code but it should point you in the right direction. (i hope) :)

If you don't think you are getting response on drupal.org and your question is css related you could try asking on a more specific list like:
http://meyerweb.com/eric/css/discuss/info.html

post back and let us know how you get on.

Mark

noraa’s picture

noraa commented

As always, you have talked me back down off the window ledge, Markhope. Thanks so much. Two days of frustration on my part, and in less than hour you have uncovered the missing link. HOWEVER, try as I might, entering that piece of code above in my style.css did not change anything. I even lifted it straight from the menu.css with no success. Finally, just to see what would happen, I hacked the menu.css, changing the padding from 0.5em to 0.0em. Now itt looks like this:

ul.links li {
display: inline;
list-style-type: none;
padding: 0 0.0em; /*original setting - padding: 0 0.5em; */
}

markhope’s picture

markhope commented

http://www.memoryflix.biz/

Looks fixed to me.
What did you have to do?

Mark

noraa’s picture

noraa commented

I had to change the padding code in the menu.css from 0.5em to 0.0em. Adding to my style.css didn't seem to take the change. I know that's not the proper way, but I couldn't get anything in the style.css to work for the change. Anyone want to chime in on other alternatives or why it might not work in the style.css? Thanks again for your help, Mark. I didn't even notice that menu.css existed.