Collection of layout issues
boabjohn - August 2, 2009 - 12:15
| Project: | Zero Point |
| Version: | 6.x-1.7 |
| Component: | Documentation |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
If I were a css adept, I'm sure these would not be worthy of the issue queu, but...could anyone advise on quick hacks (ie, something I can drop into the _custom folder) to achive the following:
1. Slide the site slogan over so it sits nicely aligned left with the site name
2. Ask the user block divs to valign their contents to "top"
3. Explain where the site slogan is supposed to appear? (yes, it is set "on" and a value is entered)
thanks indeed!
| Attachment | Size |
|---|---|
| alignment.png | 65.92 KB |
#1
Thanks for the findings. the IE6 site slogan alignment if no logo is present will be corrected in the next release. I don't understand no.2, please explain.
To slide site-slogan use this lines in custom_style.css:
#site-slogan {padding-left: 100px; /*here is your value*/
}
#2
Thanks for the fast help with the alignment (1), and my browser in the screenshot is FFox3.5 on Windows Vista.
(2) My apologies for a poor description. I'm referring to the regions labeled User1...8.
I have various content in new blocks for those regions. Mostly just text, or an embedded slideshow.
The vertical alignment for the block's cell is centre, so the block titles are not sitting on the same baseline running left-right. Is it possible to "valign = top"?
(3) Slogan? Is that only for the page display...ie, not visible in the page layout, only in the browser's page information display?
Thanks indeed.
#3
(2) Use this code in /_custom/custom-style.css :
#section1 td.section, #section2 td.section {vertical-align: top;
}
.. I will add this by default in the next release.
(3) Slogan, if enabled, appears on all pages.
#4
I attached a screenshot with a similar problem. How can I align the pictures with the titles and how can I make all the user1,2,3,4 blocks equal? Now the first one is longer then the others. I would like all the content from those blocks to be equally distributed. Could you help me?
#5
You have to ad some lines to _custom/custom-style.css. For example, if you have 4 blocks (user 1-4) and only 2 blocks (user 5-8) ad this:
#section1 td.section {width: 25%;
}
#section2 td.section {
width: 50%;
}
#6
Thanks
#7
Just one more thing: how can I make the custom.css to have priority over te sky.css (or any other css file)? What I want to do is this: change the default color of H2 tags and the colors of the menu items, but even if I have the proper code in the custom.css, the theme still loads first the sky.css file.
#8
Ad !important to your css, like:
h2 {color: #dedede !important;
}
#9
Thanks, it worked for the H2 tags but for the nav-menu links it didn't. This is the code that I want to include in custom.css:
#navlist.links a, #navlinks ul li a {border: 1px solid #2f71a2;
border-bottom: none;
padding: 5px 24px;
background-color: #3A8CD0 !important;
}
#navlist li a:hover, #navlinks ul li a:hover {
color: #fff !important;
background-color: #2f71a2 !important;
}
The problem is that in sky.css this code (background-color: #2f71a2 !important;) already has the !important tag and it doesn't get overwrite by the custom.css file.
#10
I think it may be better to modify sky.css at this point.
#11
In response to comment 5, what must we do if we have different column widths (due to more or less of user blocks being used) on different pages?
Example: I have on my frontpage Users 5-8 all used. However, according to your custom-style.css modifications, the widths would stay distributed to 25% not 33.3% if I removed one block.
I recall the Salamander/Ability themes with this feature of equal distribution upon removal; anyone have a hack for this theme?
Link to Ability theme: http://drupal.org/project/ability
#12
I know well ability because it is a full copy of Salamander theme, which is also designed by me :)
0 Point user regions behave proportionally with the blocks' width, the same as Salamanderskins , Salamander and it's copy, Ability. If you would like to have equal region width across the user regions it is the only method that came to my mind.
#13
In response to comment 12, I wanted to drop this code in if any of you want to have an 'auto-distribution' (50%/2 blocks, 33.3%/3 blocks and 25%/4 blocks) for your userblocks. I'm going to look into making this an option on the theme page similar to the fixed v. variable layout options (standard v. auto-distribution). Thanks to Florian to writing essentially this in Salamander/Ability.
In layout.css (in the css folder), post underneath
table.sections {width: 100%
padding: 0;
}
td.section.width49 {
width: 50%;
}
td.section.width33 {
width: 33%;
}
td.section.width24 {
width: 25%;
}
In page.tpl.php, (in the case of user blocks 1-4) replace
<?php if ($user1 or $user2 or $user3 or $user4): ?><div id="section1" class="clear-block">
<table class="sections" cellspacing="0" cellpadding="0">
<tr>
<?php if ($user1): ?><td class="section"><?php print $user1; ?></td><?php endif; ?>
<?php if ($user2): ?><td class="section <?php if ($user1): ?>divider<?php endif; ?>"><?php print $user2; ?></td><?php endif; ?>
<?php if ($user3): ?><td class="section <?php if ($user1 or $user2): ?>divider<?php endif; ?>"><?php print $user3; ?></td><?php endif; ?>
<?php if ($user4): ?><td class="section <?php if ($user1 or $user2 or $user3): ?>divider<?php endif; ?>"><?php print $user4; ?></td><?php endif; ?>
</tr>
</table>
</div> <!-- /section1 -->
<?php endif; ?>
With this:
<?php
$section1count = 0;
$user1count = 0;
$user2count = 0;
$user3count = 0;
$user4count = 0;
if ($user1)
{
$section1count++;
$user1count++;
}
if ($user2)
{
$section1count++;
$user2count++;
}
if ($user3)
{
$section1count++;
$user3count++;
}
if ($user4)
{
$section1count++;
$user4count++;
}
?>
<?php if ($section1count): ?>
<?php $section1width = 'width' . floor(99 / $section1count); ?>
<?php $block2div = ($user2count and $user1count) ? " divider" : ""; ?>
<?php $block3div = ($user3count and ($user1count or $user2count)) ? " divider" : ""; ?>
<?php $block4div = ($user4count and ($user1count or $user2count or $user3count)) ? " divider" : ""; ?>
<div id="section1" class="clear-block">
<table class="sections" cellspacing="0" cellpadding="0">
<tr>
<?php if ($user1): ?><td class="section <?php echo $section1width ?>"><?php print $user1; ?></td><?php endif; ?>
<?php if ($user2): ?><td class="section <?php echo $section1width . $block2div; ?>"><?php print $user2; ?></td><?php endif; ?>
<?php if ($user3): ?><td class="section <?php echo $section1width . $block3div; ?>"><?php print $user3; ?></td><?php endif; ?>
<?php if ($user4): ?><td class="section <?php echo $section1width . $block4div; ?>"><?php print $user4; ?></td><?php endif; ?>
</tr>
</table>
</div> <!-- /section1 -->
<?php endif; ?>
#14
Also want to add a piece of misleading code that does not display the borders just in case anyone runs into the issue.
<?php
$section1count = 0;
$user1count = 0;
$user2count = 0;
$user3count = 0;
$user4count = 0;
if ($user1)
{
$section1count++;
$user1count++;
}
if ($user2)
{
$section1count++;
$user2count++;
}
if ($user3)
{
$section1count++;
$user3count++;
}
if ($user4)
{
$section1count++;
$user4count++;
}
?>
<?php if ($section1count): ?>
<?php $section1width = 'width' . floor(99 / $section1count); ?>
<div id="section1" class="clear-block">
<table class="sections" cellspacing="0" cellpadding="0">
<tr>
<?php if ($user1): ?><td class="section <?php echo $section1width ?>"><?php print $user1; ?></td><?php endif; ?>
<?php if ($user2): ?><td class="section <?php echo $section1width ?><?php if ($user1): ?>divider<?php endif; ?>"><?php print $user2; ?></td><?php endif; ?>
<?php if ($user3): ?><td class="section <?php echo $section1width ?><?php if ($user1 or $user2): ?>divider<?php endif; ?>"><?php print $user3; ?></td><?php endif; ?>
<?php if ($user4): ?><td class="section <?php echo $section1width ?><?php if ($user1 or $user2 or $user3): ?>divider<?php endif; ?>"><?php print $user4; ?></td><?php endif; ?>
</tr>
</table>
</div> <!-- /section1 -->
<?php endif; ?>
<?phpecho $section1width
?>
#15
Thanks. I will add this as an option in the next release of 0 Point.
#16
Boabjohn, use firefox and the addon firebug. I am not really a firefox user (Operagirl here) but it really helps when you want to tweak CSS settings.