Forum

css questions
 
Notifications
Clear all

css questions

Page 1 / 2
aquaanimus
(@aquaanimus)
Trusted Member

I've tried to use my Firefox web editor thing by showing the Element Information,

But, I have admitted defeat.

I don't know the exact terms, so I will describe what I want.

When a member clicks on "category"  it will bring them to the browsing section.  Then it will show the boxes of the recent stories.  My boxes are huge!  I wanted to "squish" them up a bit, so more can fit on the page, without so much white area.  So I tried to change the font.  I did this:

.listbox .title .label, .listbox .tail .label, .listbox .tail .adminoptions .label {
color: #D1E0EF;
font-weight: bold;
}

/* The content of the box...summary, categories, etc. */
.listbox .content {

"Quoth the raven, `Nevermore.'"  - EAP

Quote
Topic starter Posted : 11/07/2009 1:55 am
Elle
 Elle
(@jenny)
Honorable Member

I'm not sure which page you're looking at, do you mean the listing boxes?

If you want to change the font size, I'd recommend using em or % as a your unit -- you'll see the difference, hopefully!

You can also edit the .tpl (I think it's listings.tpl?) to remove some <br />s so you can fit more on one line. It's what I do in most of my skins!

For the index question, you could also probably modify the blocks in index.tpl to remove some of the <br />s, or change the margin/padding for .featuredbox .content.

Let me know if you need me to clarify. 🙂

archive: dramione.org
site: accio.nu

Available for skin/mod commission! 🙂

ReplyQuote
Posted : 11/07/2009 10:44 am
aquaanimus
(@aquaanimus)
Trusted Member

I'm sorry, I'm a little confused.   😕  

I did remove one of the <br>  at the end of the title of my featured and recent stories, so I could put the rating next to it.  I still want the rest of the classifications text to be in a column.  I have also never been introduced to em, or %.  If you could explain a bit, I would be so appreciative!

I am going to grab some screen shots, so you know what I am talking about - what I am trying to do.  😀  I can be confusing, I know.  

On a side note, one of the errors a member was complaining about,  I figured out was simply in the text of her story.  I have no clue what she did,  but, I am happy it is just User Error.  Makes things so much simpler! hahah

Here are the screen shots.

edit, I realized the text on the pic turned out tiinnny!  So, this text says I would like to remove a bit of this white space.

edit, I realized my text on the pic turned out tinnny!  So, the pink text says, Can I make this entire box a little smaller? (pink line around it)

I hope this makes it a bit clearer!  Thanks again,  I really mean it!

"Quoth the raven, `Nevermore.'"  - EAP

ReplyQuote
Topic starter Posted : 11/07/2009 6:11 pm
Elle
 Elle
(@jenny)
Honorable Member

Sure thing!

pt, (you may be familiar with px), em and % are all units of measurement. pt is used mainly in print, and it is (or should be) discouraged when designing websites. The px is a "static" measurement, you could say, but em and % are relative. They're a lot better because they're scalable; so if someone finds your text too big or too small, then can reduce the text themselves, for example. There is a lot of debate which is the "best" to use, but it depends mainly on what you want to achieve. This is an interesting page about it.

For the space in the recent block, you'll have to find this in your CSS:

.recentbox {
margin-bottom: 2em;
}

And change it around. Try with using "0" (which doesn't require a unit, because 0em isl the same as 0px :P) and then adjusting it until the space is what you want.

For making the featured text smaller, you'll have to use something like .featuredcontent . content { font-size: 0.8em; }. I'm not sure how you're coding it though... The width can be modified through .block {} 🙂

archive: dramione.org
site: accio.nu

Available for skin/mod commission! 🙂

ReplyQuote
Posted : 12/07/2009 12:27 pm
aquaanimus
(@aquaanimus)
Trusted Member

Sweet!  Thanks. I will read up on that page you sent, and also try the suggestions you made.  It might take me a few days because I have to study for my PRAXIS test that is the 25th, so I need to dedicate more time to that these next two weeks.  I will pop back on if I have any other questions.  But I will do my best to play before I bother again. 😀

You guys are all so nice!  I wish I could thank you more!  I donated a bit of money to the site, hopefully it will help with the host fees.  I wish I could have given more, but well, ya know how it is right now.

Thanks so much!

"Quoth the raven, `Nevermore.'"  - EAP

ReplyQuote
Topic starter Posted : 12/07/2009 4:20 pm
aquaanimus
(@aquaanimus)
Trusted Member

I was able to set up my featured boxes with your help!  <G>

I figured out enough to use this:

}

.featuredbox .title {
background: #FFF;
color: #214263;
margin: 0% 1em;
        font-size: 0.9em;
border-bottom: 3px double #214263;
text-align: left;
}
.featuredbox .content{
font-size: 0.9em;
}

It turned out nicely.  My next step is to find that blue font that is all over the site...  IE the story titles, the category titles...  I'm having trouble finding it... But I will keep looking.  : )

"Quoth the raven, `Nevermore.'"  - EAP

ReplyQuote
Topic starter Posted : 18/07/2009 1:24 pm
Lyndsie
(@lyndsie)
Member Moderator

It's probably the link color. So look for the 'a' in the css. The general one, most likely, not one specific to a situation (like the alphabet links), so probably will be near the top.

ReplyQuote
Posted : 18/07/2009 4:24 pm
aquaanimus
(@aquaanimus)
Trusted Member

That was so it!  Thank you!  You saved me probably another hour of pulling my hair out.  😆

"Quoth the raven, `Nevermore.'"  - EAP

ReplyQuote
Topic starter Posted : 18/07/2009 5:11 pm
aquaanimus
(@aquaanimus)
Trusted Member

I just wanted a suggestion from someone who is a bit more experienced than me.    Right now my menu buttons at the top of my screen don't always align up properly.  I've noticed that each monitor I use creates a different result.  I've tried to edit the size of my buttons,  (www.markedbytheboys.com/fanfiction)  But, I have goofed it up so it looks even worse. I am going to restore my CSS when I get home.  I saved it last night. 😉

This is how it originally looked:

My question is, is there a way to adjust this so it will always show the same result?  I know not everyone maximizes their screen entirely when viewing pages, and that also makes a difference.   I don't even know if this is possible. I know my best bet would to just remove a button, but I kind of wanted them all there.  Or should I be trying a different approach all together?

EDIT:

I sort of got it to the way I want the buttons to be; however, for the life of me I cannot put a space between "home" and "challenges".  The account I logged in as is a reg user account I created so I could play with what they see. I know my admin button makes a difference in what I see.

"Quoth the raven, `Nevermore.'"  - EAP

ReplyQuote
Topic starter Posted : 19/07/2009 12:42 pm
Lyndsie
(@lyndsie)
Member Moderator

Hmm, I'm seeing that too, and it's not changing based on window size. I've determined that you're using {menu_content}, so it's not a case of missing spaces between like {home} and {challenges} and stuff. I see there's a variables.php file for the skin, but I can't actually see what's in it. Is the menu defined there? If so, could you copy and paste what you've got?

ReplyQuote
Posted : 19/07/2009 5:13 pm
aquaanimus
(@aquaanimus)
Trusted Member

Here is my variable.php:

<?php
$blocks["categories"]["status"] = 2;
$blocks["categories"]["template"] = "{image} {link} [{count}]";
$blocks["categories"]["columns"] = 0;
$blocks["featured"]["status"] =  '1';
$blocks["info"]["status"] = 2;
$blocks["menu"]["status"] = '1';
$blocks["menu"]["content"] = array (
0 => 'adminarea',
1 => 'logout',
        2 => 'mainsite',
        3 => 'forumlink',
4 => 'login',
        5 => 'rules',
6 => 'search',
7 => 'tens',
8 => 'browse',
9 =>'authors',
        10 =>'challenges',
11 => 'home');
$blocks["menu"]["style"] = 0;
$blocks["footermenu"] = array(
"title" => "",
"status" => "1",
"file" => "menu/menu.php",
"style" => 0,
"content" => array (
                0 => 'contactus',
1 => 'help',
2 => 'tos',
                3 => 'forumlink',
                4 => 'mainsite'

)
);
$blocks["login"]["status"] = 1;
$blocks['login']['acctlink'] = 0;
unset($blocks["login"]["template"]);
$blocks["login"]["form"] = 1; // Long form with register and lost password options
$blocks["random"]["status"] = 1;
$blocks["recent"]["status"] = 1;
$blocks["recent"]["tpl"] = 1;
$blocks["skinchange"]["status"] = '1';
$blocks["news"]["status"] = 2;
$blocks['news']['num'] = 3;
$new = "<span class='new'>New!</span>";
$displayprofile = 1;
$linkstyle = 0;
$displayindex = 1;
?>

"Quoth the raven, `Nevermore.'"  - EAP

ReplyQuote
Topic starter Posted : 19/07/2009 5:53 pm
Lyndsie
(@lyndsie)
Member Moderator

Okay, that looks fine. I don't know if this has anything to do with it, but it doesn't look like you've closed your banner div in header.tpl.


<!-- START BLOCK : header -->
<body>
<div id="{page_id}">
<div id="banner">
<img src="" http://www.markedbytheboys.com/images/mbtbbanner.png ">"
<div id="skin">{skinchange_content}</div>
<div id="rss">{rss}</div>
{menu_content}
{login_content}
</div>
<div id="mainpage">
<!-- END BLOCK : header -->

The only /div in there looks to be fore the {page id} one. Unless the /div for the banner div is in index.tpl, which doesn't make much sense, given the mainpage div there.  I think it should be this.


<!-- START BLOCK : header -->
<body>
<div id="{page_id}">
<div id="banner">
<img src="" http://www.markedbytheboys.com/images/mbtbbanner.png ">"
<div id="skin">{skinchange_content}</div>
<div id="rss">{rss}</div>
{menu_content}
{login_content}
      </div>
</div>
<div id="mainpage">
<!-- END BLOCK : header -->
ReplyQuote
Posted : 19/07/2009 6:18 pm
aquaanimus
(@aquaanimus)
Trusted Member

Cool. I fixed that.  I didn't notice any changes afterwords though.

The Challenges and Home did not get "squished together" until I started to play today, trying to fix it.  Maybe it will help if I post what I had BEFORE I made all the changes.  I will do that when I get home. I saved the css last night.

"Quoth the raven, `Nevermore.'"  - EAP

ReplyQuote
Topic starter Posted : 19/07/2009 6:31 pm
Carissa
(@carissa)
Member Moderator

In your CSS change the width on #menu #current from 100px to 90px.


#menu #current, #footermenu #current {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
width:100px;
height:20px;
position: relative;
border: 1px solid #000;
background: #800000;
display: block;
}
ReplyQuote
Posted : 19/07/2009 7:39 pm
Lyndsie
(@lyndsie)
Member Moderator

Oh, *headdesk*. I wasn't reading very thoroughly it turns out.

ReplyQuote
Posted : 19/07/2009 8:57 pm
Page 1 / 2
Share: