Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Help modifying CSS


Reply


7 Posts   1116 Views

Avatar
mrwindupbird

Community Member, 26 Posts

25 October 2009 at 2:13am

I want to remove a few pixels from a buffer space below a hyperlink, but I can't figure out how. I am using a modified streetstyle template. You can see it at: http://www.mrwindupbird.com/comingsoon.html

What I want to do is remove some a couple of pixels blackspace from beneath the "c o m i n g . s o o n" text.

Here is what I have in layout.css:

----------------------------------------------------------------

.menu a {
font: normal 1.1em sans-serif,Arial;
color: #FFF;
background: #000;
display: block;
margin-top: 5px;
padding-bottom: 0px;
width: 220px;
height: 22px;
}

.menu a span {
padding-left: 4px; color: #FFF;
}

.menu a.current{ color:#f09;
}

.menu a.section,
.menu a:hover {
color: #159fdd;
}

----------------------------------------------------------------

And the following can be found in typography.css:

----------------------------------------------------------------

.typography a {
color:#F09;
text-decoration: none;
padding-bottom: 0px;
}

a {
color:#FFF;
text-decoration: none;
padding-top: 2px;
padding-bottom: 0px;
}

.typography a#big,
a#big {
text-align: right;
color: #F09;
padding-top: 2px;
padding-bottom: 0px;
}

a:hover,
a.ro {
color: #F09;
padding-top: 2px;
padding-bottom: 0px;
}

----------------------------------------------------------------

Obviously, I have played with "padding-bottom" but to no avail. Any pointers in the right direction or all-out "do it like this:" help is greatly appreciated.

Thank you!!

Avatar
socks

Community Member, 190 Posts

25 October 2009 at 9:34am

Edited: 25/10/2009 9:35am

So you're trying to center the text from top to bottom... Not sure what u know and don't know, so I'll go over the basics.

If you don't have Firebug for FireFox, get it. It will help you troubleshoot on the fly.

The 3 things that affect your issue are:
height, line-height, & padding.

When you center something top to bottom, it almost always should have less padding-top and more padding-bottom (ie padding-top:5px, padding-bottom: 6px). This will give the illusion of center. This is true for anything (ie centering a photo in a frame).

Anytime you add padding, your increasing the size. (ie width: 100, padding-left: 5....new width is 105)

So to start, try:

line-height: 16px
height: 16px;
padding: 5px 0 6px 0;

Other notes:

Remove the title tag from the code. I get so annoyed when it's used improperly. I don't need a tool-tip that says the same thing as the menu text. And I certainly don't need a "Go to the --- page" since anyone that has used the internet more than a day, knows that a menu button takes them to another page... wish they'd remove that from the tutorials. It makes the site less usable, especially if you have a drop-down sub nav and you can't read the text because there are tool-tips on everything.

Remove align = center from the <p> & <a>, and add text-align: center to the code above... if you're going to have many items in the menu, then the common method is an Unordered List instead of a Paragraph.

Avatar
mrwindupbird

Community Member, 26 Posts

25 October 2009 at 1:47pm

I am brand new to this. Never made a webpage before I started this project a few days ago, so it is very much a learning process for me. I can obviously find my way around a computer, but this is a new language for me... Thanks for the tips!!

I will try placing the code you posted to various parts of the layout and typeface files, but if you could, can you tell me where they should go? I'm frankly not sure what the difference is between many of them. I just figured the "a" section in CSS was meant for <A HREF> bit in hyperlinks... but I'm also still not sure how it only applies to hyperlinks in the navigation menu and not in the content section. LOTS to learn!!!

I will also clean up the extraneous stuff as you suggested. Good point. :)

Thanks again!

Avatar
mrwindupbird

Community Member, 26 Posts

25 October 2009 at 1:57pm

Interesting, so I found that I got the results I wanted by copying:

line-height: 15px;
padding: 3px 0 3px 0;
height: 15px;

to the ".menu a" section in the layout file and the "a:hover, a.ro" section in the typography file. What are the other sections doing that they don't matter? Is there documentation for this or are they arbitrarily named in the context of the theme?

Hey thanks again for your help! Site is looking great with text visually centered in the nav bars, and extraneous code removed from the menu! :) I also installed the firebug add-on you mentioned. Don't know what it does yet but looking forward to playing around and finding out.

Avatar
mrwindupbird

Community Member, 26 Posts

25 October 2009 at 2:05pm

Looks like I got ahead of myself... Where is the code with the "Go to xxxx" menu hover items that I should remove? I looked in the php files in /mysite/code but it's not there... ?

Avatar
socks

Community Member, 190 Posts

25 October 2009 at 2:12pm

If you only want to affect the links in your menu then only apply to .menu a, .menu a:hover

You can find the title="----" in your template files. It's probably Page.ss

Firebug will show you which styles are being applied to the parts of your site. Click the pointer icon, then click a part of your site.

Avatar
mrwindupbird

Community Member, 26 Posts

26 October 2009 at 4:33pm

Great, thanks so much!