Posted by Peters on November 13, 2012 at 4:27pm
Hi all,
I am using theme CorpClean at this moment. Nice but I need to add some extra "blocks" on the page.
On the left side I need an extra column and need the upper block (where the slideshow is at) split into 2 rows.
As well I need the logo to be put into the main menu as well as the login (all) users.
Setup here: http://www.gaudimodels.com/homepage-eng.jpg
Normally with any html program this is done in a minute but with Drupal I don't know where to start..
Any help is welcome!
Thanks ahead,
Peters
Comments
Welcome to Drupal, the first
Welcome to Drupal, the first step is to create some HTML and CSS (static) for that new column. You can call that column anything you want like "leftcolumn", "sidebar", etc.
To create the extra blocks, you are doing to edit your theme's .info file and add the regions like this:
regions[sidebar_first] = First sidebarregions[leftcolumn] = Left Column
Once you do that, you will see a place in your Drupal back end with the titles "Left Sidebar" and "Left Column" or whatever you called the regions.
The final step for this to tell your template about it (page.tpl.php or any overrides) like this
<div id="leftcolumn"><?php print render($page['leftcolumn']); ?>
</div>
Bruce
Bruce C
Hot Web Ideas, Inc.
Hi Bruce, thanks for the
Hi Bruce,
thanks for the reply.
I got a region/block added but it appears below the slideshow and it should get on the right side of it.
I tried to limit the height of the slideshow box and a "float:right" but these options don't work.
Any suggestions?
Thanks!
=-=
A) you should be building a subtheme of the corporate clean theme so that when corporate clean is updated you don't overwrite your customizations.
B) a link to the site would aid in others helping to manipulate the css in question. you mention that you tried manipulating the height. The width may be what need to be manipulated. It's also worthy to note that if the images are larger than the the area in which they are being set they can also push other regions.
Hi..
First of all Welcome to Drupal Theme.we are upgrade the drupal latest version is 7.based on HTML 5.
Thank you,
Regards,
Srikanth,
cheapviagramedics.
http://www.rxdrugonlinestore.com
Thanks Srikanth!
Thanks Srikanth!
Front only
If you want these changes to only affect your homepage, you can do one of two things. Either create a template just for your homepage (page--front.tpl.php) or in your page.tpl.php file check to see if your are on the homepage:
<?php if ($is_front): ?><p>This will only appear on the front page.</p>
<?php endif; ?>
Hi Fox, thanks for your
Hi Fox,
thanks for your comment.
I still haven't found the right solution to this issue, a region & block is created but I can't get it next to the slideshow.
It appears beneath it.
I paste a shortened version of the code done here, maybe you can have a look.
It's the part of "banner-right" which should go into the banner (right side of slideshow)
Thanks ahead!
<!-- #banner --><div id="container">
<div id="banner">
<?php print render($page['banner']); ?>
<?php if (theme_get_setting('slideshow_display','corporateclean')): ?>
<?php if ($is_front): ?>
<!--slider-item-->
<div class="slider-item">
<div class="content container_12">
<div class="grid_9">
<!--slider-item content-->
:::Slideshow stuff, no issue heret:::
<!-- EOF: #slideshow -->
<div id="banner_right" class="banner-right"><div class="content container_12">
<div class="grid_3">
<?php print render($page['banner_right']); ?>
</div><!-- EOF: #banner_right -->
<?php endif; ?>
<?php endif; ?>
</div><!-- EOF: #banner -->
---
You're missing a bunch of closing div tags... I know this is a snippet of code, but I count at least 5 opened div's but your "EOF #banner" comment:
<div class="slider-item"><div class="content container_12">
<div class="grid_9">
<div id="banner_right" class="banner-right">
<div class="content container_12">
I would fix that first, and then check your CSS.
Hi Fox, thanks, 2 /DIV's were
Hi Fox,
thanks, 2
/DIV'swere missing I saw, but sadly this did not do the job.In CSS I have this:
.region-banner-right .block { float: right; width: 25%; }In the Layout part the "banner" region is untouched:
#banner { clear:both; border-bottom:1px solid #fcfcfc; overflow: hidden; }=-=
one would need to see css of the slideshow region where it deals with width. You've set the new region to 25% of the screen size. Is the slideshow region set to 75%?
It's also worthy to note that size of the images in the slideshow may have some impact.
I deleted the 25% but no
I deleted the 25% but no change there :/
In the CSS file this is the only part of the slideshow and I have the impression something has to be changed here:
#banner { clear:both; border-bottom:1px solid #fcfcfc; overflow: hidden; }This is the slideshow details part:
* Javascript Slideshow*/
#slider { position:relative; margin:0; padding:0;}
#slideshow { position:relative; display:none; }
#slideshow img { display:none; }
.slider-item { width:100%!important; max-width:100%!important; }
.slider-item .content { padding: 10px 0 5px 0; position:relative;}
.slider-item a { outline:none; }
#slider-controls-wrapper { padding:0; display:none; }
#slider-controls { display:block; text-align:center; }
#slider-controls ul { display:block; overflow:hidden; margin:0; padding:0; text-align:center; }
#slider-controls ul li { display:inline; margin:0; padding:0; list-style:none; }
#slider-controls ul li a { width:17px; height:17px; background:url('images/inactive-slide.png') no-repeat center center; display:inline-block; padding:0; margin:0; outline:none; }
#slider-controls ul li a:focus { outline:none; }
#slider-controls ul li.activeSlide a:hover, #slider-controls ul li.activeSlide a { background:url('images/active-slide.png') no-repeat center center; }
Pardon for my very rusty css knowledge!
=-=
I wouldn't have expected a change by removing the 25%. for two regions to sit side by side they must be able to fit within the container div.
without a link to the site so that tools can be used to take a closer look at the HTML and CSS as well as apply some changes to the CSS on the fly to gain a better understanding of what you are working with I'm guessing.
that said, the div that contains the slideshow (if this is a region you should have a class or an ID) would need to be 75 and floated left. The div (region) that your trying to add next to the slideshow would need to be set to 25%
Few Thoughts
Does this sum up the area's you're trying to create:
<div id="banner">
<div class="slider-item">
Style for the slide-items should be 75%
</div><!-- .slider-item -->
<div id="banner_right">
Styles for the banner_right should be 25%
</div><!-- close #banner_right -->
</div><!-- close #banner -->
Your slider items are taking up 100% of the width when you want them only taking up 75%. Your best option would be to wrap the slider in one div, set that to 75%, and you can keep your slide items at 100% (taking up 100% of the slider div, which is 75% of the width). Does that make sense?
Hey Fox! The page is using
Hey Fox!
The page is using the 12 column grid, the slide show is set on 9 and the other box on 3,
this should do the job as well or?
As the slide now is only taking a part of the page, but still the new block is not lining next to it.
---
The slides are all set to 100% width, and there is no set width on the slideshow.
Banner_right has nothing in regards to width, but the div inside it, container_12 has a width of 1200px (well over 25%).
You NEED to set a width on all div id's (banner_right and slideshow).
=-=
test by adding the following:
to #slideshow
width: 75%;float: left;
to #banner-right
width: 25%;float: right;
Then expand your screen. you'll notice that 75% and 25% will take up teh enture screen making the site look odd at resolutions higher than 1200
thus the over all container needs to be adjusted to fit the rest of the site
to #banner
width: 1200px;margin-left: auto;
margin-right: auto;
you will also need to add a background color to the #banner to make sure it blends with the other elements of the page.
As an aside, rather than working like this directly on corporate clean you should create a subtheme. Else when corporate clean is update you will have to make all changes again.
Will check...
Will check...
Ok, now I see a 25% black
Ok, now I see a 25% black space next to the slideshow, but the box still not inside that area :/
Besides now it does not line anymore with the grid, so with the below placed 2nd sidebar.
Maybe it's a better idea to insert a "right side bar" into the banner, extend the existing one upwards so to say.
That could do the job as well correct?
What I did now is copy the
What I did now is copy the footer code and replaced names to "banner".
This works fortunately.
I will try to make a manual slide show with Views Slide and add it as a block.
I guess the issue was somehow in the automated slideshow..
Thanks for your support guys!
Yes VM, I think I need to
Yes VM, I think I need to create a sub theme, could you tell me a bit about it?
=-=
creating subthemes
:)
:)